工欲善其事，必先利其器，想要达成高效的开发目标，怎么能缺少了合适的编辑器插件呢。通过近期开发的几个项目，我养成了自己的开发习惯，这里就分享一些好用的vs code插件给大家。
第一款，Auto Rename Tag，这款插件可以在你改变标签名称的时候自动重命名对称的标签。
第二款，Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，名字虽然长，但其实是一个vs code汉化插件，对于英文苦手来说本地化的界面能够更好的上手。
第三款，code settings sync，这款插件可以通过gitee同步我们的vscode配置，适用于那些经常在多台电脑之间切换使用或者经常重装系统的朋友，具体的配置方法可以参考gitee同步方法，这里不做赘述。
第四款，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用户来使用，具体的教程可以看这里github同步方法，教程中有一点没提到的是生成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
}
}
