ESLint安装与配置

安装

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