用 Prettier 統一天下 - 讓程式碼格式一致

《史記·秦始皇本紀》:「書同文,車同軌。」秦始皇做專案一定會設定會用 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}
就是這們簡單。
- 如何設定 ignore?
有時候我們不希望 Prettier 格式化某些檔案或目錄。比如說你壓縮完的檔案,或者是編譯後的檔案。這時候,你可以在專案根目錄下創建一個 .prettierignore
文件,並在其中列出要忽略的檔案或目錄。例如:
1node_modules
2build
3*.min.js
之前我在翻譯文檔時有遇到有些開發者會 ingore Markdown 文件,因為有一些範例程式碼有為了文章可讀性有意的排版,這時候就可以使用
.prettierignore
來忽略 Markdown 文件。
現在我們已經了解了 Prettier 的基本用法。但一定會有一些人在 push 之前忘記格式化代碼。因此我們可以使用 GitHub Actions 來自動檢查或是格式化。
實作:自動格式化文件並推送
步驟 1:配置 Prettier
-
確保你已經安裝了 Prettier 和相關依賴:
1npm install --save-dev prettier
-
在專案根目錄下創建
.prettierrc
文件並配置格式化規則。例如:1{ 2 "semi": true, 3 "singleQuote": false, 4 "tabWidth": 4, 5 "trailingComma": "none" 6}
-
創建
.prettierignore
文件以忽略不需要格式化的檔案:1node_modules 2dist
-
接下來我們來寫一些看起來很邪教的 code,建立
data.json
文件,然後我們來置中對齊:1{ 2 "name": "John Doe", 3 "age": 30, 4 "email": "" 5}
步驟 2:在 GitHub Actions 中自動格式化文件
-
創建一個 GitHub Actions 工作流程文件,例如
.github/workflows/format.yml
。 -
編寫 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
常用技巧與注意事項
-
Prettier 配置文件:
.prettierrc
配置文件可以使用 JSON、YAML 或 JavaScript 格式。.prettierignore
文件的規則類似於.gitignore
文件。
-
Prettier 和 ESLint 的整合:
- 如果你同時使用 ESLint 和 Prettier,建議安裝
eslint-config-prettier
來禁用 ESLint 的格式化規則,避免與 Prettier 衝突。 - 使用
eslint-plugin-prettier
將 Prettier 的格式檢查集成到 ESLint 中。
- 如果你同時使用 ESLint 和 Prettier,建議安裝
-
保持規則的一致性:
- 團隊中應統一使用相同的 Prettier 配置,以確保代碼風格一致。可以將
.prettierrc
文件放在版本控制中,以共享配置。
- 團隊中應統一使用相同的 Prettier 配置,以確保代碼風格一致。可以將
-
自動格式化和提交:
- 自動格式化可以幫助維持代碼一致性,但請注意在提交格式化後的代碼之前,先進行充分的測試,以確保不會引入錯誤。
-
手動格式化和 IDE 支持:
- 除了使用 GitHub Actions,你也可以在 VSCode 中手動格式化代碼(快捷鍵:
Shift + Alt + F
),或者在保存時自動格式化(設定"editor.formatOnSave": true
)。
- 除了使用 GitHub Actions,你也可以在 VSCode 中手動格式化代碼(快捷鍵:
結語
今天我們探討了如何使用 Prettier 進行代碼格式化,包括安裝、配置規則、設定忽略檔案,以及在 GitHub Actions 中自動運行 Prettier。我們探討了如何保持代碼風格的一致性,並分享了一些常用技巧和注意事項。希望這些內容對你的開發工作有所幫助。而明天我們要來探討如何讓 Arcions 來提 PR 而不是直接推送代碼。