webpack5 配置 eslint

本文为 eslint 介绍，其他plugins 可以阅读 webpack 三基础配置：配置plugins

eslint

ESLint 中文文档

1. eslint eslint-webpack-plugin

1.1 安装依赖

在 webpack 4 中，ESLint 是通过 loader 的方式集成到 webpack 中的。在 webpack 5 中，是通过 plugins（插件）的形式进行集成。插件名称为 eslint-webpack-plugin。该插件又依赖 eslint 包，故需要安装两个开发依赖包：

npm i eslint eslint-webpack-plugin -D

1.2 添加配置文件

在项目的根路径下添加 ESLint 的配置文件：.eslintrc.js:

module.exports = {
    env: {
        node: true, // 启用node中全局变量
        browser: true  // 启用浏览器中全局变量
    },
    // 继承 Eslint 规则
    extends: ['eslint:recommended'],
    parserOptions: { // 解析选项
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
          jsx: true // 如果是 React 项目，就需要开启 jsx 语法
        }
    },
    rules: {
        'no-var': 'off',
        'no-console': 'off'
    }
}

1.3 修改 webpack 配置

修改 webpack.config.js，首先在文件顶部引入插件：

const ESLintWebpackPlugin = require('eslint-webpack-plugin')

Webpack5 插件是通过构造函数方式提供的，引入该插件后，得到的是一个构造函数，通过 new来创建对象。插件配置在webpack 配置对象的 plugins节点下，该节点是一个数组，数组每个元素都是一个插件。配置如下：

const ESLintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new ESLintWebpackPlugin({
            context: path.resolve(__dirname, 'src')
        })
    ],
    ...
}

2.其他几个eslint 插件及作用

2.1 eslint-plugin-html 插件

通过这个插件你可以让eslint去检测html文件script标签里的js代码。使用示例：

**

// .eslintrc.js 文件配置

{
    // 和 rules 同级
    "plugins": [         "html"    ]，
    // 禁用 eslint-plugin-html  插件 ，或者建 .eslintignore 文件配置 匹配对应文件
    "settings": {
        "html/html-extensions": [".html", ".vue"]
    },
}

2.2 eslint-plugin-import 插件

这个插件意在提供对ES6+ import/export语法的支持，有助于防止你写错文件路径或者引用的变量名。使用示例：

.eslintrc.js 文件配置

{
    "plugins": [
    
     ],
    "rules": {
        "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
        "import/named": 2,
        "import/namespace": 2,
        "import/default": 2,
        "import/export": 2, //  `"error"` 或 `2`
        // # etc...
    }
}

其他配置
{
"import/no-unresolved": [2],
"import/named": [2],
"import/default": [2],
"import/namespace": [2],
"import/no-restricted-paths": [0],
"import/no-absolute-path": [2],
"import/no-dynamic-require": [1],
"import/no-internal-modules": [0],
"import/no-webpack-loader-syntax": [1],
"import/export": [2],
"import/no-named-as-default": [0],
"import/no-named-as-default-member": [2],
"import/no-deprecated": [2],
"import/no-extraneous-dependencies": [0],
"import/no-mutable-exports": [0],
"import/nambiguous": [2],
"import/no-commonjs": [1],
"import/no-amd": [1],
"import/no-nodejs-modules": [0],
"import/first": [2],
"import/no-duplicates": [2],
"import/no-namespace": [0],
"import/extensions": [2],
"import/order": [1],
"import/newline-after-import": [2],
"import/prefer-default-export": [0],
"import/max-dependencies": [0],
"import/no-unassigned-import": [0],
"import/no-named-default": [2]
}

rules 里面的配置，则必须为 'off'、'warn' 或 'error'。

• "off" 或 0 --- 告诉 ESLint 忽略给定的规则

• "warn" 或 1 --- 告诉 ESLint 将违反给定的行为视为警告（不影响退出代码）

• "error" 或 2 --- 告诉 ESLint 在违反给定规则时出错（触发时退出代码为 1）

或者使用现成的推荐规则：

**

{
    "extends": {
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    }
}

2.3 eslint-plugin-node 插件

添加对node的eslint支持。使用示例：

**

{
    "plugins": ["node"],
    "extends": ["eslint:recommended", "plugin:node/recommended"],
    "rules": {
        "node/exports-style": ["error", "module.exports"],
    }
}

2.4 eslint-plugin-promise 插件

这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式（最佳实践，best practices）。比如在对promise使用了then之后会要求你加一个catch捕获下异常，当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch（因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch）。使用示例

**

{
    "plugins": [
        "promise"
    ],
    "rules": {
        "promise/always-return": "error",
        "promise/no-return-wrap": "error",
        "promise/param-names": "error",
        "promise/catch-or-return": "error",
        "promise/no-native": "off",
        "promise/no-nesting": "warn",
        "promise/no-promise-in-callback": "warn",
        "promise/no-callback-in-promise": "warn",
        "promise/avoid-new": "warn",
        "promise/no-return-in-finally": "warn"
    }
}

或者直接使用现成的推荐规则：

**

{
    "extends": [
        "plugin:promise/recommended"
    ]
}

2.5 eslint-plugin-standard 插件

这是一个为Standard Linter而做的补充插件，一共就扩展了4个规则，使用示例如下：

**

{
  rules: {
    'standard/object-curly-even-spacing': [2, "either"]
    'standard/array-bracket-even-spacing': [2, "either"],
    'standard/computed-property-even-spacing': [2, "even"]
    'standard/no-callback-literal': [2, ["cb", "callback"]]
  }
}

3. 其他eslint语法解析常用插件：

eslint-plugin-react （支持react 规则） eslint-plugin-vue（支持vue规则）

若是ts项目，还需要配置下面

• @typescript-eslint/parser ESLint 专门解析 TypeScript 的解析器
• @typescript-eslint/eslint-plugin 内置各种解析 TypeScript rules 插件

npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
或
yarn add  @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

** 配置文件默认为 .eslintrc**

{
"parser": "@typescript-eslint/parser",
"plugins": [
  "@typescript-eslint"
],
"rules": {
  "@typescript-eslint/no-unused-vars": "error"
}
}

谢谢阅读，希望有帮助！

有参考： 链接： juejin.cn/post/729312... www.jianshu.com/p/d0ac0d497...
www.jianshu.com/p/ade75072c...