Webpack 项目添加 eslint 实现代码检测功能

项目环境及相关资料

• 构建工具： webpack 5.x
• Nodejs 版本：v14.x.x
• 使用语言：js
• eslint配置官网：https://eslint.bootcss.com/

依赖库

1、eslint-loader
想要 webpack 实现 eslint 的检测，首先需要安装 loader eslint-loader ,并在配置文件中添加加载规则:

// 使用npm
$ npm install --save-dev eslint-loader

// 使用yarn
$yarn add -D eslint-loader

// webpack.config.js

{
...
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "eslint-loader",
         exclude: /node_modules/,
        enforce: "pre",
        include: [path.resolve(__dirname, "src")], // 指定检查的目录
        options: {
          // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
          formatter: require("eslint-friendly-formatter"), // 指定错误报告的格式规范
      //  fix: true, // 自动修正，会改变文件内容,根据需要配置
        },
      },
    ];
  }
  ...
}

2、 eslint

为了能使项目具有eslint检测功能，我们需要安装eslint依赖库，并生成配置eslint配置文件.

// npm 
$ npm install --save-dev eslint

// yarn
$ yarn add -D eslint

eslint的配置文件有很多类型，可以是 .eslintrc,也可以是 .eslint.js又或者是 .eslint.json,这里以.eslintrc.js为例，给出一个示例配置:

这里需要注意的是eslint的配置，需要配置一个错误级别，通常错误级别有三个类别：

• “off” or 0 – 关闭规则
• “warn” or 1 – 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• “error” or 2 – 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

/* eslint-disable no-undef */
module.exports = {
'env': {
'browser': true,
'es2021': true,
},
'extends': 'eslint:recommended',
'parserOptions': {
'ecmaVersion': 13,
'sourceType': 'module',
},
'rules': {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow console during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
// 以下为该项目自定义部分
'indent': ['error', 4], //缩进风格 - 开启缩进4格
'max-len': ['error', {
'code': 120,         // 强制单行的最大长度为120
'comments': 120,    // 强制单行注释的最大长度为120    
}],
'space-in-parens': ['error', 'always'], // 强制圆括号内有一个空格
'curly': ['error', 'multi', 'consistent'], //   if、else if 和 else 所有的代码块使用或者不使用大括号。
'keyword-spacing':['warn',{         // 关键字前后需要保持至少有一个空格
'before': true,
'after': true,
}],
'lines-around-comment':['warn',{        
'beforeBlockComment': true,
'afterBlockComment': true,
}],
'one-var-declaration-per-line': ['error', 'initializations'], // 强制每个变量初始化语句换行
'comma-dangle': ['error', 'always-multiline'], //  当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，要求使用拖尾逗号；当在 同一行时，禁止使用拖尾逗号。
'quotes': ['error', 'single'], // 要求尽可能地使用单引号
'no-nested-ternary': 'error', // 禁止使用嵌套的三元表达式
'multiline-ternary': ['error', 'always-multiline'], // 如果表达式跨越多个行，则在三元表达式的操作数之间强制换行
'wrap-iife': ['error', 'any'], // 强制总是包裹，但允许其它风格。
'no-new-wrappers': 'error', // 禁止对 String，Number 和 Boolean 使用 new 操作符
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-duplicate-imports': 'error', // 禁止重复模块导入
'eol-last': ['error', 'always'], //文件强制使用换行 (LF)结束最后一行
'camelcase': ['error', {'properties': 'always'}], //强制驼峰法命名 
},
};

上面配置中的 ‘extends’: ‘eslint:recommended’，为继承eslint默认的rule配置，所以一些基础的配置就不需要我们再重复配置了。上面所包含的配置属性以及相关描述，在下方给一一列出来了: