欲善其事，必先利其器。想要达到高效的开发目标，怎么能缺少一款合适的编辑器插件呢。通过最近几个项目的开发，养成了自己的开发习惯。在这里我会和大家分享一些好用的vscode插件。第一个，AutoRenameTag，这个插件可以在你更改标签名称时自动重命名对称标签。第二个，中文（简体）（SimplifiedChinese）LanguagePackforVisualStudioCode，虽然名字长，但其实是一个vscode中文插件，本地化的界面可以更好的为英文用户使用。第三个，codesettingssync，这个插件可以通过gitee同步我们的vscode配置。适合那些经常在多台电脑之间切换或者经常重装系统的朋友。具体配置方法可以参考，这里不再赘述。第四种，ESLint，是知名的代码规范化检测插件，可以为你的代码规范化保驾护航，你也可以根据项目中.eslintrc.js的配置自定义检测方式。第五个，LiveServer，类似于在浏览器中打开，你可以右击你的项目，用浏览器打开。与在浏览器中打开不同，它在本地启用一个服务器来运行你的项目，所以当你保存它时可以实时预览，非常方便。缺点是关闭vscode后网页会失效，因为在vscode中是用终端运行的。第六个，OneDarkPro，是本次介绍中唯一没有功能的插件。用于美化编辑器的外观。使用前，评论文字有点刺眼的绿色。安装这个插件后，评论文字变成了很容易被忽略的浅灰色。各种标签和变量也有自己的颜色，不易混淆。同时还集成了MaterialIconTheme的功能。左侧文件列表中不同的文件也有不同的图标，而这款插件也有三种不同的对比模式，安装插件后在插件详情页面点击“设置颜色主题”即可选择。在。第七项，PrettierESLint，这个插件可以按照ESLint规范格式化代码。使用时需要在settings中编辑settings.json的eslint.options项。后面会在文末给出详细的设置说明。第八部分，SettingsSync，和前面的codesettingssync类似，完善了vscode本身的同步功能。本插件使用微软账号或者github账号进行同步，因为同步使用的服务器地址不在国内，所以比较适合重度Github用户可以使用。具体教程请参考这里的SettingsSync使用教程。教程中没有提到的一件事是，在生成令牌时，请记住将默认的30天更改为无剥夺。第九项Vetur，可以用来提示vue代码的高亮。还有类似的插件Vue3Snippets，可以自动补全vue2和vue3的代码，还有VueHelper，可以对vue写的代码进行提示。朋友们可以自己选择。三个插件都是我自己安装的，享受三倍的快乐~最后如果大家有什么比较好用的插件也可以在评论区分享。如果文中有错误或疑问，也可以提出来，不吝赐教。附：我的PrettierESLint设置代码如下{"update.enableWindowsBackgroundUpdates":false,"update.mode":"none","window.zoomLevel":2,"workbench.colorTheme":"OneDarkPro","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文件不能添加注释，这里逐行解释一下每一行代码的含义：{//windowbackgroundupdate"update.enableWindowsBackgroundUpdates":false,//vscodeupdateprompt/automaticupdate"update.mode":"none",//窗口缩放级别"window.zoomLevel":2,//Workbench主题配置"workbench.colorTheme":"OneDarkPro",//代码设置同步插件配置"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",//PrettierESLint插件配置"eslint.options":{//自动格式化文件类型"extensions":[".js",".vue",".jsx",".tsx"]},//保存时根据eslint规范自动修复错误/不规范"editor.codeActionsOnSave":{"source.fixAll.eslint":true}}
