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

yunhao 發布于2019-08-21 16:57 / 1062人閱讀

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

前言

第一次運行 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
vm
pmeslint.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

GPU云服務器云服務器 sublime-text sublime-text-3 sublime-text2-標簽高亮 i節點_檢查和修復linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88953.html

sublime text3 eslint 安裝教程

摘要：但是它本身并沒有代碼檢查的功能，需要借助這樣的特定語言檢查支持。配置完成如果你安裝的沒有錯誤的話，那么大概就是這個樣子的編輯器會有一個高亮的提示您符不符合的代碼風格。準備工作： sublime text3 編輯器 sublime text3安裝走起 node環境得支持 node安裝走起 ESlint規范 ESlint配置詳細說明開始安裝以上都安裝完畢的時候，那么進行安裝...

Martin91 2019-08-22 16:08 評論0 收藏0
Vue項目中使用eslint的筆錄，編輯器采用sublime3

摘要：一前言本文主要針對編輯器是的項目進行代碼規范。因此對進行語法檢查的工具應運而生，目前使用最為廣泛。這篇將講解如何將集成到我們的項目中。七總結在項目上使用實際上還算相對簡單的，但是對于什么都是半生半熟的知識技能的人來說還是花了點時間。一、前言本文主要針對編輯器是sublime的vue項目進行eslint代碼規范。 Javascript 是一門弱類型語言，所以語法檢查變得尤為重要。雖然...

劉明 2019-08-22 18:03 評論0 收藏0
使用ESLint和sublimeLinter實時檢測前端項目代碼規范性[增Atom配置]

摘要：是一種用于識別代碼格式錯誤的工具，目的是使代碼更加規范和一致并避免錯誤。但是它本身并沒有代碼檢查的功能，需要借助這樣的特定語言檢查支持。安裝以后修改配置文件。問題描述使用vue-cli來構建Vuejs應用的項目中默認安裝了eslint-loader模塊，eslint-loader模塊是目前相對比較流行的代碼檢測工具，可以檢測書寫的代碼是否符合統一規范，可以在一些比較大型的項目開發中...

lei___ 2019-08-20 18:00 評論0 收藏0
sublime自動修復eslint報錯

摘要：安裝全局安裝全局安裝插件在需要用到的項目生成文件在編輯器上安裝插件菜單欄找到，新建一個文件，然后里面內容如下或者用快捷鍵運行剛剛創建的文件 1.安裝全局安裝eslint npm install eslint -g 全局安裝eslint插件 npm install eslint-plugin-html -g npm install babel-eslint -g 在需要用到eslint的...

svtter 2019-08-23 12:24 評論0 收藏0
前端開發 VS Code 上手使用

摘要：如果想配置開發工具面向前端及開發人員的配置如果想配置開發工具配置及使用技巧所謂網紅編輯器，我覺得比來的更爽，因為的所有操作和插件，對于來說也就是一個插件就能無縫兼容。作為一個前端開發，開箱即用的代碼編輯高亮提示都十分友好。如果想配置 sublime 開發工具 => 面向web前端及node開發人員的vim配置如果想配置 vim 開發工具 => sublime配置及使用技巧所謂網紅...

Ocean 2019-08-26 13:34 評論0 收藏0