前言
第一次執行 Vue 專案時被瀏覽器中滿屏的 ESLint 報錯給嚇到了，果斷禁用了該功能！
再之後找了個時間認真的瞭解了一下 ESLint，終於有了一些概念。簡單來說，ESLint 就是一個整合了編碼規範和檢測功能的工具。以前說的那些規範（html，css，js 等規範）都是讓你自己主動去學習，去遵守，現在 ESLint 幫助你檢測你的程式碼是否符合你自己設定好的規範。
官網上的說明：
ESLint 最初是由 Nicholas C. Zakas 於2013年6月建立的開源專案。它的目標是提供一個外掛化的 javascript 程式碼檢測工具。
關於 ESLint 的入門學習大家可以檢視這篇文章：利用ESLint檢查程式碼質量，寫得挺易懂的~
ESLint 使用
使用 ESLint 的方式有很多種，參考該 頁面，有編輯器，構建工具，命令列，原始碼管理等。我個人目前的階段適合直接使用編輯器來實時檢測程式碼並提示錯誤，如果使用 webpack 的話，需要儲存修改後才會提示，還有其他種種不便（可能是因為我笨吧）。
ESLint 安裝和配置
一個專案中想要使用 ESLint，首先需要安裝 ESLint。全域性安裝的話就不用每個專案獨立安裝了：
npm install eslint -g複製程式碼如果你首次使用 ESLint，那麼你需要先設定一個配置檔案，你可以在專案根目錄下使用 –init 選項來生成：
eslint --init複製程式碼But, 如果你真的是初次使用的話，肯定對 ESLint 的一切配置都一頭霧水，這裡有一份某大牛使用的 ESLint 配置：.eslintrc.js，原專案的該檔案將註釋刪去了，我給的是我之前將專案 fork 過來的檔案地址，有註釋，如果看不懂註釋，就直接 中文官網 上查。
Ok，有了 全域性的 ESLint 和 當前專案根目錄下的規則配置檔案，我們開始裝外掛並測試功能吧！
程式碼檢查
這個功能需要的外掛為 SublimeLinter 和 SublimeLinter-contrib-eslint。
SublimeLinter 是一個程式碼檢查框架外掛，功能非常強大，支援各種語言的檢查。但是它本身並沒有程式碼檢查的功能，需要藉助 ESLint 這樣的特定語言檢查支援。我們只需要使用對應的 SublimeLinter-contrib-eslint 外掛即可。（參考文章：Sublime Text 3 配置 ESLint 程式碼檢查）
裝完這兩個外掛後，就可以右鍵 SublimeLinter > Lint this view 檢查當前開啟的 JS 檔案了，不過我設定了（右鍵） SublimeLinter > Lint Mode > Background，讓外掛在後臺自動執行程式碼檢查功能，因此當前專案所有開啟的 JS 檔案都冒出了各種紅框框、紅點點……把游標置於錯誤處會在編輯器底部看到相應的錯誤資訊。
那如何讓程式碼檢查在 .vue 檔案中也生效呢？在前面給出的 .eslintrc.js 中，有以下這段程式碼：
// 使用非預設的 babel-eslint 作為程式碼解析器
// 這樣 eslint 就能識別 babel 語法的程式碼
parser: `babel-eslint`,
// required to lint *.vue files
// 用於檢查 *.vue 檔案的程式碼
plugins: [
`html`
]複製程式碼需要安裝外掛才能使其檢查 .vue 檔案的程式碼，你需要全域性安裝 eslint-plugin-html（就是上面程式碼中的 `html` 外掛） 和 babel-eslint（用於識別 babel 語法的程式碼）：
npm install eslint-plugin-html -g
npm install babel-eslint -g複製程式碼babel-eslint
Why Use babel-eslint?
You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet. Otherwise try the default parser (you don`t have to use it just because you are using Babel).
乍一看上面的說明，也許我們並不需要 babel-eslint 外掛的，但是我也不懂，所以就不管了~
到此暫告一段落，有了程式碼的實時檢查功能，你可以隨時修改程式碼並看到反饋，有些報錯程式碼的寫法是你刻意為之的，不影響程式碼執行，你也可以就放在那裡不管它，反正又不影響專案的執行（如果整合到構建工具中使用，說不定就影響了哦~）。
自動修復
ESLint 命令列的
--fix選項用來自動修復規則所報告的問題（目前，大部分是對空白的修復），規則名前面有扳手圖示的說明該問題可被自動修復。（具體請檢視 Rules 頁面）
我測試使用了兩個 Sublime 外掛：ESLintAutoFix 和 ESLint-Formatter。
第一個外掛 ESLintAutoFix 我用了之後，總是會報錯 [WinError 2] 系統找不到指定的檔案，修改了配置項也沒反應，多次嘗試後我放棄了。
第二個外掛 ESLint-Formatter 在 js 檔案上使用是 ok 的，右鍵 ESLint Formatter > Format This File 或者直接使用快捷鍵 ctrl+shift+h。如果快捷鍵衝突了，可以在選單欄找到 Preferences > Package Settings > ESLint Formatter > Key Binding - User，開啟 Key Binding - User 檔案，新增快捷鍵繫結，程式碼如下：
{
"keys": ["ctrl+alt+h"],
"command": "format_eslint"
}複製程式碼vue 檔案自動修復
但是，如果在 .vue 檔案上使用 ESLint-Formatter 外掛，就會出現問題，頁面上會出現重複的 template 部分（反正我使用的話會有問題，都查不到解決方案……）。
由於我最近主要使用 Vue 進行開發，因此這個問題必須解決（當你發現頁面上的紅點點超過你的承受能力範圍的時候，是非常需要一鍵自動修復功能的~）！
考慮過使用 webpack 來修復的，就是檔案儲存修改後自動修復，但是官網上看到：
use webpack to fix code 我就打消念頭了~
經過我百般折騰和搜尋，發現了這個 Fix the code using –fix，並得到了一個解決方案：
選單欄找到 Tools > Build System > New Build System，新建一個 eslint-fix.sublime-build 檔案，檔名隨便起都可以的，然後裡面內容如下：
{
"shell_cmd": "eslint --fix $file"
}複製程式碼或者
{
"cmd": "D:\dev\nvm\npm\eslint.cmd --fix $file"
}複製程式碼（確保全域性安裝 eslint）如果你想要修復的檔案可以通過命令列工具執行命令
eslint --fix成功自動修復的話，我這個方法就能成功。
使用方式為：選擇選單欄 Tools > Build System > eslint-fix 或者 使用快捷鍵 ctrl+b 執行剛剛建立的 build 檔案。（當然選擇快捷鍵方式~）執行成功會將資訊顯示在皮膚（Panel）上，如下圖所示：
如果你有過這種疑問：通過一個快捷鍵對編輯器當前開啟檔案執行一句命令，如何實現？答案就是，按照上面的例子就可以實現！
總結
在編輯器裡實時檢查程式碼可以給你最直接的程式碼編寫反饋，看到哪裡標紅了就會想說犯了什麼錯誤，錯誤改正多了編碼習慣也就會慢慢變好了（同時也能避免你犯一些很傻逼的錯誤）~
反正程式碼檢查工具還是很實用的，可以的話就從今天開始用起來吧！