使用ESLint和sublimeLinter實時檢測前端項目代碼規範性[增Atom配置]

問題描述

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

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

ESLint

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

SublimeLinter

SublimeLinter 是一個代碼檢查框架插件，功能很是強大，支持各類語言的檢查。可是它自己並無代碼檢查的功能，須要藉助 ESLint 這樣的特定語言檢查支持。咱們只須要使用對應的 SublimeLinter-contrib-eslint 插件便可

步驟

1. 全局安裝ESLint

   npm install eslint -g

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

   npm install babel-eslint –g

3. 配置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/<youUserName>/AppData/Roaming/npm/eslint.cmd"] //全局安裝ESLint生成的eslint.cmd的目錄
      },
      "python_paths": {
          "linux": [],
          "osx": [],
          "windows": []
      }
}

4.配置ESLint驗證規則（能夠到ESLint官網本身配置rule）

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

生成的配置文件以下

查看效果

在編輯器中已經能夠看到代碼格式不規範的地方了！

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代碼塊用{}包圍

延伸閱讀

---

在Atom中配置

# 安裝linter 和 linter-eslint
# 須要配置環境變量（C:\Users\<youPCName>\AppData\Local\atom\bin）後才能使用apm命令
# 或者在setting中安裝
$ apm install linter linter-eslint
# 安裝完重啓Atom

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

校驗.vue文件中的 JS 代碼

此時只有.js文件能被校驗，.vue中的<script>代碼塊還不能校驗， 點擊atom菜單欄的File-> Settings -> Packages -> Community Packages -> 找到 linter-eslint 插件，點擊 Settings -> 勾選 Lint HTML Files,能夠看到.vue文件的錯誤提示了。

忽略main.js文件

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