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 包,故需要安装两个开发依赖包:

css 复制代码
npm i eslint eslint-webpack-plugin -D

1.2 添加配置文件

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

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,首先在文件顶部引入插件:

ini 复制代码
const ESLintWebpackPlugin = require('eslint-webpack-plugin')

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

ini 复制代码
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代码。使用示例:

**

less 复制代码
// .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 文件配置

ruby 复制代码
{
    "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)

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

**

json 复制代码
{
    "extends": {
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    }
}

2.3 eslint-plugin-node 插件

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

**

json 复制代码
{
    "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)。使用示例

**

json 复制代码
{
    "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"
    }
}

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

**

json 复制代码
{
    "extends": [
        "plugin:promise/recommended"
    ]
}

2.5 eslint-plugin-standard 插件

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

**

css 复制代码
{
  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 插件
sql 复制代码
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
或
yarn add  @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

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

perl 复制代码
{
"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...

相关推荐
契机再现1 小时前
babel与AST
javascript·webpack·typescript
前端李易安13 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
loey_ln15 小时前
webpack配置和打包性能优化
前端·webpack·性能优化
Amd79418 小时前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
三天不学习1 天前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
前端青山1 天前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵2 天前
什么是Webpack,有什么特点
前端·webpack·node.js
生椰拿铁You2 天前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js
Amd7942 天前
Nuxt.js 应用中的 webpack:configResolved事件钩子
webpack·自定义·开发·配置·nuxt.js·构建·钩子
Amd7943 天前
Nuxt.js 应用中的 webpackConfigs 事件钩子
webpack·配置·模块·nuxt.js·插件·输出·钩子