vs code 版本或及以上
1.安装以下三个插件插件
-
Vetur ?Vue语法支持。包括语法高亮、语法代码提示、语法lint检测
-
ESLint 语法纠错
-
Prettier
2.左下角设置
3.进行配置
旧版配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | {<!-- --> "editor.fontSize": 20, "window.zoomLevel": 1, "workbench.iconTheme": "ayu", "files.autoSaveDelay": 500, "files.autoGuessEncoding": true, "files.autoSave": "afterDelay", //自动保存 "editor.quickSuggestions": {<!-- --> //开启自动显示建议 "other": true, "comments": true, "strings": true }, "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //保存时自动格式化 "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复 "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验 "prettier.semi": false, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用带引号替代双引号 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": {<!-- --> "js-beautify-html": {<!-- --> "wrap_attributes": "force-aligned" //属性强制折行对齐 } }, "eslint.validate": [ //开启对.vue文件中错误的检查 "javascript", "javascriptreact", {<!-- --> "language": "html", "autoFix": true }, {<!-- --> "language": "vue", "autoFix": true } ], "emmet.triggerExpansionOnTab": true, "files.associations": {<!-- --> //要进行html补全的文件 "*.js": "html", "*.vue": "html" } } |
新版配置不同点:
1 2 3 4 | //保存时自动将代码按ESLint格式进行修复 "editor.codeActionsOnSave": {<!-- --> "source.fixAll.eslint": true, }, |
1 2 3 4 | "eslint.validate": [ //开启对.vue文件中错误的检查,autoFix默认开启,只需输入字符串数组即可 "javascript","html", "vue" ] |
4. 新版完整配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | {<!-- --> "editor.fontSize": 20, "window.zoomLevel": 1, "workbench.iconTheme": "ayu", "files.autoSaveDelay": 500, "files.autoSave": "afterDelay", "editor.quickSuggestions": {<!-- --> //开启自动显示建议 "other": true, "comments": true, "strings": true }, "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //保存时自动格式化 //保存时自动将代码按ESLint格式进行修复 "editor.codeActionsOnSave": {<!-- --> "source.fixAll.eslint": true, }, "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验 "prettier.semi": false, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用带引号替代双引号 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": {<!-- --> "js-beautify-html": {<!-- --> "wrap_attributes": "force-aligned" //属性强制折行对齐 } }, "eslint.validate": [ //开启对.vue文件中错误的检查,autoFix默认开启,只需输入字符串数组即可 "javascript","html", "vue" ] } |
其他好用插件
-
Chinese ——中文
-
Live Server ——浏览器自动刷新
设置刷新方式和时间
-
open in browser ——直接右键项目单击启动
-
Beautify ——格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则
5.VueHelper ——包括了vue2所有api,还含有vue-router2和vuex2的代码提示