webpack4系列教程（八）：使用Eslint審查代碼

前言：

本章內容，我們在項目中加入eslint配置，來審查校驗代碼，這樣能夠避免一些比較低級的錯誤。並且在團隊協作的時候，保持同一種風格和規範能提高代碼的可讀性，進而提高我們的工作效率。

安裝：

eslint-config-standard 是一種較爲成熟通用的代碼審查規則，這樣就不用我們自己去定義規則了，使用起來非常方便，記住還需要安裝一些依賴插件：

npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

配置：

在項目根目錄下創建 .eslintrc 文件：

{
  "extends": "standard",
  "rules": {
    "no-new": "off"
  }
}

在vue項目中，.vue文件中的 script標籤內的代碼，eslint 是無法識別的，這時就需要使用插件： eslint-plugin-html

npm i eslint-plugin-html -D

然後在 .eslintrc 中配置該插件：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  }
}

這樣就能解析 .vue文件中的JS代碼了，官方也是如此推薦。

使用：

配置完成，如何使用呢？
在 package.json 文件中添加一條 script：

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress --inline --colors",
    "lint": "eslint --ext .js --ext .vue src/"
  }

- -ext 代表需要解析的文件格式，最後接上文件路徑，由於我們的主要代碼都在src 目錄下，這裏就配置 src 文件夾。

npm run lint

可見控制檯給出了很多錯誤：

在項目前期沒有加入eslint的情況下，後期加入必然會審查出許多錯誤。出現這麼多錯誤之後，如果我們逐條手動去解決會非常耗時，此時可以藉助eslint自動修復，方法也很簡單。
只需要添加一條命令即可：

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress --inline --colors",
  "lint": "eslint --ext .js --ext .vue src/",
  "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
}

然後執行

npm run lint-fix

我們希望在開發過程中能夠實時進行eslint代碼審查，需要安裝兩個依賴：

npm i eslint-loader babel-eslint -D

修改 .eslintrc：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  },
  "parserOptions":{
    "parser": "babel-eslint"
  }
}

由於我們的項目使用了webpack並且代碼都是經過Babel編譯的，但是Babel處理過的代碼有些語法可能對於eslint支持性不好，所以需要指定一個 parser。
下一步，在webpack.config.js中添加loader：

{
        test: /\.(vue|js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        enforce: 'pre'
 }

enforce: 'pre' 表示預處理，因爲我們只是希望eslint來審查我們的代碼，並不是去改變它，在真正的loader(比如：vue-loader)發揮作用前用eslint去檢查代碼。

記得在你的IDE中安裝並開啓eslint插件功能，這樣就會有錯誤提示了。

比如：

圖中的錯誤是未使用的變量。

editorconfig:

editorconfig是用來規範我們的IDE配置的，在根目錄創建 .editorconfig文件：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

這樣就能在各種IDE使用相同的配置了。

同樣需要在IDE中安裝editorconfig插件

以上就是eslint的配置方法了。

---

本人才疏學淺，如有不當之處，歡迎批評指正

傳送門：

webpack4系列教程