VSCode支持ESLint自动格式化

安装插件 1.安装ESLint

2.安装Vetur

3.安装Prettier - Code formatter

以上3个插件在应用商店搜索直接安装即可

配置自动格式化 1.点击左上角【文件】——【首选项】——【设置】

2.点击右上角红框的图标，打开settings.json文件

3.输入以下内容

{ "editor.lineNumbers": "on", //开启行数提示 "editor.quickSuggestions": { //开启自动显示建议 "other": true, "comments": true, "strings": true }, "prettier.useTabs": true, //使用制表符缩进 "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //每次保存自动格式化 "prettier.semi": true, //去掉代码结尾的分号 "prettier.singleQuote": true, //使用单引号替代双引号 "prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "eslint.run": "onSave", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "prettier.printWidth": 200, //指定代码长度，超出换行 "prettier.requireConfig": true, //需要prettier.requireConfig格式化 "prettier.useEditorConfig": false, // "eslint.validate": [ // //开启对.vue文件中错误的检查 // "javascript", // "javascriptreact", // { // "language": "html", // "autoFix": true // }, // { // "language": "vue", // "autoFix": true // } // ], "terminal.integrated.rendererType": "dom", "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "editor.detectIndentation": false, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "window.zoomLevel": 1 }

结束语 CTRL+S保存文件时，即可按照ESLint格式话文件