《史記·秦始皇本紀》:「書同文,車同軌。」秦始皇做專案一定會設定會用 Prettier,讓代碼格式一致。

今天我們要來探討如何使用 Prettier 來進行代碼格式化。Prettier 是一個有名的代碼格式化工具,它可以幫助你保持代碼風格一致,從而提高代碼的可讀性和維護性。我們將介紹如何在 VSCode 中安裝和設定 Prettier,並在 GitHub Actions 中使用它來自動格式化或檢查代碼。

今日範例程式:https://github.com/Edit-Mr/2024-GitHub-Actions/tree/main/5

認識 Prettier

什麼是 Prettier?

Prettier 是一個開源的代碼格式化工具,它可以自動格式化多種語言的代碼,包括 JavaScript、TypeScript、HTML、CSS 等。它可以根據預設的格式化規則或自定義的配置文件來統一代碼風格,讓代碼變得更加一致和可讀。

如何在 VSCode 中安裝 Prettier?

  • 打開 VSCode。
  • 進入延伸模組分頁並搜尋 Prettier
  • 點擊安裝按鈕進行安裝。

設定 Prettier 規則

Prettier 有內建的格式化規則,但你也可以通過配置文件來自定義規則。在專案根目錄下創建一個 .prettierrc 配置文件,並在其中設定格式化規則。例如:

1{
2    "semi": false,
3    "singleQuote": true,
4    "tabWidth": 2,
5    "trailingComma": "es5"
6}

這些設定的意義如下:

  • semi: 是否在語句末尾添加分號(false 表示不添加)。
  • singleQuote: 是否使用單引號代替雙引號(true 表示使用單引號)。
  • tabWidth: 設定縮排寬度為 2 個空格。
  • trailingComma: 在多行結構中是否添加末尾逗號(es5 在 ES5 支持的地方添加逗號)。

使用預設好的規則

Google 提供了自己的 Prettier 配置,你可以使用其標準配置來格式化代碼。首先請你安裝 prettier-config-google 套件:

1npm install --save-dev prettier prettier-config-google

然後,.prettierrc 文件中設置 Google 的規則:

1{
2    "extends": "prettier-config-google"
3}

就是這們簡單。

  1. 如何設定 ignore?

有時候我們不希望 Prettier 格式化某些檔案或目錄。比如說你壓縮完的檔案,或者是編譯後的檔案。這時候,你可以在專案根目錄下創建一個 .prettierignore 文件,並在其中列出要忽略的檔案或目錄。例如:

1node_modules
2build
3*.min.js

之前我在翻譯文檔時有遇到有些開發者會 ingore Markdown 文件,因為有一些範例程式碼有為了文章可讀性有意的排版,這時候就可以使用 .prettierignore 來忽略 Markdown 文件。

現在我們已經了解了 Prettier 的基本用法。但一定會有一些人在 push 之前忘記格式化代碼。因此我們可以使用 GitHub Actions 來自動檢查或是格式化。

實作:自動格式化文件並推送

步驟 1:配置 Prettier

  1. 確保你已經安裝了 Prettier 和相關依賴:

    1npm install --save-dev prettier
  2. 在專案根目錄下創建 .prettierrc 文件並配置格式化規則。例如:

    1{
    2    "semi": true,
    3    "singleQuote": false,
    4    "tabWidth": 4,
    5    "trailingComma": "none"
    6}
  3. 創建 .prettierignore 文件以忽略不需要格式化的檔案:

    1node_modules
    2dist
  4. 接下來我們來寫一些看起來很邪教的 code,建立 data.json 文件,然後我們來置中對齊:

    1{
    2    "name": "John Doe",
    3    "age": 30,
    4    "email": ""
    5}

步驟 2:在 GitHub Actions 中自動格式化文件

  1. 創建一個 GitHub Actions 工作流程文件,例如 .github/workflows/format.yml

  2. 編寫 YAML 配置文件來自動運行 Prettier:

    1name: 格式化代碼
    2
    3on:
    4    push:
    5        branches:
    6            - main # 當推送到 main 分支時觸發
    7
    8jobs:
    9    format:
    10        runs-on: ubuntu-latest
    11
    12        steps:
    13            - name: 檢出代碼
    14              uses: actions/checkout@v3
    15
    16            - name: 安裝依賴套件
    17              run: |
    18                  npm install
    19                  npm install --save-dev prettier
    20
    21            - name: 格式化代碼
    22              run: npx prettier --write .
    23
    24            - name: 提交格式化後的代碼
    25              run: |
    26                  git config --global user.name "GitHub Actions"
    27                  git config --global user.email "actions@github.com"
    28                  git add .
    29                  git commit -m "Apply Prettier formatting"
    30                  git push
    31              env:
    32                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

    YAML 文件解析:

    • on: push: 設定當推送到 main 分支時觸發這個工作流程。
    • actions/checkout@v3: 檢出代碼,確保工作流程在最新的代碼基礎上運行。
    • npm install: 安裝依賴套件。
    • npx prettier --write . 運行 Prettier 來格式化代碼。
    • git commit -m "Apply Prettier formatting" 提交格式化後的代碼。

步驟 3:推送工作流程文件

1git add .github/workflows/format.yml
2git commit -m "Add Prettier format workflow"
3git push origin main

常用技巧與注意事項

  1. Prettier 配置文件:

    • .prettierrc 配置文件可以使用 JSON、YAML 或 JavaScript 格式。
    • .prettierignore 文件的規則類似於 .gitignore 文件。
  2. Prettier 和 ESLint 的整合:

    • 如果你同時使用 ESLint 和 Prettier,建議安裝 eslint-config-prettier 來禁用 ESLint 的格式化規則,避免與 Prettier 衝突。
    • 使用 eslint-plugin-prettier 將 Prettier 的格式檢查集成到 ESLint 中。
  3. 保持規則的一致性:

    • 團隊中應統一使用相同的 Prettier 配置,以確保代碼風格一致。可以將 .prettierrc 文件放在版本控制中,以共享配置。
  4. 自動格式化和提交:

    • 自動格式化可以幫助維持代碼一致性,但請注意在提交格式化後的代碼之前,先進行充分的測試,以確保不會引入錯誤。
  5. 手動格式化和 IDE 支持:

    • 除了使用 GitHub Actions,你也可以在 VSCode 中手動格式化代碼(快捷鍵:Shift + Alt + F),或者在保存時自動格式化(設定 "editor.formatOnSave": true)。

結語

今天我們探討了如何使用 Prettier 進行代碼格式化,包括安裝、配置規則、設定忽略檔案,以及在 GitHub Actions 中自動運行 Prettier。我們探討了如何保持代碼風格的一致性,並分享了一些常用技巧和注意事項。希望這些內容對你的開發工作有所幫助。而明天我們要來探討如何讓 Arcions 來提 PR 而不是直接推送代碼。

毛哥EM

一位喜歡把簡單的事,做得不簡單的高三生。