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的配置方法了。