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",