Skip to content

Prettier & ESLint

Prettier 是什麼？

Prettier 是一個程式碼格式化工具，解決了程式碼排版的爭議。它可以在瞬間將程式碼按照約定好的格式自動排版，提高團隊合作的效率。

ESLint 是什麼？

ESLint 是 JavaScript 的 Linter 工具，用於即時發現程式碼品質問題。它可以檢查語法錯誤、潛在的錯誤和風格問題，確保程式碼符合一定的標準。

如何在 VSCode 中使用 Prettier

  1. 打開 VSCode，進入 Extension。

Prettier Extension

  1. 在搜尋欄位搜尋Prettier，並點擊選項右方的 Install

Prettier Extension

  1. 開啟 Setting，並搜尋Default Formatter

Prettier Extension

Prettier Extension

  1. 找到 Default Formatter 設定並將其更改為Prettier選項

Prettier Extension

  1. 下載.prettierrc，並將其放置於專案的根目錄中。如檔案名稱開頭少了.，請手動重新命名為.prettierrc

Prettier Extension

現在，每次編輯完檔案時，可以右鍵程式碼編輯視窗並選擇Format Document來使用 Prettier 格式化程式碼。

Prettier Extension

如何在 VSCode 使用 ESLint

  1. 在專案根目錄中使用控制台 npm 指令安裝 ESLint：

    Prettier Extension

    npm install eslint -D

  2. 初始化 eslint 環境設定：

    Prettier Extension

    npx eslint --init

  3. 在專案根目錄中使用控制台輸入指令安裝 eslint-config-prettier：

    Prettier Extension

    npm install -D eslint-config-prettier

  4. 下載.eslintrc.js，並將其放置於專案的根目錄中。如檔案名稱開頭少了.，請手動重新命名為.eslintrc.js

    Prettier Extension

  5. 接著請於 VSCode 中的Extensions頁面中搜尋ESLint，並選擇Install

    Prettier Extension

  6. 安裝完成後重啟 VSCode，之後可於OUTPUT頁面中的ESLint選項下檢查是否正常安裝

    Prettier Extension

    或是可以故意輸入一些違反 eslint 原則的程式碼，來藉此確認是否設定成功。

    Prettier Extension

  7. 想查看 ESLint 提示，可以於 VSCode 中打開 Problems 視窗（Ctrl+Shift+M），檢查建議。 現在，VSCode 中已配置 ESLint，將即時提醒你可能的語法錯誤和問題。 Prettier Extension

Prettier 和 ESLint 的整合

Prettier 和 ESLint 都有能力格式化程式碼，可能會導致格式衝突。我們建議將格式化工作交給 Prettier，僅使用 ESLint 的 Code Quality Rule。確保 ESLint 的配置中選擇 To check syntax and find problems。

此方式可讓 Prettier 和 ESLint 合作，確保程式碼風格的一致性，同時提升程式碼品質。

Note

建議可將 VSCode 的 Format On Save 設定啟用，
當每次存檔時，VSCode 都會自動幫你排版一次，十分方便。

課程作業限制的程式碼撰寫風格

本堂課程繳交作業時，程式碼需符合助教所提供的 .prettierrc 及 .eslintrc.js 設定原則，檢查時若發現有警告或是錯誤，將會進行扣分。

設定檔可以從這裡下載：.eslintrc.js | .prettierrc

違反 ESLint 原則時，VS Code 會標註紅色（Error）或黃色（Warning）底線，可以透過滑鼠懸浮於上找到違反原則的提示，也可以點擊超連結查看 ESLint 官方的使用範例。

ESLint Error

Warning

若使用 eslint-disable 之類的註解強行使 ESLint 原則失效時，將視同違反原則進行扣分。
若有擅自修改 ESLint 原則設定時，同樣也將進行扣分，在完成作業時請務必注意！