使用 ESLint 自動修復和格式化你的 JavaScript

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

我最喜歡的功能之一是能夠使用--?fix?標志自動修復。集成自動修復通過在將代碼簽入存儲庫之前清除錯誤并保持代碼清潔來提供持續(xù)反饋。通過確保貢獻的代碼不需要很少的清理，這可以為你和你的團隊節(jié)省審查代碼的時間。

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

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

安裝 ESLint

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

npm install eslint --dev

VS代碼

對于 VS Code，安裝ESLint包。然后，要在保存時格式化，請轉到全局設置并搜索?ESLint?并打開?ESLint: Auto Fix On Save?選項。

Atom

對于 Atom，安裝?linter-eslint?包和任何依賴項。然后，轉到插件設置并檢查?Fix errors on save?。

Sublime Text

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

{
  "format_on_save": true
}

Vim/NeoVim

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

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

然后，通過設置以下配置啟用保存時自動修復：

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

其他編輯

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

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

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

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