Sublime Text 中配置 Eslint 代碼檢查和自動修復

前言

第一次運行 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 來修復的，就是文件保存修改後自動修復，可是官網上看到：

我就打消念頭了~

通過我百般折騰和搜索，發現了這個 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）上，以下圖所示：

若是你有過這種疑問：經過一個快捷鍵對編輯器當前打開文件執行一句命令，如何實現？答案就是，按照上面的例子就能夠實現！

總結

在編輯器裏實時檢查代碼能夠給你最直接的代碼編寫反饋，看到哪裏標紅了就會想說犯了什麼錯誤，錯誤改正多了編碼習慣也就會慢慢變好了（同時也能避免你犯一些很傻逼的錯誤）~
反正代碼檢查工具仍是很實用的，能夠的話就從今天開始用起來吧！

參考資料

• Sublime Text 3 配置 ESLint 代碼檢查
• Sublime Text 中配置 ESLint
• ESLint in Vue