webpack中配置eslint

首先安装eslint

npm install eslint --save-dev

安装好这个工具后,初始化eslint

npx eslint --init

这个时候会自动生成.eslintrc.js

 

然后去配置eslint,检测react

安装

 npm install babel-eslint --save-dev

 

 

配置好规范之后

执行 npx eslint src，就会报出相应的错误信息

或者

vscode，安装eslint，会自动提示不对的书写方式

 

用webpack配置eslint

首先安装 

npm install eslint-loader --save-dev

 

module.exports = {
　　module: {
　　　　rules: [{
　　　　　　test: /\.js$/,
　　　　　　// 如果你的这个js文件在node_modules里面，就不使用babel-loader了
　　　　　　exclude: /node_modules/,
　　　　　　use: ['babel-loader', 'eslint-loader'],
　　　　}]
　　}
}

然后运行 npm run dev，就会将不标准的写法呈现在命令行，在devServer里面设置overlay: true,就会在浏览器之际弹出错误，哪怕编辑器没有eslint也会报错。

 

真实项目中，一般不会在webpack中配置eslint，会降低性能。