摘要：是一種用于識別代碼格式錯誤的工具，目的是使代碼更加規范和一致并避免錯誤。但是它本身并沒有代碼檢查的功能，需要借助這樣的特定語言檢查支持。安裝以后修改配置文件。

使用vue-cli來構建Vuejs應用的項目中默認安裝了eslint-loader模塊，eslint-loader模塊是目前相對比較流行的代碼檢測工具，可以檢測書寫的代碼是否符合統一規范，可以在一些比較大型的項目開發中統一開發人員的代碼風格，這也就是為什么代碼縮進有可能導致頁面報錯的原因。

不過若稍不小心的縮進錯誤就導致頁面報錯[如下圖]，那開發調試效率可想而知了，有沒有辦法可以直接在編碼的時候就發現這些小錯誤。答案是肯定的，以sublimeText編輯器為例，結合sublimeLinter插件讓不規范的代碼先知選覺。

ESLint是一種用于識別ECMAScript/JavaScript代碼格式錯誤的工具，目的是使代碼更加規范和一致并避免錯誤。

SublimeLinter 是一個代碼檢查框架插件，功能非常強大，支持各種語言的檢查。但是它本身并沒有代碼檢查的功能，需要借助 ESLint 這樣的特定語言檢查支持。我們只需要使用對應的 SublimeLinter-contrib-eslint 插件即可

全局安裝ESLint

npm install eslint -g

全局安裝babel-eslint。ESLint不支持Babel支持的一些語法節點。

npm install babel-eslint –g

配置sublime

通過package control安裝SublimeLinter，在 Sublime text 中 Ctrl + Shift + p > Package Control:Install Package 里面搜索關鍵詞 linter，選擇”SublimeLinter”，注意別選成了 SummitLinter，另外安裝完成以后退出重啟r"j。若搜不到直接下載包到Sublime Text 3安裝目錄下：

cd "/path/to/Sublime Text 3/Packages"
git clone https://github.com/SublimeLinter/SublimeLinter3.git SublimeLinter

同理，安裝SublimeLinter-contrib-eslint。

安裝以后修改SublimeLinter配置文件。Preferences->PackageSettings->SublimeLinter->Settings-User:

"user": {
      "linters": {
            "eslint": { "@disable":false, "args": [], "excludes": [] }
      },
      ……
      "show_errors_on_save": true,  //為true時，保存文件時，會彈出該文件所有不規范的列表及具體規則名
      ……
      "mark_style": "outline",
      "no_column_highlights_line": false,
      "passive_warnings": false,
      "paths": {
          "linux": [],
          "osx": [],
          "windows": ["C:/Users//AppData/Roaming/npm/eslint.cmd"] //全局安裝ESLint生成的eslint.cmd的目錄
      },
      "python_paths": {
          "linux": [],
          "osx": [],
          "windows": []
      }
}

4.配置ESLint驗證規則（可以到ESLint官網自己配置rule）

到項目根目錄下面使用 eslint 命令交互式的生成配置文件

生成的配置文件如下

在編輯器中已經可以看到代碼格式不規范的地方了！

       "quotes": [0, "single"],                  //建議使用單引號
       "no-inner-declarations": [0, "both"],     //不建議在{}代碼塊內部聲明變量或函數
       "no-extra-boolean-cast":1,               //多余的感嘆號轉布爾型
       "no-extra-semi": 1,                       //多余的分號
       "no-extra-parens": 1,                     //多余的括號
       "no-empty": 1,                            //空代碼塊
       "no-use-before-define": [1, "nofunc"],    //使用前未定義
       "complexity": [1, 10],                    //圈復雜度大于10 警告

       //常見錯誤
       "comma-dangle": [2, "never"],             //定義數組或對象最后多余的逗號
       "no-debugger": 2,                         //debugger 調試代碼未刪除
        "no-constant-condition":2,               //常量作為條件
       "no-dupe-args": 2,                        //參數重復
       "no-dupe-keys": 2,                        //對象屬性重復
       "no-duplicate-case": 2,                   //case重復
       "no-empty-character-class": 2,            //正則無法匹配任何值
       "no-invalid-regexp": 2,                   //無效的正則
       "no-func-assign": 2,                      //函數被賦值
       "valid-typeof": 2,                        //無效的類型判斷
       "no-unreachable": 2,                      //不可能執行到的代碼
       "no-unexpected-multiline": 2,             //行尾缺少分號可能導致一些意外情況
       "no-sparse-arrays": 2,                    //數組中多出逗號
       "no-shadow-restricted-names": 2,          //關鍵詞與命名沖突
        "no-undef": 2,                            //變量未定義
       "no-unused-vars": 2,                      //變量定義后未使用
       "no-cond-assign": 2,                      //條件語句中禁止賦值操作
       "no-native-reassign": 2,                  //禁止覆蓋原生對象

       //代碼風格優化
       "no-else-return": 1,                      //在else代碼塊中return，else是多余的
       "no-multi-spaces": 1,                     //不允許多個空格
       "key-spacing": [1, {"beforeColon": false,"afterColon": true}],//object直接量建議寫法 : 后一個空格前面不留空格
       "block-scoped-var": 2,                    //變量應在外部上下文中聲明，不應在{}代碼塊中
       "consistent-return": 2,                   //函數返回值可能是不同類型
       "accessor-pairs": 2,                      //object getter/setter方法需要成對出現
       "dot-location": [2, "property"],          //換行調用對象方法  點操作符應寫在行首
       "no-lone-blocks": 2,                      //多余的{}嵌套
       "no-empty-label": 2,                      //無用的標記
       "no-extend-native": 2,                    //禁止擴展原生對象
       "no-floating-decimal": 2,                 //浮點型需要寫全 禁止.1 或 2.寫法
       "no-loop-func": 2,                        //禁止在循環體中定義函數
       "no-new-func": 2,                         //禁止new Function(...) 寫法
       "no-self-compare": 2,                     //不允與自己比較作為條件
       "no-sequences": 2,                       //禁止可能導致結果不明確的逗號操作符
       "no-throw-literal": 2,                    //禁止拋出一個直接量 應是Error對象
       "no-return-assign": [2, "always"],        //不允return時有賦值操作
       "no-redeclare": [2, {"builtinGlobals": true}],//不允許重復聲明
       "no-unused-expressions": [2, {"allowShortCircuit":true, "allowTernary": true}],//不執行的表達式
       "no-useless-call": 2,                     //無意義的函數call或apply
       "no-useless-concat": 2,                   //無意義的string concat
       "no-void": 2,                             //禁用void
       "no-with": 2,                             //禁用with
       "space-infix-ops": 2,                     //操作符前后空格
       "valid-jsdoc": [2, {"requireParamDescription": true,"requireReturnDescription": true}],//jsdoc
       "no-warning-comments": [2, { "terms":["todo", "fixme", "any other term"],"location": "anywhere" }],//標記未寫注釋
       "curly": 1                                //if、else、while、for代碼塊用{}包圍

延伸閱讀

# 安裝linter 和 linter-eslint
# 需要配置環境變量（C:UsersAppDataLocalatomin）后才能使用apm命令
# 或者在setting中安裝
$ apm install linter linter-eslint
# 安裝完重啟Atom

此時已經能開到代碼錯誤提示

此時只有.js文件能被校驗，.vue中的

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
})