前言
第一次運行 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 和 當前項目根目錄下的規則配置文件，我們開始裝插件并測試功能吧！
代碼檢查
這個功能需要的插件為 Sublime?Linter 和 SublimeLinter-contrib-eslint。
Sublime?Linter 是一個代碼檢查框架插件，功能非常強大，支持各種語言的檢查。但是它本身并沒有代碼檢查的功能，需要借助 ESLint 這樣的特定語言檢查支持。我們只需要使用對應的 Sublime?Linter-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）上，如下圖所示：
如果你有過這種疑問：通過一個快捷鍵對編輯器當前打開文件執行一句命令，如何實現？答案就是，按照上面的例子就可以實現！
總結
在編輯器里實時檢查代碼可以給你最直接的代碼編寫反饋，看到哪里標紅了就會想說犯了什么錯誤，錯誤改正多了編碼習慣也就會慢慢變好了（同時也能避免你犯一些很傻逼的錯誤）~
反正代碼檢查工具還是很實用的，可以的話就從今天開始用起來吧！
