使用 ESLint 自動(dòng)修復(fù)和格式化你的 JavaScript

在分析 JavaScript 程序錯(cuò)誤時(shí)，?ESLint?是可用的最佳 linting 工具之一。ESLint 提供對(duì)大量潛在錯(cuò)誤和樣式違規(guī)的檢查。其可插拔架構(gòu)還使任何人都可以編寫自己的規(guī)則和自定義配置。

我最喜歡的功能之一是能夠使用--?fix?標(biāo)志自動(dòng)修復(fù)。集成自動(dòng)修復(fù)通過在將代碼簽入存儲(chǔ)庫(kù)之前清除錯(cuò)誤并保持代碼清潔來(lái)提供持續(xù)反饋。通過確保貢獻(xiàn)的代碼不需要很少的清理，這可以為你和你的團(tuán)隊(duì)節(jié)省審查代碼的時(shí)間。

每當(dāng)我在編輯器中保存文件時(shí)，我都喜歡立即進(jìn)行清理。它提供了一個(gè)快速的反饋循環(huán)并將固定的更改保留到磁盤。在本文中，我將向你展示如何為一些流行的編輯器做到這一點(diǎn)。

注意：這不是關(guān)于如何使用 ESLint 的教程，我假設(shè)你已經(jīng)熟悉該工具。如果你需要 ESLint入門幫助，請(qǐng)先查看入門指南，然后再繼續(xù)。

安裝 ESLint

你可以為給定項(xiàng)目（內(nèi)部node_modules）在本地安裝 ESLint，也可以為所有項(xiàng)目全局安裝 ESLint 。我們將在本教程中使用本地 ESLint 安裝，但其中大部分也適用于全局安裝。

npm install eslint --dev

VS代碼

對(duì)于 VS Code，安裝ESLint包。然后，要在保存時(shí)格式化，請(qǐng)轉(zhuǎn)到全局設(shè)置并搜索?ESLint?并打開?ESLint: Auto Fix On Save?選項(xiàng)。

Atom

對(duì)于 Atom，安裝?linter-eslint?包和任何依賴項(xiàng)。然后，轉(zhuǎn)到插件設(shè)置并檢查?Fix errors on save?。

Sublime Text

對(duì)于 Sublime，使用包控制，安裝?ESLint-Formatter?包。然后，要在保存時(shí)格式化，請(qǐng)將以下內(nèi)容添加到?Preferences -> Package Settings -> ESLint-Formatter -> Settings -- User?文件中：

{
  "format_on_save": true
}

Vim/NeoVim

對(duì)于 Vim 用戶，?ale?使用您喜歡的打包工具添加包，例如?vim-plug?或?Vundle?到你的$MYVIMRC：

" vim-plug
Plug w0rp/ale
" Vundle
Plugin w0rp/ale

然后，通過設(shè)置以下配置啟用保存時(shí)自動(dòng)修復(fù)：

let g:ale_fixers = {}
let g:ale_fixers.javascript = ['eslint']
let g:ale_fix_on_save = 1

其他編輯

如果你的編輯器未在上面表示，則可能已經(jīng)存在集成或直接使用?eslint?命令來(lái)實(shí)現(xiàn)類似效果的方法。

例如，Vim 插件將運(yùn)行如下內(nèi)容：

eslint -c <path-to-config> --fix <path-to-current-file>

然后，重新加載緩沖區(qū)中的文件。