摘要：它的目標(biāo)是提供一個(gè)插件化的代碼檢測(cè)工具。，有了全局的和當(dāng)前項(xiàng)目根目錄下的規(guī)則配置文件，我們開始裝插件并測(cè)試功能吧代碼檢查這個(gè)功能需要的插件為和。但是它本身并沒有代碼檢查的功能，需要借助這樣的特定語言檢查支持。

第一次運(yùn)行 Vue 項(xiàng)目時(shí)被瀏覽器中滿屏的 ESLint 報(bào)錯(cuò)給嚇到了，果斷禁用了該功能！

再之后找了個(gè)時(shí)間認(rèn)真的了解了一下 ESLint，終于有了一些概念。簡(jiǎn)單來說，ESLint 就是一個(gè)整合了編碼規(guī)范和檢測(cè)功能的工具。以前說的那些規(guī)范（html，css，js 等規(guī)范）都是讓你自己主動(dòng)去學(xué)習(xí)，去遵守，現(xiàn)在 ESLint 幫助你檢測(cè)你的代碼是否符合你自己設(shè)定好的規(guī)范。

官網(wǎng)上的說明：

ESLint 最初是由 Nicholas C. Zakas 于2013年6月創(chuàng)建的開源項(xiàng)目。它的目標(biāo)是提供一個(gè)插件化的 javascript 代碼檢測(cè)工具。

關(guān)于 ESLint 的入門學(xué)習(xí)大家可以查看這篇文章：利用ESLint檢查代碼質(zhì)量，寫得挺易懂的~

使用 ESLint 的方式有很多種，參考該 頁面，有編輯器，構(gòu)建工具，命令行，源代碼管理等。我個(gè)人目前的階段適合直接使用編輯器來實(shí)時(shí)檢測(cè)代碼并提示錯(cuò)誤，如果使用 webpack 的話，需要保存修改后才會(huì)提示，還有其他種種不便（可能是因?yàn)槲冶堪桑?/p> ESLint 安裝和配置

一個(gè)項(xiàng)目中想要使用 ESLint，首先需要安裝 ESLint。全局安裝的話就不用每個(gè)項(xiàng)目獨(dú)立安裝了：

npm install eslint -g

如果你首次使用 ESLint，那么你需要先設(shè)置一個(gè)配置文件，你可以在項(xiàng)目根目錄下使用 --init 選項(xiàng)來生成：

eslint --init

But, 如果你真的是初次使用的話，肯定對(duì) ESLint 的一切配置都一頭霧水，這里有一份某大牛使用的 ESLint 配置：.eslintrc.js，原項(xiàng)目的該文件將注釋刪去了，我給的是我之前將項(xiàng)目 fork 過來的文件地址，有注釋，如果看不懂注釋，就直接 中文官網(wǎng) 上查。

Ok，有了 全局的 ESLint 和 當(dāng)前項(xiàng)目根目錄下的規(guī)則配置文件，我們開始裝插件并測(cè)試功能吧！

這個(gè)功能需要的插件為 Sublime?Linter 和 SublimeLinter-contrib-eslint。

Sublime?Linter 是一個(gè)代碼檢查框架插件，功能非常強(qiáng)大，支持各種語言的檢查。但是它本身并沒有代碼檢查的功能，需要借助 ESLint 這樣的特定語言檢查支持。我們只需要使用對(duì)應(yīng)的 Sublime?Linter-contrib-eslint 插件即可。（參考文章：Sublime Text 3 配置 ESLint 代碼檢查）

裝完這兩個(gè)插件后，就可以右鍵 SublimeLinter > Lint this view 檢查當(dāng)前打開的 JS 文件了，不過我設(shè)置了（右鍵） SublimeLinter > Lint Mode > Background，讓插件在后臺(tái)自動(dòng)執(zhí)行代碼檢查功能，因此當(dāng)前項(xiàng)目所有打開的 JS 文件都冒出了各種紅框框、紅點(diǎn)點(diǎn)……把光標(biāo)置于錯(cuò)誤處會(huì)在編輯器底部看到相應(yīng)的錯(cuò)誤信息。

那如何讓代碼檢查在 .vue 文件中也生效呢？在前面給出的 .eslintrc.js 中，有以下這段代碼：

// 使用非默認(rèn)的 babel-eslint 作為代碼解析器
// 這樣 eslint 就能識(shí)別 babel 語法的代碼
parser: "babel-eslint",
// required to lint *.vue files
// 用于檢查 *.vue 文件的代碼
plugins: [
    "html"
]

需要安裝插件才能使其檢查 .vue 文件的代碼，你需要全局安裝 eslint-plugin-html（就是上面代碼中的 "html" 插件） 和 babel-eslint（用于識(shí)別 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 插件的，但是我也不懂，所以就不管了~

到此暫告一段落，有了代碼的實(shí)時(shí)檢查功能，你可以隨時(shí)修改代碼并看到反饋，有些報(bào)錯(cuò)代碼的寫法是你刻意為之的，不影響代碼運(yùn)行，你也可以就放在那里不管它，反正又不影響項(xiàng)目的運(yùn)行（如果集成到構(gòu)建工具中使用，說不定就影響了哦~）。

ESLint 命令行的 --fix 選項(xiàng)用來自動(dòng)修復(fù)規(guī)則所報(bào)告的問題（目前，大部分是對(duì)空白的修復(fù)），規(guī)則名前面有扳手圖標(biāo)的說明該問題可被自動(dòng)修復(fù)。（具體請(qǐng)查看 Rules 頁面）

我測(cè)試使用了兩個(gè) Sublime 插件：ESLintAutoFix 和 ESLint-Formatter。

第一個(gè)插件 ESLintAutoFix 我用了之后，總是會(huì)報(bào)錯(cuò) [WinError 2] 系統(tǒng)找不到指定的文件，修改了配置項(xiàng)也沒反應(yīng)，多次嘗試后我放棄了。

第二個(gè)插件 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 文件上使用 ESLint-Formatter 插件，就會(huì)出現(xiàn)問題，頁面上會(huì)出現(xiàn)重復(fù)的 template 部分（反正我使用的話會(huì)有問題，都查不到解決方案……）。

由于我最近主要使用 Vue 進(jìn)行開發(fā)，因此這個(gè)問題必須解決（當(dāng)你發(fā)現(xiàn)頁面上的紅點(diǎn)點(diǎn)超過你的承受能力范圍的時(shí)候，是非常需要一鍵自動(dòng)修復(fù)功能的~）！

考慮過使用 webpack 來修復(fù)的，就是文件保存修改后自動(dòng)修復(fù)，但是官網(wǎng)上看到：

我就打消念頭了~

經(jīng)過我百般折騰和搜索，發(fā)現(xiàn)了這個(gè) Fix the code using --fix，并得到了一個(gè)解決方案：
菜單欄找到 Tools > Build System > New Build System，新建一個(gè) eslint-fix.sublime-build 文件，文件名隨便起都可以的，然后里面內(nèi)容如下：

{
    "shell_cmd": "eslint --fix $file" 
}

或者

{
    "cmd": "D:dev
vm
pmeslint.cmd --fix $file" 
}

（確保全局安裝 eslint）如果你想要修復(fù)的文件可以通過命令行工具運(yùn)行命令 eslint --fix 成功自動(dòng)修復(fù)的話，我這個(gè)方法就能成功。

使用方式為：選擇菜單欄 Tools > Build System > eslint-fix 或者 使用快捷鍵 ctrl+b 運(yùn)行剛剛創(chuàng)建的 build 文件。（當(dāng)然選擇快捷鍵方式~）運(yùn)行成功會(huì)將信息顯示在面板（Panel）上，如下圖所示：

如果你有過這種疑問：通過一個(gè)快捷鍵對(duì)編輯器當(dāng)前打開文件執(zhí)行一句命令，如何實(shí)現(xiàn)？答案就是，按照上面的例子就可以實(shí)現(xiàn)！

在編輯器里實(shí)時(shí)檢查代碼可以給你最直接的代碼編寫反饋，看到哪里標(biāo)紅了就會(huì)想說犯了什么錯(cuò)誤，錯(cuò)誤改正多了編碼習(xí)慣也就會(huì)慢慢變好了（同時(shí)也能避免你犯一些很傻逼的錯(cuò)誤）~
反正代碼檢查工具還是很實(shí)用的，可以的話就從今天開始用起來吧！

Sublime Text 3 配置 ESLint 代碼檢查

Sublime Text 中配置 ESLint

ESLint in Vue