atom使用全局配置ESLint

ESLint是一個Javascript靜態檢查工具，它能夠幫你養成良好的編程習慣，使你的javascript代碼達到國際化的水準。ESLint是全部Javascrpt靜態檢查工具裏最晚誕生的一個，以前還曾經有過JSLint以及JSHint等工具，但JSLint和JSHint都是用的一套標準，在目前這個前端技術飛速發展的時代已經顯得有點落伍。ESLint的好處是既提供了國際大廠的標準，同時又給了你自定義標準的可能性。ESLint的推薦設置方式是按項目設置，可是若是咱們有不少個不一樣的javascript項目的話，一個一個去設置未免太麻煩，因此在這裏介紹的是全局設置方法，一次設置，全部項目所有采用同一標準。

首先，在atom中安裝linter插件和linter-eslint插件。安裝完成以後，linter-eslint的缺省設置有2個地方須要修改：

1. 把Disable when no ESLint config is found的對鉤去掉。這個選項的意思是說：若是你的javascript項目文件夾中沒有.eslintrc這樣的配置文件的話，那麼ESLint就不起做用。在這裏，咱們要設置爲全局lint，不須要在每一個javascript文件夾中包含.eslintrc文件，因此要把它去掉，不然因爲咱們的項目文件夾中沒有.eslintrc文件，ESLint會不起做用。

2. 把Use global ESLint installation的對鉤勾上。由於咱們使用的是全局的ESLint安裝包。

下面，開始安裝ESLint：

1. npm install eslint -g
   ESLint是經過npm安裝的，這裏的-g選項表明全局，也就是說它不會把ESLint的可執行文件安裝在你的項目文件夾或者說當前文件夾下。若是你沒有設置這個-g選項的話，它會在你當前文件夾下安裝ESLint可執行文件，那樣就不是全局安裝了。後面咱們全部安裝包都要用使用這個-g選項

2. eslint -v
   安裝完成以後，你能夠先執行一下eslint -v這個命令來看一下eslint是否已經安裝成功了，若是沒有的話，你須要反覆檢查，直到確保eslint安裝已經成功爲止。

3. 關於eslint --init能夠沒必要執行，它主要的做用是在你當前文件夾下生成.eslintrc文件，但同時也會把eslint在你當前文件夾下從新安裝一遍，而且若是你使用包的話，它還會要求必需要有package.json文件，總之會很麻煩。但若是你是第一次使用的話，我建議你能夠執行一下試試，它主要提供3種預安裝包：Google標準、Airbnb標準和Standard標準。這3個標準裏，Google就是Google公司的標準，Airbnb是Airbnb公司的標準，Standard就是一些前端工程師自定的標準。目前來看，公認的最好的標準是Airbnb標準（互聯網發展突飛猛進，永遠是年輕人顛覆老年人，連Google都老了）。它對於ES6要求最嚴格，好比禁止使用var定義變量，必須使用let或者const等等。既然採用最新標準，固然就讓你的代碼一次性向最高標準看齊，免得之後麻煩。

4. npm install eslint-config-airbnb -g
   精彩的重頭戲來了：看到漂亮的airbnb了嗎？咱們就裏就是要安裝Airbnb的標準了。注意-g，仍是全局化安裝。

5. npm install eslint-plugin-jsx-a11y -g
   a11y是accessibility（無障礙環境）的縮寫，從第一個字母a到最後一個字母y，中間一共是11個字母，因此就叫a11y了，相似於i18n表示internationalization（國際化）同樣。JSX主要是React會用到，雖然咱們的項目裏可能並不會用React，可是這個Airbnb標準必需要用到它，因此必須安裝。

6. npm install eslint-plugin-import -g
   同上，Airbnb標準必需。

7. 最後，編寫咱們本身的全局.eslintrc文件：
   vi ~/.eslintrc.json

前面講過了，爲項目服務的.eslintrc.json文件是放在項目文件夾下的，全局的.eslintrc.json文件則放在當前用戶的根目錄下，類Unix系統的當前用戶目錄是~，而Windows系統的話則是相似於C:\Windows\Users\Username這樣的地方。 把如下代碼放入.eslintrc.json，就作好了你的全局ESLint配置文件。

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ]
}

在atom中打開你的某一個js文件，隨便改幾個字符看看效果吧，不出所料的話，應該會出現一堆紅色的錯誤。若是沒有出現，不是你的代碼沒有問題，而是你沒有安裝對。

Airbnb的缺省標準是每行的縮進字符是2個空格鍵，而我通常喜歡使用4個空格鍵做縮進，因此這裏須要一點小小的定製。另外，我缺省會大量使用jQuery，不想讓它老是報告什麼jQuery這個變量未定義等錯誤。因此增長了幾行，最終的.eslintrc.json以下：

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ],
    "env": {
        "jquery": true
    },
    "rules": {
        "indent": ["error", 4]
    }
}

這樣你在任何項目中的js文件都會按照這同一套標準去檢查。好了，如今能夠開始改你的代碼了，解決那一大堆紅叉子吧，我相信必定很多。