胖蔡叨叨叨
你听我说

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

项目环境及相关资料

依赖库

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配置,所以一些基础的配置就不需要我们再重复配置了。上面所包含的配置属性以及相关描述,在下方给一一列出来了:

规则名 规则描述
for-direction 强制 “for” 循环中更新子句的计数器朝着正确的方向移动
getter-return 强制 getter 函数中出现 return 语句
no-async-promise-executor 禁止使用异步函数作为 Promise executor
no-compare-neg-zero 禁止与 -0 进行比较
no-cond-assign 禁止条件表达式中出现赋值操作符
no-constant-condition 禁止在条件中使用常量表达式
no-control-regex 禁止在正则表达式中使用控制字符
no-debugger 禁用 debugger
no-dupe-args 禁止 function 定义中出现重名参数
no-dupe-keys 禁止对象字面量中出现重复的 key
no-duplicate-case 禁止出现重复的 case 标签
no-empty 禁止出现空语句块
no-empty-character-class 禁止在正则表达式中使用空字符集
no-ex-assign 禁止对 catch 子句的参数重新赋值
no-extra-boolean-cast(#fix) 禁止不必要的布尔转换
no-extra-semi(#fix) 禁止不必要的分号
no-func-assign 禁止对 function 声明重新赋值
no-inner-declarations 禁止在嵌套的块中出现变量声明或 function 声明
no-invalid-regexp 禁止 RegExp 构造函数中存在无效的正则表达式字符串
no-irregular-whitespace 禁止不规则的空白
no-misleading-character-class 不允许在字符类语法中出现由多个代码点组成的字符
no-obj-calls 禁止把全局对象作为函数调用
no-prototype-builtins 禁止直接调用 Object.prototypes 的内置属性
no-regex-spaces(#fix) 禁止正则表达式字面量中出现多个空格
no-sparse-arrays 禁用稀疏数组
no-unexpected-multiline 禁止出现令人困惑的多行表达式
no-unreachable 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
no-unsafe-finally 禁止在 finally 语句块中出现控制流语句
no-unsafe-negation(#fix) 禁止对关系运算符的左操作数使用否定操作符
require-atomic-updates 禁止由于 await 或 yield的使用而可能导致出现竞态条件的赋值
use-isnan 要求使用 isNaN() 检查 NaN
valid-typeof 强制 typeof 表达式与有效的字符串进行比较
no-case-declarations 不允许在 case 子句中使用词法声明
no-empty-pattern 禁止使用空解构模式
no-fallthrough 禁止 case 语句落空
no-global-assign 禁止对原生对象或只读的全局对象进行赋值
no-octal 禁用八进制字面量
no-redeclare 禁止多次声明同一变量
no-self-assign 禁止自我赋值
no-unused-labels 禁用出现未使用过的标
no-useless-catch 禁止不必要的 catch 子句
no-useless-escape 禁用不必要的转义字符
no-with 禁用 with 语句
no-delete-var 禁止删除变量
no-shadow-restricted-names 禁止将标识符定义为受限的名字
no-undef 禁用未声明的变量,除非它们在 /*global */ 注释中被提到
no-unused-vars 禁止出现未使用过的变量
no-mixed-spaces-and-tabs 禁止空格和 tab 的混合缩进
constructor-super 要求在构造函数中有 super() 的调用
no-class-assign 禁止修改类声明的变量
no-const-assign 禁止修改 const 声明的变量
no-dupe-class-members 禁止类成员中出现重复的名称
no-new-symbol 禁止 Symbolnew 操作符和 new 一起使用
no-this-before-super 禁止在构造函数中,在调用 super() 之前使用 this 或 super
require-yield 要求 generator 函数内有 yield
no-console 禁用 console
indent 强制使用一致的缩进
max-len 强制一行的最大长度
space-in-parens 强制在圆括号内使用一致的空格
curly 强制所有控制语句使用一致的括号风格
keyword-spacing 强制在关键字前后使用一致的空格
lines-around-comment 要求在注释周围有空行
one-var-declaration-per-line 要求或禁止在变量声明周围换行
comma-dangle 要求或禁止末尾逗号
quotes 强制使用一致的反勾号、双引号或单引号
no-nested-ternary 禁用嵌套的三元表达式
wrap-iife 要求 IIFE 使用括号括起来
no-new-wrappers 禁止对 String,Number 和 Boolean 使用 new 操作符
no-var 要求使用 let 或 const 而不是 var
no-duplicate-imports 禁止重复模块导入
eol-last 要求或禁止文件末尾存在空行
camelcase 强制使用骆驼拼写法命名约定
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Webpack 项目添加 eslint 实现代码检测功能
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏