編輯器設定

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

VS Code

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

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

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

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

看看如何在你的 Astro 專案設定 TypeScript (EN)。

Zed

Zed 是開源的程式編輯器，從 0.123.2 版本開始新增對 Astro 的支援。你可以在延伸模組標籤安裝 Astro 延伸模組。這個延伸模組包括語法突顯、程式碼自動完成和格式化等功能。

JetBrains IDE

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

線上編輯器

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

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

其他工具

ESLint

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

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

Stylelint

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

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

Prettier

Prettier 是一種流行的 JavaScript、HTML、CSS 等格式化程式。如果您使用 Astro VS Code 擴充功能或其他編輯器中的 Astro 語言伺服器，包括了 Prettier 程式碼格式化功能。

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

安裝 prettier 和 prettier-plugin-astro。
- npm
- pnpm
- Yarn
終端機視窗
npm install --save-dev prettier prettier-plugin-astro
終端機視窗
pnpm add -D prettier prettier-plugin-astro
終端機視窗
yarn add --dev prettier prettier-plugin-astro

在專案最上層新增 .prettierrc.mjs 設定檔，然後在檔案加上 prettier-plugin-astro。

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

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

在終端機執行 prettier . --write 指令來格式化檔案。
- npm
- pnpm
- Yarn
終端機視窗
npx prettier . --write
終端機視窗
pnpm exec prettier . --write
終端機視窗
yarn prettier . --write

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

貢獻社群贊助