更新于 2020年1月13日
好处是，即时检查，并提示，保存时自动修复
.vscode/settings.json配置如下
{
"editor.tabSize": 2, // tab缩进
"editor.formatOnSave": false,
// 自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 配置 ESLint 检查的文件类型
"eslint.validate": ["javascript","vue","html"]
}
即时检查
vscode安装eslint插件即可，会读取项目下的eslint配置文件（当然也需要先安装好相应的依赖）
自动修复
eslint本身也可以开启格式化，但是不如 prettier 强大，这里我们把prettier集成到eslint中，vscode还是使用的eslint格式化
- vscode安装插件
prettier（也需要安装eslint插件，貌似不安装prettier也行） - 项目安装依赖
eslint-plugin-prettier 用于从eslint中读取规则
eslint-config-prettier 禁用prettier可能与eslint冲突的规则
npm install prettier eslint-plugin-prettier eslint-config-prettier -D
- eslint添加配置
// 扩展规则
'extends': [
'eslint:recommended',
'plugin:prettier/recommended' // 放在后面
]
// 插件
plugins: ['prettier']
// 规则
rules: {
"prettier/prettier": [process.env.NODE_ENV === 'production' ? "off" : "error",
// prettier 规则配置
{
'printWidth': 100, // 一行代码超过这个值换行
'endOfLine': 'auto', // 换行cr检查
'singleQuote': true, // 启动单引号
'semi': false, // 语句结尾无分号
'trailingComma': 'none', // 对象最后一个属性是否需要添加逗号
'arrowParens': 'avoid' // 箭头函数参数不加()
}]
}
问题
自动格式化失效
注意vscode右下角的Eslint是否被禁用
