webpack@5.64.4 配置eslint

1、安装配置 eslint-webpack-plugin
1)安装 eslint-webpack-plugin:(该插件使用 eslint 来查找和修复 JavaScript 代码中的问题。)

npm install eslint-webpack-plugin --save-dev
注意: 如果未安装 eslint >= 7 ,你还需先通过 npm 安装:

npm install eslint --save-dev

2)配置:
webpack.config.js文件中:

const ESLintPlugin = require('eslint-webpack-plugin');

plugins: [
    new ESLintPlugin({
      exclude:'node_modules', //排除node_modules文件夹的eslint检查
      fix:true //自动修复js格式错误
    })
  ],

2、设置检查规则
可参考官方文档:https://www.npmjs.com/package/eslint-config-airbnb-base
1)安装eslint-config-airbnb-base:
默认导出包含了所有的ESLint规则,包括ECMAScript 6+。它需要eslint和eslint-plugin-import,eslint前面已经安装过,就不要再次安装
npm install eslint-config-airbnb-base eslint-plugin-import --save-dev
2)配置:两种方式:
方式一: .eslintrc文件中添加:
"extends":"airbnb-base
方式二:package.json文件中添加:
"eslintConfig": { "extends": "airbnb-base" }

3、编写js文件,检查配置eslint的可用性
webpack运行项目,出现以下警告,可在js文件中有console.log()输出语句的上方,添加// eslint-disable-next-line,即可忽略该输出语句的警告提示。

本次安装包的版本:
"eslint": "^8.3.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.3",
"eslint-webpack-plugin": "^3.1.1",

posted @ 2021-12-01 10:21  STRIVE-PHY  阅读(410)  评论(0编辑  收藏  举报