ESLint入門

1、ESLint是什麼？

        ESLint是一個用於識別和報告ECMAScript/JavaScript中代碼格式的工具，目的是使代碼風格更加統一和避免錯誤。ESLint的理念是可擴展、每條規則獨立、不內置編碼風格。

2、爲何要使用ESLint？

        在多人協做時，統一的代碼風格更具可讀性、可維護性。即便是單人開發，也可使用ESLint來規範本身的書寫規範。畢竟，規範化代碼也是提高效率的一個方面。

        並且，ESLint能夠集成到主流的編輯器和構建工具中，以便咱們在編寫的代碼的同時進行lint。

        以 WebStorm 爲例，只要全局安裝 ESLint 或者在項目中依賴中添加 ESLint ，而後在設置裏開啓 ESLint 便可。其餘編輯能夠從官方文檔（https://eslint.org/docs/user-guide/integrations）中得到具體信息。

3、如何使用ESLint？

1 安裝和使用
        有兩種方式去安裝ESLint：全局和本地。

1.1 本地安裝和使用
        若是要將ESLint做爲項目構建系統的一部分，那麼選擇在本地進行安裝。 您可使用npm：

npm install eslint --save-dev

        而後您須要創建一個配置文件：

./node_modules/.bin/eslint --init

        接着，你能夠在您的項目根目錄運行ESLint：

./node_modules/.bin/eslint yourfile.js

        您使用的任何插件或可共享配置也必須在本地安裝，以此與本地安裝的ESLint配合使用。

1.2 全局安裝和使用
        若是要使ESLint能夠運用你的全部項目，那麼選擇在全局安裝ESLint。 你可使用npm：

npm install -g eslint

        而後您須要創建一個配置文件：

eslint --init

        接着，你能夠在您的項目根目錄運行ESLint：

eslint yourfile.js

        您使用的任何插件或可共享配置也必須在全局安裝，以此與全局安裝的ESLint配合使用。

2 配置
        在運行eslint --init以後，會在您的目錄創建一個.eslintrc文件。在其中您將看到一些以下的配置規則：

{
　　"rules": {
　　　　"semi": ["error", "always"],
　　　　"quotes": ["error", "double"]
　　}
}

        「semi」和「quotes」是ESLint中規則的名稱。 第一個值是規則的錯誤級別，能夠是如下值之一：

• "off" 或 0 - 關閉規則
• "warn" 或 1 - 將規則做爲警告
• "error" 或 2 - 將規則做爲錯誤

        這三個錯誤級別容許您細微地控制ESLint如何應用規則。

        您的.eslintrc配置文件將一樣包含該行：

"extends": "eslint:recommended"

        因爲這一行，規則頁面上標記爲「」的全部規則都將被打開。

        ESLint被設計爲可徹底配置的，配置ESLint有兩種主要的方法：

1. 註釋配置 - 使用JavaScript註釋將配置信息直接嵌入文件。
2. 配置文件 - 使用JavaScript，JSON或YAML文件來指定整個目錄及其全部子目錄的配置信息。

        這能夠是格式爲.eslintrc.*文件或package.json中的eslintConfig域，這兩個ESLint都將自動查找和讀取，也能夠在命令行中指定配置文件。

        有幾個可配置的信息：

• Environment - 您的腳本被設計在所運行的環境。每一個環境都帶有一組預約義的全局變量。
• Globals - 您的腳本在執行期間訪問的其餘全局變量。
• Rules - 啓用的規則和錯誤的級別。

        更多配置選項和細節，看官方配置文檔 （http://eslint.org/docs/user-guide/configuring）。

4、經常使用的ESLint共享配置

        由於一個配置文件能夠被基礎配置中的以啓用的規則繼承。一些公司或組織會開源出來他們使用的配置，它們以共享配置（Shareable Cinfig）的形式存在。

        備註：共享配置是一個npm包，它輸出一個配置對象。要確保這個包安裝在ESLint能請求到的目錄下。將extends的屬性值指定爲該對象名稱便可實現繼承。

1 Standard（https://github.com/standard/eslint-config-standard）

2 Airbnb（https://github.com/airbnb/javascript)

5、webpack 整合 ESLint

        webpack 中經過添加 loader 的方式來使用 eslint，該 loader 名爲 eslint-loader。在 webpack 中的配置以下。

/* 這是webpack配置文件的內容，省略無關部分 */
{
  module: {
    preLoaders: [{
      test: /\.js$/, // 只針對js文件
      loader: 'eslint', // 指定啓用eslint-loader
      include: dirVars.srcRootDir, // 指定審查範圍僅爲本身團隊寫的業務代碼
      exclude: [/bootstrap/], // 剔除掉不須要利用eslint審查的文件
    }],
  },
  eslint: {
    configFile: path.resolve(dirVars.staticRootDir, './.eslintrc'), // 指定eslint的配置文件在哪裏
    failOnWarning: true, // eslint報warning了就終止webpack編譯
    failOnError: true, // eslint報error了就終止webpack編譯
    cache: true, // 開啓eslint的cache，cache存在node_modules/.cache目錄裏
  }
}

         固然也能夠把 eslint-loader 放在 loaders 中，可是放置到 preLoaders 中能夠先於 loader 進行處理，若 ESLint 檢查到了問題就會在此停掉。若是你使用了 babel 等相似的 loader，那麼經過 webpack 編譯先後的代碼相差就很大了，這每每致使沒法 ESLint 的檢查。

        eslint-loader 能夠採用一個配置項 eslint 來進行配置，默認會使用項目根目錄下的配置文件 .eslintrc 來讀取配置信息。