本文只讨论如何在vscode 中自动格式化和保存前自动格式化遵循eslint,不包含eslint 的使用以及规则配置。
前置条件
一、 保证项目中已按照eslint插件并添加 .eslintrc.js
文件
二、 添加插件 ESLint

配置环境
打开vscode 配置 文件 > 首选项 > 配置 (也可以ctrl+ ,) 搜索eslint ,打开配置文件

新/旧版vscode可能有所出入,在setting.json中根节点下添加如下配置
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[html]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
// 每次保存时将代码按eslint格式进行保存
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 添加文件扩展名支持
"eslint.validate": [
"javascript",
"vue",
"html",
".js"
],
"eslint.format.enable": true,
如果您安装了 JS-CSS-HTML Formatter请禁用或卸载,否则会和eslint插件发生冲突。

禁用或卸载后需要重启vscode
网友评论