Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

使用 Prettier 與 ESLint 自動對 JavaScript 排版與除錯

近一兩年專案都是使用這套 Linter 與 Formatter 的組合拳,IDE 使用 VS Code 的話歡迎參考看看。

近年來都會在專案中使用 EditorConfig + Prettier + ESLint 來統一程式碼撰寫風格與規則,主要是因為完成這些設定後,可以直接透過 VS Code 的 Format on Save,在儲存時一次執行排版與除錯,讓團隊成員之間的協作更為一致。

在開始之前,請先檢查專案內存在 /.vscode/settings.json 這個檔案,如果沒有的話可以自行新增一個,並且寫入底下的執行規則,其內容為指定執行 Prettier 後再執行 ESLint。

1{
2  "editor.formatOnSave": false,
3  "editor.defaultFormatter": "esbenp.prettier-vscode",
4  "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"]
5}
6

完成設定後,確認你的 VS Code 已經安裝 Prettier - Code formatterESLintFormat Code Action 這三個插件,如果你在其他專案用不到某些插件,你可以將它設定為僅在此工作區使用。