工欲善其事，必先利其器，想要达成高效的开发目标，怎么能缺少了合适的编辑器插件呢。通过近期开发的几个项目，我养成了自己的开发习惯，这里就分享一些好用的vs code插件给大家。

第一款，Auto Rename Tag，这款插件可以在你改变标签名称的时候自动重命名对称的标签。

第二款，Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，名字虽然长，但其实是一个vs code汉化插件，对于英文苦手来说本地化的界面能够更好的上手。

第三款，code settings sync，这款插件可以通过gitee同步我们的vscode配置，适用于那些经常在多台电脑之间切换使用或者经常重装系统的朋友，具体的配置方法可以参考 ，这里不做赘述。

第四款，ESLint，是一款大名鼎鼎的代码规范性检测插件，能够给你的代码规范性保驾护航，还可以按照项目里面.eslintrc.js的配置来自定义检测方式。

第五款，Live Server，类似于open in browser，可以将你的项目右键用浏览器打开，与open in browser不同的是，它是在本地启用一个服务器来运行你的项目，因此在你保存时可以实时预览，非常方便，缺点是关闭vs code之后网页也会失效，因为它是随着vs code里面的终端一起运行的。

第六款，One Dark Pro，本篇介绍中唯一一款非功能性插件，它是用来美化编辑器外观的，使用前注释文本是有点儿晃眼的绿色，装上这款插件后注释文本变成了容易忽略的浅灰色，各种标签和变量也有各自的颜色，不容易混淆，同时它还集成了Material Icon Theme的功能，左侧文件列表中的不同文件也有了不同的图标，而这一款插件也有三种不同的对比度模式，安装插件后在插件的详情页面点击“设置颜色主题”即可选择。

第七款，Prettier ESLint，这款插件可以按照ESLint的规范格式化代码，使用时需要在设置中编辑settings.json的eslint.options项目，详细的设置说明稍后会在文末给出。

第八款，Settings Sync，与前面的code settings sync相似，完善了了vs code自身的同步功能，这款插件使用微软账户或者github账户来同步，因其同步使用的服务器地址不在国内，比较适合重度github用户来使用，具体的教程可以看这里 Settings Sync 使用教程 ，教程中有一点没提到的是生成tokens的时候记得把默认的30days改成no expriation。

第九款，Vetur ，可以用来提示vue代码的高亮，同样类似的插件还有Vue 3 Snippets ，可以对vue2和vue3的代码进行自动补全，VueHelper ，可以将vue编写的代码给出提示，朋友们可以自行选择，我自己是把三款插件全部都安装了，享受三倍的快乐~

最后，大家有什么比较得心应手的插件也可以分享在评论区，文中有表述错误或者有疑问的也可以提出来，不吝赐教。
附：本人Prettier ESLint设置代码如下

{
    "update.enableWindowsBackgroundUpdates": false,
    "update.mode": "none",
    "window.zoomLevel": 2,
    "workbench.colorTheme": "One Dark Pro",
    "sync.gist": "58510748d9d691bd67101073cf3e1064",
    "editor.formatOnSave": true,
    "diffEditor.ignoreTrimWhitespace": true,
    "javascript.format.enable": false,
    "typescript.format.enable": false,
    "vetur.format.enable": false,
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

使用方法为点击编辑器左下角齿轮按钮，选择“设置”，点击右上角“打开设置（json）”图标，备份好自己的设置代码之后，将以上内容粘贴进settings.json设置文件即可。

由于json文件无法添加注释，这里逐行解释下每行代码的意思：

{
//窗口后台更新
    "update.enableWindowsBackgroundUpdates": false,
//vscode更新提示/自动更新
    "update.mode": "none",
//窗口缩放等级
    "window.zoomLevel": 2,
//工作区主题配置
    "workbench.colorTheme": "One Dark Pro",
//code settings sync插件的配置
    "sync.gist": "58510748d9d691bd67101073cf3e1064",
//保存时自动格式化代码
    "editor.formatOnSave": true,
//自动去除代码间空行
    "diffEditor.ignoreTrimWhitespace": true,
//js文件的格式化
    "javascript.format.enable": false,
//ts文件的格式化
    "typescript.format.enable": false,
//vetur插件的配置
    "vetur.format.enable": false,
//eslint插件的配置
    "eslint.enable": true,
//eslint在每输入一个字符后检测是否有错误/不规范
    "eslint.run": "onType",
//Prettier ESLint插件的配置
    "eslint.options": {
//自动格式化的文件类型
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
//保存时自动按照eslint规范修复错误/不规范
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}