Back To Articles

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

🧑🏻‍💻 Sean Huang 📅 October 23, 2023

#eslint #prettier
Article Image

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

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

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

{
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"]
}

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