編輯器設定

自訂你的程式編輯器來改善 Astro 的開發體驗並啟用新功能。

VS Code 是受網頁開發者歡迎的程式編輯器，由 Microsoft 開發。一些著名的線上編輯器如 GitHub Codespaces 也都是藉由 VS Code 的引擎來驅動的。

即使 Astro 可以在任何程式編輯器運作，但我們建議使用 VS Code 作為 Astro 專案的編輯器。我們有維護一個官方的 Astro VS Code 延伸模組，其能改善開發 Astro 專案的體驗並帶來一些關鍵的功能。

• 在 .astro 檔案中能夠突顯程式語法
• 在 .astro 檔案中顯示 TypeScript 的型別資訊
• VS Code 智能提醒 可帶來程式碼自動完成、提示等

讓我們直接開始，今天就來安裝 Astro VS Code 延伸模組 吧。

Zed 是高效能、可多人協作的程式編輯器，對速度及大型專案做了最佳化。它們的 Astro 延伸模組包括 .astro 檔案的語法突顯、程式碼自動完成、格式化、診斷和移至定義等功能。

Webstorm 是 JavaScript 和 TypeScript 的 IDE，在 2024.2 版本新增對 Astro 語言伺服器的支援。這個更新帶來包括語法突顯、程式碼自動完成和格式化等功能。

你可以透過 JetBrains Marketplace 或在 IDE 的「外掛程式」標籤中搜尋「Astro」來安裝官方外掛程式。你可以在這個地方開啟或關閉語言伺服器：Settings | Languages & Frameworks | TypeScript | Astro。

要知道更多關於 Webstorm 對 Astro 支援的資訊，請查看官方的 Webstorm Astro 文件。

我們厲害的社群也為了其他有名的編輯器維護了數個延伸模組，以下包括：

• Open VSX 的 VS Code 延伸模組 官方 - 官方的 Astro VS Code 延伸模組，對部分編輯器如 Cursor 或 VSCodium 可到 Open VSX registry 取得
• Vim 外掛 社群 - 在 Vim 或 Neovim 中可以提供 Astro 語法突顯、縮排及程式碼摺疊功能
• Neovim LSP 及 TreeSitter 外掛 社群 - 在 Neovim 中可以提供語法突顯、treesitter 解析及程式碼自動完成功能
• Emacs - 請參閱設定 Emacs 和 Eglot 的說明社群來與 Astro 合作
• Sublime Text 的 Astro 語法突顯 社群 - Sublime Text 的 Astro 套件，可在 Sublime Text 套件管理器上獲取
• Nova 延伸模組 社群 - 在 Nova 中可以提供 Astro 的語法突顯以及程式碼自動完成功能

除了在本地端使用編輯器外，Astro 在線上編輯器也能運作良好，以下包括：

• StackBlitz 和 CodeSandbox - 線上編輯器可在你的瀏覽器上執行，且有支援 .astro 檔案的語法突顯。完全不需要安裝以及設定！
• GitHub.dev - 可以讓你將 Astro 的 VS Code 延伸模組以瀏覽器擴充功能的方式安裝，其可取得一些延伸模組的功能，而目前只支援語法突顯。

ESLint 是有名的 JavaScript 及 JSX 的程式碼分析工具。社群維護的外掛可以下載來增加對 Astro 的支援。

詳細資訊可至該專案的使用說明來了解如何為你的專案安裝及設定 ESLint。

Stylelint 是一種流行的 CSS linter。社群維護的 Stylelint 組態 提供 Astro 支援。

安裝說明、編輯器整合和其他資訊可以在專案的 README 文件中找到。

Biome 是為網頁開發打造的全方位程式碼分析與格式化工具。Biome 目前對 .astro 檔案有實驗性的支援，可以用來分析並格式化 .astro 檔案中的 frontmatter。

Prettier 是個熱門的格式化工具，用來格式化 JavaScript、HTML、CSS 等。如果你使用 Astro VS Code 延伸模組，Prettier 程式碼格式化功能已經有納入了。

要在編輯器外部（例如 CLI）或不支援我們的編輯器工具的編輯器內部增加對格式化 .astro 檔案的支援，請安裝官方 Astro Prettier 外掛。

1. 安裝 prettier 和 prettier-plugin-astro。

   • npm
   • pnpm
   • Yarn

   npm install --save-dev --save-exact prettier prettier-plugin-astro

2. 在專案最上層新增 .prettierrc 組態檔（或 .prettierrc.json、.prettierrc.mjs 或其他支援格式），然後在檔案加上 prettier-plugin-astro。

   也在這個檔案手動指定 Astro 檔案用的剖析器。

   {
     "plugins": ["prettier-plugin-astro"],
     "overrides": [
       {
         "files": "*.astro",
         "options": {
           "parser": "astro"
         }
       }
     ]
   }

3. 你可以選擇為專案安裝其他 Prettier 外掛，並加進組態檔。加上的這些外掛可能需要以特定順序列出。舉例來說，如果你使用 Tailwind，prettier-plugin-tailwindcss 必須是 plugins 陣列的最後一個 Prettier 外掛。

   {
     "plugins": [
       "prettier-plugin-astro",
       "prettier-plugin-tailwindcss" // 需要放最後
     ],
     "overrides": [
       {
         "files": "*.astro",
         "options": {
           "parser": "astro"
         }
       }
     ]
   }

4. 在終端機執行以下指令來格式化檔案。

   • npm
   • pnpm
   • Yarn

   npx prettier . --write

參閱 Prettier 外掛的 README 來了解它所支援的選項以及如何在 VS Code 內設定 Prettier 等等資訊。

dprint 是高度可設定的格式化工具，支援 JavaScript、TypeScript、CSS 及更多程式語言。可以使用 markup_fmt plugin 增加對 .astro 檔案的支援。