Published on

VS Code 自定義標籤：讓你的 Next.js 專案更有條理！

你是否曾經在 VS Code 中開啟多個檔案時，感到一頭霧水？

特別是在使用 Next.js 的 app 路由時，那些重複的 page.js 檔案名稱簡直讓人抓狂！

別擔心，VS Code 有一個超酷的功能可以解決這個問題 - 自定義標籤（Custom Labels）。

什麼是自定義標籤？

自定義標籤允許你改變 VS Code 編輯器標籤中顯示的檔案名稱格式。

這意味著你可以讓檔案名稱更具描述性，更容易識別。

對於 Next.js 的 app 路由來說，這簡直是救星！

如何設定？

設定自定義標籤非常簡單。只需要在你的 VS Code 設定檔中加入以下內容：

{
  "workbench.editor.customLabels.enabled": true,
  "workbench.editor.customLabels.patterns": {
    "**/app/**/*.*": "${dirname} -> ${filename}.${extname}"
  }
}

這段設定做了什麼呢？讓我們一起來解析：

  1. "workbench.editor.customLabels.enabled": true: 這行啟用了自定義標籤功能。
  2. "workbench.editor.customLabels.patterns": 這裡定義了自定義標籤的模式。
  3. "**/app/**/*.*": 這是一個 glob 模式，表示它會匹配 app 資料夾下的所有檔案。
  4. "${dirname} -> ${filename}.${extname}": 這定義了新的標籤格式。

實際效果如何？

想像你有以下的檔案結構：

app/
  dashboard/
    page.js
  settings/
    page.js
  profile/
    page.js

在沒有自定義標籤的情況下，你的編輯器標籤可能看起來像這樣：

page.js | page.js | page.js

但是有了自定義標籤後，它們會變成：

dashboard -> page.js | settings -> page.js | profile -> page.js

是不是瞬間清晰了許多？你可以一眼就知道每個 page.js 屬於哪個路由！

下圖就是設定後的實際效果：

在全站搜尋時，也會有一樣效果：

為什麼這很重要？

  1. 提高效率：快速找到你要編輯的檔案，不用再猜測哪個 page.js 是哪個了。
  2. 減少錯誤：清楚的標籤可以幫助你避免在錯誤的檔案中進行修改。
  3. 心情愉悅：相信我，當你的工作環境變得更有組織性時，你的心情也會變好！

結語

VS Code 的自定義標籤功能可能看起來是個小細節，但它確實能大大提升你的開發體驗。

特別是對於使用 Next.js app 路由的開發者來說，這簡直是必備的小技巧！

所以，還在等什麼？立即設定你的 VS Code，讓你的開發環境變得更加清晰有序吧！

誰說寫程式就不能既有效率又有樂趣呢

圖片來源：AI 產生

參考連結