ESLint安装与配置

时代变了，ESLint 更新到9.x之后，废弃了部分对格式的规则，只保留了对语法的校验。所以如果需要 ESLint 自动化格式，需要安装额外的插件以及配置。高版本配置请参考这篇文章

本文适用 eslint < 9.0.0

安装

1	npm install eslint

之后根据提示操作，如使用 commjs、Airbnb 等

其他语言插件

摘自某项目

"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^7.5.0",
"vue-cli-plugin-element": "~1.0.1",

配置 `.eslintrc.js`

或者直接在 package.json 文件里的 eslintConfig 字段指定配置

module.exports = {
  // 环境
  env: {
    browser: true,
    es2021: true,
  },
  // 使用插件，这里用了 vue 和 airbnb 样式
  extends: ["plugin:vue/essential", "airbnb-base"],
  // 目标 ES 版本
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
    parser: "babel-eslint",
  },
  // 目标文件
  plugins: ["vue"],
  // 编译选项
  parserOptions: {},
  // ** 自定义规则 **
  // 0 = close, 1 = warning, 2 = error
  // 配置规则查询 http://eslint.cn/docs/rules/
  rules: {
    "linebreak-style": 0,
    "no-console": 0,
    "no-plusplus": 0,
    "no-restricted-syntax": 1,
    "no-continue": 0,
    "no-unused-vars": 1,
    "import/no-extraneous-dependencies": 0,
    "import/no-unresolved": 0,
  },
};

保存时自动 `lint`

VS Code

File -> Prefrences -> Settings
Search ESLint
ESLint Code Action -> ‘Edit in settings.json’

"eslint.validate": ["javascript", "vue", "html"],
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true,
},

WebStorm

File -> Settings
- Language & Frameworks -> JavaScript -> Code Quailty Tools -> ESLint
- OR search ‘ESLint’

Choose:

Automatic ESLint configuration (You can manully do the settings if you want)
Run eslint –fix on save

安装

其他语言插件

配置 .eslintrc.js

保存时自动 lint

VS Code

WebStorm

配置 `.eslintrc.js`

保存时自动 `lint`