vscode常用插件

常用的vscode插件

为了方便查找和使用我简单分了一下类，但可能不标准，因为有些插件的功能对应分类很模糊。

一、外观

1.1 vscode-icons

更改vscode的文件图标，更直观的了解是什么类型的文件

1.2 Dracula Official

编译器主题。

主题可以在扩展应用里直接搜索theme，选择自己喜欢的主题~

这个插件是在小破站的一个up视频里看到的，亲身使用后觉得不错，文末有鸣谢。

1.3 Material Icon Theme

也是图标主题

使用：

这个插件是在小破站的一个up视频里看到的，亲身使用后觉得不错，文末有鸣谢。

二、编程

2.1 Code Runner

可在编译器下直接运行JS代码

使用：在JS代码下，右键菜单选择code Run

2.2 Beautify

格式化代码

使用：首次使用鼠标右键，选择使用其他方式格式化代码，将Beautify设置为默认值后，以后使用快捷键shift+alt+f即可

2.3 翻译(translate to chinese)

翻译，话不多说，英语不好的小伙伴安就对了！！！

使用，选中词组，按下shift+ctrl+t，在右下角就会出现该单词相应的汉语意思。（目前感觉不好的地方就是，翻译结果需要手动关闭）

2.4 翻译（英汉词典）

使用：安装插件之后，选中在单词上方后，vscode下面的状态栏就会显示相应的汉语意思。也可以点击查看详细翻译。

2.5 Vetur

vue开发插件，可高亮vue语法及ascss语法和ts语法。

2.6 Auto Rename Tag

自动更名标签，如果你先写了一个div,又想改为span,只要改开始标签，结束标签的名就会自动修改，不用在茫茫嵌套标签中寻找了

2.7 koroFileHeader

快捷添加文件头（ctrl+alt+i）、函数注释(ctrl+alt+t)

使用：

打开设置-打开settings.json,将下面部分json复制进去（根据自己的需求修改项目）详细配置也可以看插件的官网配置。

配置字段

{  
//快速添加文件头部注释和函数注释
    "fileheader.configObj": {
        "createFileTime": true, //设置为true则为文件新建时候作为date，否则注释生成时间为date
        "autoAdd": true, //自动生成注释
        "annotationStr": {
            "head": "/*",
            "middle": " * @",
            "end": " */",
            "use": true //设置自定义注释可用
        },
        // 自动添加头部注释的黑名单
        "prohibitAutoAdd": [
            "json"
        ],
    },
    // 函数注释
    "fileheader.cursorMode": {
        // 默认字段
        "description": "",
        "param": "",
        "return": ""
    },
    
    "fileheader.customMade": {
        "Description": "", //文件内容描述
        "Author": "zhiguo.hong", //编辑人
        "Date": "Do not edit", //时间
        "LastEditTime": "Do not edit",
        "LastEditors": "zhiguo.hong",
        "Reference": ""
    },
    "liveServer.settings.root": "",
}