ESLint--定制你的代碼規則

簡介

ESLint是一個開源的項目，由Nicholas C. Zakas（《JavaScript高級程序設計》作者）於2013年六月創建。它的目標是為JavaScript提供一個完全可配置的實用lint工具。

JavaScript是一種動態的、松散型的語言，是特別容易受到開發人員的錯誤使用。而ESLint可以在不執行JavaScript代碼的情況下發現代碼的問題。

ESLint由Node.js編寫，通過NPM提供快速的運行環境，並且安裝方便。

安裝

1. 全局安裝

   $ npm install -g eslint
   

2. 本地安裝

   $ npm install eslint --save-dev
   

使用

生成配置文件

在你想要使用ESLint的工程根目錄下執行：

eslint --init

這個命令的目的是創建一個eslint配置文件。如果你是全局安裝的eslint，那么可以在任意文件中使用該命令，否則，你必須在使用該命令之前在該項目中安裝eslint。

執行該命令后，一般會出現三個選項可供選擇，他們分別是：

❯ Answer questions about your style
  Use a popular style guide
  Inspect your JavaScript file(s)

• 通過詢問你來定制你的配置文件；
• 使用通用的配置文件；
• 通過審查你寫的JavaScript文件來生成一個配置文件；

在這之后， 在你的目錄中會有一個.eslintrc文件，這個.eslintrc的存在形式也是可選擇的，它可以是JavaScript、YAML、JSON、package.json等等。

配置文件

生成配置文件之后，打開.eslintrc文件（一般是隱藏的），可以看到以下格式的內容：

{
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    },
    Globals: {
    }
}

我這個是json格式的，這里解釋一下這個文件里各個參數的意思：

1. env ：指定你的js代碼在哪個運行環境中檢測（每個運行環境都有一組預定義的全局變量）；

2. extends ：擴展配置規則（），我這里擴展的是eslint的推薦規則；

3. rules ：指定檢測規則；

   這是最重要的部分，也是你的自定義js代碼監測規則的地方，他的格式是：規則名: 規則。比如：

   "indent": ["error","tab"]
   

   這里indent就是規則名，它定義了縮進應該使用tab，規則內的第一個值error指的是錯誤等級，它有三個等級，分別是：

   error level	數值表示	涵義
   error	2	作為錯誤
   warn	1	作為提醒
   off	0	關閉該規則

更多的規則可以參考官網的rules。

4. Globals ：指定腳本執行過程中訪問的附加全局變量（比如jquery）

PS:

您可以配置全局的.eslint文件，而不至於要每個工程中都創建一個獨有的.eslint文件，烹制方法是將您的.eslintr文件放在當前用戶的根目錄下，類Unix系統的當前用戶目錄是~，而Windows系統的話則是類似於C:\Windows\Users\Username這樣的地方

檢測文件

在你的工程目錄下執行：

eslint yourfile.js

它會在命令后輸出你的所有報錯信息。這樣就ok了。個人感覺它的最大優勢就是完全可配置，而且配置文件一次構建，可以通過粘貼復制的方式無數次使用。甚至整個團隊可以通過使用一份配置文件來達到規范代碼的作用，還是很強大的。

使用現有的通用規則

eslint官方提供了3種預安裝包：

1. eslint-config-google

   Google標准

   執行安裝：

   npm install eslint eslint-config-google -g
   

2. eslint-config-airbnb

   Airbnb標准,它依賴eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，並且對各個插件的版本有所要求。

   你可以執行以下命令查看所依賴的各個版本：

   npm info "eslint-config-airbnb@latest" peerDependencies
   

   你會看到以下輸出信息，包含每個了每個plugins的版本要求

   { eslint: '^3.15.0',
     'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
     'eslint-plugin-import': '^2.2.0',
     'eslint-plugin-react': '^6.9.0' }
   

   知道了每個plugins的版本要求后，代入以下命令執行安裝即可使用：

   npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g
   

3. eslint-config-standard

   Standard標准，它是一些前端工程師自定的標准。

   執行安裝：

   npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g
   

目前來看，公認的最好的標准是Airbnb標准。建議全局安裝這些標准，然后在你的.eslint配置文件中直接使用：

{
  "extends": "Airbnb/standard/Google/"
}