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，會降低性能。