转载本文请联系前端有道公众号。作为一名Vue瓦工，我一直在寻找适合Vue开发的VSCode扩展。下面是一些有用的扩展，可以让我们搬砖更方便。CatalogueVeturVue童鞋开发必装插件之一VolarVue3.0童鞋开发必装插件之一Git工具GitHistoryPathIntellisensePath智能提示AutoRenameTag自动关闭标签AutoCloseTag自动修改标签名称CodeRunner运行代码LiveServer为本地服务器构建静态页面Prettier-Codeformatter代码格式化ESlint代码检测Vetur这个插件相信不用我说多了，想必大家都知道或者用过它，它提供了Vue特有的语法语义高亮、代码片段和用于错误检查和调试的API语法等。官方图片地址：https://marketplace.visualstudio.com/items?itemName=octref.veturVolar（Vue3.0开发)如果你的项目Vue3.0推荐使用这个插件，体验会更好。Volar是专门为Vue3构建的语言支持插件，它基于@vue/reactivity按需计算TypeScript来优化类似于原生TypeScript语言服务的性能。官方地址：https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volarChinese(Simplified)LanguagePackforVisualStudioCode此插件将VSCode英文转成中文。对我这个英文渣来说尤其有必要。而且这个是官方的汉化包，理解一下也没什么问题。每当VScode软件更新时，英文都会有变化，关闭软件重启即可，或者重新安装这个插件。官方地址：Chinese(Simplified)LanguagePackforVisualStudioCodeTranslation(英汉词典)代码翻译在线翻译，翻译结果真慢，吐槽。77万词条的本地英汉词典，不依赖任何在线翻译API，不限查询次数，秒出结果。本插件支持驼峰式、小驼峰式、下划线等写变量名、属性名、类名和方法名。-w1205官方地址：https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionaryMaterialIconTheme有一套非常齐全的图标。可以说这里是你想收录的，只是截了一小部分图片。-w895官方地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-themevscode-icons这是VSCode官方的图标主题包，根据个人喜好选择图标库。效果如下——w330官方地址：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-iconsBracketPairColorizer这个插件使用颜色来识别匹配的括号。当代码很多的时候，括号就会很多。删除一个属性名对象，如果没有颜色区分，可能会误删。不过平时不建议写很多括号，建议平写，虽然色码太长，读起来吃力。官方地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizerGitLens增强Git功能BuildintoVisualStudioCode可视化代码作者可以通过Git一目了然地指责注释和代码镜头，无缝导航和探索Git存储库。官方地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlensGitHistory查看git日志、文件历史、比较分支或提交。当我们需要查看文件的历史记录时，我们可能会使用另一个GitUI工具来查看。是的，只要点击文件右上角的图标就可以看到历史代码和代码差异。官方地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistoryPathIntellisensePathIntellisense当我们需要导入一个文件或者图片的时候，可能会有很多文件夹层级。我们可以通过这个插件来提醒我们当前下有哪些文件。官方地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisenseAutoRenameTag自动重命名成对的HTML/XML标签。当我们修改标签时生成。官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tagAutoCloseTag自动添加HTML/XML关闭标签。我们写的时候生成的。官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tagCodeRunner运行多种语言的代码片段或代码文件，支持C、Java、JavaScript、PHP、Python等，点击即可右键单击鼠标并选择运行代码以获取结果。官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runnerLiveServer建立在本地服务器上，自动重新加载静态特征HTML页面。在html页面右击选择openwithLiveServer官方地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServerPrettier-CodeformatterPrettier是一个代码格式化器。它通过解析代码并使用自己的规则重新打印代码来强制执行一致的样式，这些规则在必要时格式化代码，同时考虑最大行长度。//vscodesetting.json{"editor.formatOnSave":false,//保存时格式化文件"editor.defaultFormatter":"esbenp.prettier-vscode","[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}}官方地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscodeESlint在多人协作开发团队中，统一的代码编写标准非常重要。一套规范可以让我们写的代码达到风格一致，提高代码的可读性和统一性。自然保养也会得到改善。以下eslint规范代码基于vue官方eslint规则eslint-config-vue，稍作修改。您可以根据自己的需要自定义配置。//.eslintrc.jsmodule.exports={root:true,parserOptions:{parser:'babel-eslint',sourceType:'module'},env:{browser:true,node:true,es6:true,},extends:['plugin:vue/recommended','eslint:recommended'],//addyourcustomruleshere//itisbaseonhttps://github.com/vuejs/eslint-config-vuerules:{"vue/max-attributes-per-line":[2,{"singleline":10,"multiline":{"max":1,"allowFirstLine":false}}],"vue/singleline-html-element-content-newline":"off","vue/multiline-html-element-content-newline":"off","vue/name-property-casing":["error","PascalCase"],"vue/no-v-html":"off",'accessor-pairs':2,'arrow-spacing':[2,{'before':true,'after':true}],'block-spacing':[2,'always'],'brace-style':[2,'1tbs',{'allowSingleLine':true}],'camelcase':[0,{'properties':'always'}],'comma-dangle':[2,'never'],'逗号间距':[2,{'之前':false,'之后':true}],'逗号-style':[2,'last'],'constructor-super':2,'curly':[2,'multi-line'],'dot-location':[2,'property'],'eol-last':2,'eqeqeq':["error","always",{"null":"ignore"}],'generator-star-spacing':[2,{'before':true,'after':true}],'handle-callback-err':[2,'^(err|error)$'],'indent':[2,2,{'SwitchCase':1}],'jsx-quotes':[2,'prefer-single'],'key-spacing':[2,{'beforeColon':false,'afterColon':true}],'keyword-spacing':[2,{'before':真，'after':true}],'new-cap':[2,{'newIsCap':true,'capIsNew':false}],'new-parens':2,'no-array-constructor':2，'no-caller'：2，'no-console'：'off'，'no-class-assign'：2，'no-cond-assign'：2，'no-const-assign'：2，'no-control-regex':0,'no-delete-var':2,'no-dupe-args':2,'no-dupe-class-members':2,'no-dupe-keys':2，'no-duplicate-case'：2，'no-empty-character-class'：2，'no-empty-pattern'：2，'no-eval'：2，'no-ex-assign'：2,'no-extend-native':2,'no-extra-bind':2,'no-extra-boolean-cast':2,'no-extra-parens':[2,'functions'],'不掉线ough':2,'no-floating-decimal':2,'no-func-assign':2,'no-implied-eval':2,'no-inner-declarations':[2,'functions'],'no-invalid-regexp':2,'no-irregular-whitespace':2,'no-iterator':2,'no-label-var':2,'no-labels':[2,{'allowLoop':false,'allowSwitch':false}],'no-lone-blocks':2,'no-mixed-spaces-and-tabs':2,'no-multi-spaces':2,'no-multi-str':2,'no-multiple-empty-lines':[2,{'max':1}],'no-native-reassign':2,'no-negated-in-lhs':2,'no-new-object':2,'no-new-require':2,'no-new-symbol':2,'no-new-wrappers':2,'no-obj-calls':2,'no-octal':2,'no-octal-escape':2,'no-path-concat':2,'no-proto':2,'no-redeclare':2,'no-regex-spaces':2,'no-return-assign':[2,'except-parens'],'no-self-assign':2,'no-self-compare':2,'no-sequences':2,'no-shadow-restricted-names':2,'no-spaced-func':2,'no-sparse-arrays':2,'no-this-before-super':2,'no-throw-literal':2,'no-trailing-spaces':2,'no-undef':2,'no-undef-init':2,'no-unexpected-multiline':2,'no-unmodified-loop-条件'：2，'不需要-三元y':[2,{'defaultAssignment':false}],'no-unreachable':2,'no-unsafe-finally':2,'no-unused-vars':[2,{'vars':'all','args':'none'}],'no-useless-call':2,'no-useless-computed-key':2,'no-useless-constructor':2,'no-useless-escape':0,'no-whitespace-before-property':2,'no-with':2,'one-var':[2,{'initialized':'never'}],'operator-linebreak':[2,'after',{'overrides':{'?':'before',':':'before'}}],'padded-blocks':[2,'never'],'quotes':[2,'single',{'avoidEscape':true,'allowTemplateLiterals':true}],'semi':[2,'never'],'semi-spacing':[2,{'before':false,'after':true}],'space-before-blocks':[2,'always'],'space-before-function-paren':[2,'never'],'space-in-parens':[2,'never'],'space-infix-ops':2,'space-unary-ops':[2,{'words':true,'nonwords':false}],'spaced-comment':[2,'always',{'markers':['global','globals','eslint','eslint-disable','*package','!',',']}],'template-curly-spacing':[2,'never'],'use-isnan':2,'valid-typeof':2,'wrap-iife':[2,'any'],'yield-star-spacing':[2,'两者'],'yoda':[2,'never'],'prefer-const':2,'no-debugger':process.env.NODE_ENV==='production'?2:0,'object-curly-spacing':[2,'always',{objectsInObjects:false}],'array-bracket-spacing':[2,'never']}}官方地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
