App下載

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

拖延俱樂部 2021-09-15 10:21:10 瀏覽數(shù) (3309)
反饋

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

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

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

修復(fù)清理

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

安裝 ESLint

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

npm install eslint --dev

VS代碼

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

Atom

對于 Atom,安裝?linter-eslint?包和任何依賴項。然后,轉(zhuǎn)到插件設(shè)置并檢查?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

然后,通過設(shè)置以下配置啟用保存時自動修復(fù):

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ū)中的文件。


0 人點贊