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/" }文章轉自 https://www.cnblogs.com/yzg1/archive/2017/01/13/6282791.html