eslint的作用：代碼規範工具。
eslint的使用
項目目錄：（簡單舉例）
|--demo
|--src
|--index.html
|--index.js
|--home.js
|--list.js
|--node_modules
|--package.json
|--package-lock.json
|--webpack.config.js
index.js代碼：（不規範版本）
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>hello 小橙子</div>
}
}
ReactDom.render(<App />, document.getElementById('root'));
安裝eslint：
npm i eslint -D
初始化eslint配置文件:
npx eslint --init // 使用npx可以直接運行剛剛安裝的eslint命令
1.選擇規範約束類型
分別代表含義：
- 只檢查語法
- 檢查語法，並查找問題
- 檢查語法、查找問題並強制執行代碼樣式
2.選擇import/export模塊語法。
3.選擇react語法
4.不實用TypeScripts語法。
5.選擇在瀏覽器運行項目。
6.選擇一種通用的約束標準：
7.選擇Airbnb公司的前端規範要求
8.選擇JavaScript語法進行配置：
9.做eslint需要一些依賴項，選擇現在開始安裝：
按照以上順序初始化eslint配置之後，在項目根目錄下，會多出一個 .eslintrc.js文件 . 具體配置如下：
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};
接下來，我們使用eslint來檢測src下得代碼是否符合airbnb公司前端代碼規範：
命令行運行：npx eslint src
執行檢測src目錄代碼規範命令後，不規範代碼會在命令行直接給予提示，方便我們錯誤排查。很明顯，index.js中的代碼有兩處不符合airbnb公司前端代碼的規範：
- 第2行，import語句後應有1個空行。
- 第5行，缺少分號。
我們做如下修正：(index.js規範版本)
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render() {
return <div>hello 小橙子</div>;
}
}
ReactDom.render(<App />, document.getElementById('root'));
再次執行規範檢查：npx eslint src
此時命令行不再報錯。
在webpack中配置eslint
業務代碼不再具體體現，主要分享eslint的配置方式
需藉助eslint-loader:
npm i eslint-loader --save-dev
在webpack.config.js裏配置：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'] // loader的執行順序是從後向前的，這裏先執行eslint-loader
}]
}
- 當遇到一個js文件的時候，我們會先使用eslint-loader檢查代碼是否規範，然後再去使用babel-loader做代碼的轉換。
執行打包：
npm run start
會在命令行中提示代碼規範錯誤❌. 如果我們期望當不規範代碼出現時，直接在瀏覽器頁面彈出層提示，可以通過如下配置來完成：（overlay）
webpack.config.js
devServer: {
overlay: true, // 當運行webpack-dev-server去做打包的時候，一旦遇到語法規範的問題，就會在頁面彈出層提示我們
contentBase: './dist',
open: true,
port: 8081,
hot: true,
hotOnly: true
}
- overlay: true 指當運行webpack-dev-server去做打包的時候，一旦遇到語法規範的問題，就會在頁面彈出層提示我們.
再次執行打包，頁面提示如下：
這樣我們就可以根據報錯提示，一一修正不規範代碼。
如果我們不想遵循某個規範，可以在 .eslintrc.js 配置項rules裏排除掉：
rules: {
"import/no-extraneous-dependencies": 0, // 不遵循此要求
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0
}
- 把規範項設置爲0，既爲不遵循此規則。
即便我們的編譯器中沒有eslint的插件，我們也可以藉助eslint-loader依賴，在webpack中的配置，也可以很方便的定位我們代碼規範中的問題，同時也能快速的解決。 （使用過vue框架的小夥伴應該清楚，在vue開發項目的過程中，也會經常在頁面上出現報錯想象，是因爲在vue-cli腳手架裏，已經幫我們封裝好了一些插件的配置。原理與我們使用的eslint-loader的配置類似）
注意事項
在webpack.config.js的module配置規則中：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', {
loader: 'eslint-loader',
options: {
fix: true // 如果存在很淺顯的不規範代碼，eslint會自動幫你修復掉
}
}]
}]
}
- loader的執行順序是從後向前的，這裏先執行eslint-loader
- 當遇到一個js文件的時候，我們會先使用eslint-loader檢查代碼是否規範，然後再去使用babel-loader做代碼的轉換。
如果把eslint-loader和babel-loader顛倒位置配置，則是不正確的做法，如果非要這麼做，那麼可以藉助 force: “pre” 配置項，強制eslint-loader先執行。如下：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'eslint-loader',
options: {
fix: true // 如果存在很淺顯的不規範代碼，eslint會自動幫你修復掉
},
force: 'pre' // 強制eslint-loader先執行
}, 'babel-loader']
}]
}
通過以上配置之後，就算把babel-loader配置在eslint-loader之後，也會先去執行eslint-loader。
最佳實戰
如果在公司做項目的過程中，一般不會把eslint-loader配置在webpack中，一旦使用它，就會不可避免的拖慢我們的打包速度，所以，在真實項目中，不會去使用eslint-loader。
一般我們在團隊合作開發的過程中，都會使用Git版本管理倉庫。Git裏有個鉤子，在git提交代碼時，對代碼進行一個eslint的檢測，如果代碼不符合規範，則不允許代碼提交到git倉庫。
缺點： 這種方式只會在提交代碼時，命令行提示錯誤信息，不能圖形交互的提示。
所以，在做項目的打包配置的時候，或者到底要不要做一些插件使用的時候，不僅要考慮它是否方便， 還要考慮是否會對打包速度有一定影響，如果影響較大，也可以在便捷性上做一些犧牲。從而提高它的打包速度。?