如何在VSCode和Sublime Text當中開啓eslint檢查？

這個問題，我本身也折騰了好久，在這裏分享給大家。

當前的環境

操做系統: MacOS(雖然我這麼寫，可是對於擴平臺的編輯器來講，沒什麼影響)
node版本：v8.9.4
vue-cli版本：v3.0.1
sublime text版本：v3.1.1 build3176
vscode版本：v1.27.2

重要前提

1. 你的代碼目錄中或者全局已經安裝eslint以及相關的插件
2. eslint的配置已經到位，在CLI中已經能夠打印出錯誤
3. 若是沒有，請參考eslint官方文檔。

PS:若是你的項目目錄是用vue-cli 3.0生成的，那恭喜你，你能夠經過使用vue add @vue/eslint添加eslint須要的插件，而且能夠選擇須要遵循的代碼規範。這部份內容請移步vue-cli 3.0官方文檔，我就不贅述了。

開啓VSCode的eslint

1. 安裝ESLint插件，鑑於安裝及其簡單，若是實在須要，安裝插件的方法參考這裏

macOS下點擊Code->首選項->設置，Windows下點擊文件->首選項->設置

在左側選中ESLint，找到Node Path下方的Edit in setting.json

就會打開全局配置的json文件，設置eslint.nodePath和eslint.validate屬性

"eslint.nodePath": "/usr/local/bin/node",
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
]

這兩個是最關鍵的屬性，validate默認是沒有vue的，因此默認是沒法在.vue單文件組件中看到eslint報錯。

其他的eESLint配置能夠根據自身須要進行設置，這裏就不BB了。

設置完這兩個屬性以後，保存配置，就大功告成了。

打開代碼文件，就會看到紅色波浪線的錯誤提示，鼠標指針hover在波浪線的地方，就會看到具體的報錯了，好比下圖的這個地方，報錯顯示定義了a可是做用於範圍內沒有使用到。

開啓Sublime Text的eslint

安裝插件SublimeLinter和SublimeLinter-eslint，安裝插件的方法在插件的文檔中都有介紹，實在須要，點擊這行前面的插件名稱。

安裝完成後，點擊 Preference->Package settings->SublimeLinter->Settings，macOS須要到Sublime Text菜單中找Preference

會看到打開了一個配置文件，將下方的這段配置粘貼到右邊的User Settings，保存。
設置中添加

{
    "linters": {
        "eslint": {
            "selector": "text.html.vue, source.js - meta.attribute-with-value"
        }
    }
}

打開代碼文件，此時會看到行號左邊的小紅點報錯，hover鼠標上去就會提示具體的報錯信息，搞定！！

寫在後面

上面的配置都是爲了知足我使用vue開發的須要，若是是其餘框架，有可能不適用，祝你幸福。