Web相關：Sublime如何安裝ESLint插件？

論良好的編碼風格的重要性。

ESLint為何物？簡單的說，它跟jshint類似，都是對JavaScript代碼進行文法的檢測，但是它提供了更好的擴充性與更豐富的檢測機制。

Airbnb JavaScript Style Airbnb的編碼風格在社群内公認是比較好的。

如何安裝

第一步

通過npm安裝ESLint和eslint-config-airbn

npm install --save-dev eslint-config-airbnb eslint-plugin-reac eslint
           

這一步建議最好是在目前項目中安裝， 不要全局安裝，我一開始是全局安裝,報錯了。在github裡也看到了别人遇到了類似的問題，導緻這個問題的原因就是因為全局安裝了該依賴包。

錯誤如下：

Error: Cannot find module 'eslint-config-airbnb'
Referenced from: /Users/adam/projects/webpack-boiler/.eslintrc
    at Function.Module._resolveFilename (module.js::)
    at Function.Module._load (module.js::)
    at Module.require (module.js::)
    at require (module.js::)
    at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js::)
    at /usr/local/lib/node_modules/eslint/lib/config.js::
    at Array.reduceRight (native)
    at loadConfig (/usr/local/lib/node_modules/eslint/lib/config.js::)
    at getLocalConfig (/usr/local/lib/node_modules/eslint/lib/config.js::)
    at Config.getConfig (/usr/local/lib/node_modules/eslint/lib/config.js::)
webpack-boiler|⇒
           

安裝後之後，package.json檔案中會出現這幾個字段：

"devDependencies": {
    "eslint": "^2.5.3",
    "eslint-config-airbnb": "^6.2.0",
    "eslint-plugin-react": "^4.2.3"
  }
           

第二步

添加.eslintrc檔案

目前檔案路徑大緻如下：

project
├node_modules
├public
├web-project
├READDE.md
├server.js
           

大概是長這樣。在根目錄下，添加一個.eslintrc的檔案，内容如下：

{
  "extends": "airbnb/base",
  "rules": {
    // disable requiring trailing commas because it might be nice to revert to
    // being JSON at some point, and I don't want to make big changes now.
    "comma-dangle": 
  }
}
           

這個extends有三種不同的值，eslint根據不同的值，檢測方式也不一樣，具體看這裡

第三步

配置json檔案。

如果我們是在全局環境下安裝ESLint的話，可以在cmd裡輸入eslint，判斷我們是否安裝成功。 目前是在目前項目中安裝的，是以無法直接使用eslint這個指令，我們得在json檔案中配置一下。

在scrip中添加這一行：

"scripts": {
    "start": "node --harmony server.js",
    "lint": "eslint"  //添加這個
  },
           

這個時候已經配置好了，可以通過在cmd中運作 npm run lint filename.js。

比如我我要檢測根目錄下的server.js檔案，可以在指令行中鍵入如下指令：npm run lint server.js

結果如圖：

第四步

在sublime中裝插件。

通過在sublime中安裝插件，可以直接在sublime中看到錯誤提示。

插件安裝參考這裡

第五步

重新開機。

安裝好插件之後，需要重新開機一下。打開一個javascript檔案

如圖

為甚會報這麼多錯誤呢？因為Airbnb的代碼檢測真的很嚴格啊！！！！！！！！！！