跳到內容

編輯器設定

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

VS Code

標題為 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。

JetBrains IDE

標題為 JetBrains IDE

WebStorm 2023.1 首次支持 Astro。 您可以透過 JetBrains Marketplace 或在 IDE 的「外掛程式」標籤中搜尋「Astro」來安裝官方外掛程式。 該外掛程式包括語法突顯、程式碼补全和格式化等功能，並計劃在未來添加更多高級功能。 它也適用於所有其他支持 JavaScript 的 JetBrains IDE。

JetBrains 即將推出的 Fleet IDE 包括語言伺服器支持，並將能夠使用官方 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 延伸模組以瀏覽器擴充功能的方式安裝，其可取得一些延伸模組的功能，而目前只支援語法突顯。
  • Gitpod - 雲端上完整的開發環境，可以在 Open VSX 上安裝官方Astro 的 VS Code 延伸模組。

其他工具

標題為 其他工具

ESLint

標題為 ESLint

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

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

Stylelint

標題為 Stylelint

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

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

Prettier

標題為 Prettier

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

要在編輯器外部（例如CLI）或不支持我們的編輯器工具的編輯器內部添加對格式化 .astro 文件的支持，請安裝官方 Astro Prettier 插件。

首先下載 Prettier 及外掛來開始：

Terminal window
npm install --save-dev prettier prettier-plugin-astro

當你執行 Prettier 時，Prettier 會自動偵測外掛並利用它來處理 .astro 檔：

Terminal window
prettier --write .

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