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

使用vue-cli來(lái)構(gòu)建Vuejs應(yīng)用的項(xiàng)目中默認(rèn)安裝了eslint-loader模塊，eslint-loader模塊是目前相對(duì)比較流行的代碼檢測(cè)工具，可以檢測(cè)書寫的代碼是否符合統(tǒng)一規(guī)范，可以在一些比較大型的項(xiàng)目開發(fā)中統(tǒng)一開發(fā)人員的代碼風(fēng)格，這也就是為什么代碼縮進(jìn)有可能導(dǎo)致頁(yè)面報(bào)錯(cuò)的原因。

不過(guò)若稍不小心的縮進(jìn)錯(cuò)誤就導(dǎo)致頁(yè)面報(bào)錯(cuò)[如下圖]，那開發(fā)調(diào)試效率可想而知了，有沒(méi)有辦法可以直接在編碼的時(shí)候就發(fā)現(xiàn)這些小錯(cuò)誤。答案是肯定的，以sublimeText編輯器為例，結(jié)合sublimeLinter插件讓不規(guī)范的代碼先知選覺(jué)。

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

SublimeLinter 是一個(gè)代碼檢查框架插件，功能非常強(qiáng)大，支持各種語(yǔ)言的檢查。但是它本身并沒(méi)有代碼檢查的功能，需要借助 ESLint 這樣的特定語(yǔ)言檢查支持。我們只需要使用對(duì)應(yīng)的 SublimeLinter-contrib-eslint 插件即可

全局安裝ESLint

npm install eslint -g

全局安裝babel-eslint。ESLint不支持Babel支持的一些語(yǔ)法節(jié)點(diǎn)。

npm install babel-eslint –g

配置sublime

通過(guò)package control安裝SublimeLinter，在 Sublime text 中 Ctrl + Shift + p > Package Control:Install Package 里面搜索關(guān)鍵詞 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時(shí)，保存文件時(shí)，會(huì)彈出該文件所有不規(guī)范的列表及具體規(guī)則名
      ……
      "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驗(yàn)證規(guī)則（可以到ESLint官網(wǎng)自己配置rule）

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

生成的配置文件如下

在編輯器中已經(jīng)可以看到代碼格式不規(guī)范的地方了！

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

       //常見錯(cuò)誤
       "comma-dangle": [2, "never"],             //定義數(shù)組或?qū)ο笞詈蠖嘤嗟亩禾?hào)
       "no-debugger": 2,                         //debugger 調(diào)試代碼未刪除
        "no-constant-condition":2,               //常量作為條件
       "no-dupe-args": 2,                        //參數(shù)重復(fù)
       "no-dupe-keys": 2,                        //對(duì)象屬性重復(fù)
       "no-duplicate-case": 2,                   //case重復(fù)
       "no-empty-character-class": 2,            //正則無(wú)法匹配任何值
       "no-invalid-regexp": 2,                   //無(wú)效的正則
       "no-func-assign": 2,                      //函數(shù)被賦值
       "valid-typeof": 2,                        //無(wú)效的類型判斷
       "no-unreachable": 2,                      //不可能執(zhí)行到的代碼
       "no-unexpected-multiline": 2,             //行尾缺少分號(hào)可能導(dǎo)致一些意外情況
       "no-sparse-arrays": 2,                    //數(shù)組中多出逗號(hào)
       "no-shadow-restricted-names": 2,          //關(guān)鍵詞與命名沖突
        "no-undef": 2,                            //變量未定義
       "no-unused-vars": 2,                      //變量定義后未使用
       "no-cond-assign": 2,                      //條件語(yǔ)句中禁止賦值操作
       "no-native-reassign": 2,                  //禁止覆蓋原生對(duì)象

       //代碼風(fēng)格優(yōu)化
       "no-else-return": 1,                      //在else代碼塊中return，else是多余的
       "no-multi-spaces": 1,                     //不允許多個(gè)空格
       "key-spacing": [1, {"beforeColon": false,"afterColon": true}],//object直接量建議寫法 : 后一個(gè)空格前面不留空格
       "block-scoped-var": 2,                    //變量應(yīng)在外部上下文中聲明，不應(yīng)在{}代碼塊中
       "consistent-return": 2,                   //函數(shù)返回值可能是不同類型
       "accessor-pairs": 2,                      //object getter/setter方法需要成對(duì)出現(xiàn)
       "dot-location": [2, "property"],          //換行調(diào)用對(duì)象方法  點(diǎn)操作符應(yīng)寫在行首
       "no-lone-blocks": 2,                      //多余的{}嵌套
       "no-empty-label": 2,                      //無(wú)用的標(biāo)記
       "no-extend-native": 2,                    //禁止擴(kuò)展原生對(duì)象
       "no-floating-decimal": 2,                 //浮點(diǎn)型需要寫全 禁止.1 或 2.寫法
       "no-loop-func": 2,                        //禁止在循環(huán)體中定義函數(shù)
       "no-new-func": 2,                         //禁止new Function(...) 寫法
       "no-self-compare": 2,                     //不允與自己比較作為條件
       "no-sequences": 2,                       //禁止可能導(dǎo)致結(jié)果不明確的逗號(hào)操作符
       "no-throw-literal": 2,                    //禁止拋出一個(gè)直接量 應(yīng)是Error對(duì)象
       "no-return-assign": [2, "always"],        //不允return時(shí)有賦值操作
       "no-redeclare": [2, {"builtinGlobals": true}],//不允許重復(fù)聲明
       "no-unused-expressions": [2, {"allowShortCircuit":true, "allowTernary": true}],//不執(zhí)行的表達(dá)式
       "no-useless-call": 2,                     //無(wú)意義的函數(shù)call或apply
       "no-useless-concat": 2,                   //無(wú)意義的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" }],//標(biāo)記未寫注釋
       "curly": 1                                //if、else、while、for代碼塊用{}包圍

延伸閱讀

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

此時(shí)已經(jīng)能開到代碼錯(cuò)誤提示

此時(shí)只有.js文件能被校驗(yàn)，.vue中的

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