ESLint - 与vscode集成

更新于 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格式化

1. vscode安装插件 prettier （也需要安装eslint插件，貌似不安装prettier也行）
2. 项目安装依赖
   eslint-plugin-prettier 用于从eslint中读取规则
   eslint-config-prettier 禁用prettier可能与eslint冲突的规则

npm install prettier eslint-plugin-prettier eslint-config-prettier -D

3. 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是否被禁用