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...

相关推荐
lin-lins18 小时前
模块化开发 & webpack
前端·webpack·node.js
柳鲲鹏2 天前
LINUX/CMAKE编译opencv_contrib
linux·opencv·webpack
前端李易安2 天前
webpack的常见配置
前端·webpack·node.js
魏大帅。2 天前
Webpack入门教程:从基本概念到优化技巧
前端·webpack·node.js
web_code2 天前
webpack源码快速分析
前端·webpack·源码阅读
Aaaaaaaaaaayou3 天前
从零实现 webpack,但 Rust 版 - [4] 实现插件系统
webpack·rust
熊的猫3 天前
从 vue 源码看问题 — vue 初始化都做了什么事?
前端·javascript·vue.js·chrome·webpack·前端框架·node.js
王解3 天前
#Jest进阶知识:整合 webpack 综合练习
前端·javascript·webpack·单元测试·node.js
诗雅颂4 天前
【js逆向学习】某多多anti_content逆向(补环境)
开发语言·javascript·webpack·逆向·拼多多·补环境·anti_content
码上编程4 天前
Webpack5常用配置
前端·webpack