專案中使用eslint

為什麼使用eslint : 為了保持程式碼風格的統一

在做vue專案的時候， 基本上都會使用 vue-cli 腳手架去建立一個vue 專案，裡面可以選擇使用eslint 程式碼檢測，我相信大多數人都關閉了，在以前我是不用eslint 工具的，我會覺得使用很麻煩，到處都在報錯。

而且需要配置很多規則，增加了開發難度。（我太low了）

但是多人合作，為了保持程式碼風格的統一，還是需要一套規範，讓大家閱讀程式碼的時候比較清晰，加上現在編輯器上很多外掛，可以快速的幫我們格式化程式碼，因此使用eslint 早就是一種趨勢了。

話不多說，接下來如何使用eslint 和 配置eslint。

首先需要安裝eslint 的依賴包

eslint ，eslint-loader， babel-eslint 是最基本的，另外我做的是react專案 ，因此用到了 airbnb 團隊的規則 (eslint-config-airbnb) 剩下的一些是 airbnb包 需要的依賴，具體的看你自己要用什麼規則就裝什麼規則。

"eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    
 
"eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-standard": "^4.0.0"

安裝好後進入webpack.config.js 的配置檔案中，配置eslint 規則

module.exports = {  
  module: {
    rules: [
      {
        enforce: 'pre', // 在所有loader編譯之前執行eslint檢查
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        exclude: [
          path.join(__dirname, '../node_modules')
        ]
      },
     ],
     ...
  },
  ...        
}

enforce配置一定要寫上！需要要在所以loader編譯之前去檢測
test配置表示 只驗證 js 和 jsx 結尾的檔案
loader配置 表示使用 eslint-loader處理
exclude配置 表示不檢測 node_modules 下的js 和 jsx檔案


接下來需要配置具體的規則，在專案的跟目錄下(或者你需要使用eslint的目錄下)建立 .eslintrc的配置檔案，該檔案下可以配置具體規則

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions":{
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": "airbnb",
    "rules": {
        "semi": [0],
        "no-unused-vars": [0],
        "react/jsx-filename-extension": [0]
    }
}

parser 是配置 eslint 的解析器

env 是配置eslint 使用的環境  brower表示 支援瀏覽器 環境 ，因為我的專案用到了ssr 渲染 裡面用的node環境， 所以我配置 了 node: true選項

extends 是繼承什麼規則， 我前面有講我是用的 airbnb團隊的 eslint規則， 如果你不需要那個規則， 就可以填寫 ‘standard’  使用標準規則。

parserOptions 中的 ecmaVersion 表示解析 es的版本， 我專案用的是es6 ，所以填寫的是6, 

rules 裡面是具體的規則,可以參照官網，需要開啟或者遮蔽的規則的就去這裡面配置  官網 rules規則

配置好執行專案就可以檢測到了。 如果某一行不需要驗證，則可以在這一行加上註釋     // eslint-disable-line

const NextApp = require('./app.jsx').default // eslint-disable-line

配置 .editorconfig

為什麼配置.editorconfig: 解決不同執行環境，不同編輯器運行同一個專案的差異

為什麼要配置.editorconfig 呢？ 因為不同的編輯器在處理不用操作的時候預設方式不一致，因此需要統一操作的規範。

比如 tab 縮排有的是4格，有的是2格。  結尾換行的的時候 windows  使用的是  crlf  ，而 mac 和 linux 使用的 lf。

接下來在專案根目錄下建立.editorconfig的配置檔案

root = true

[*]
charset = utf-8
indent_style = space
index_size = 2
end_of_line = LF
insert_final_newline = true
tirm_trailing_whitespace = true

charset 設定 字符集為 utf-8

index_style 縮排方式使用 空格 

index_size tab 縮排2個空格

end_of_line 換行方式統一為LF

insert_final_newline  儲存檔案時在最後新插入一行

trim_trailling_whitespace 去掉行尾的空白字元

還可以配置其他的，還是按照你需要的規則配置。

拜了個拜！