編輯器設定
自訂你的程式編輯器來改善 Astro 的開發體驗並啟用新功能。
VS Code
VS Code 是受網頁開發者歡迎的程式編輯器，其由 Microsoft 所開發。一些著名的線上編輯器如 GitHub Codespaces 以及 Gitpod 也都是藉由 VS Code 的引擎來驅動的。
即使 Astro 可以在任何程式編輯器運作，但我們建議使用 VS Code 作為 Astro 專案的編輯器。我們有維護一個官方的 Astro VS Code 延伸模組，其能改善開發 Astro 專案的體驗並帶來一些關鍵的功能。
- 在
.astro檔案中能夠突顯程式語法 - 在
.astro檔案中顯示 TypeScript 的型別資訊 - VS Code Intellisense 可帶來程式碼自動完成、提示等等。
讓我們直接開始，今天就來安裝 Astro VS Code 延伸模組 吧。
📚 看看如何在你的 Astro 專案設定 TypeScript (EN)。
其他程式編輯器
我們厲害的社群也為了其他有名的編輯器維護了數個延伸模組，以下包括：
- Open VSX 的 VS Code 延伸模組 Official - 官方的 Astro VS Code 延伸模組，對部分開放平台如 VSCodium 可到 Open VSX registry 取得
- Nova 延伸模組 Community - 在 Nova 中可以提供 Astro 的語法突顯以及程式碼自動完成功能
- Vim 外掛 Community - 在 Vim 或 Neovim 中可以提供 Astro 語法突顯、縮排及程式碼摺疊功能
- Neovim LSP 及 TreeSitter 外掛 Community - 在 Neovim 中可以提供語法突顯、treesitter 解析及程式碼自動完成功能
JetBrains IDEs
我們原先樂意支援 Webstorm IDE，不幸的是它並不支援語言伺服器。而且我們沒有資源去撰寫和維護一個不同語言的延伸模組，那與我們既有程式庫全然不同。有興趣可以參訪相關的 JetBrains 支援議題 來贊成該投票、追蹤進度以及從社群找到變通方案。
JetBrains 將來的 Fleet IDE 將會 支援語言伺服器，那樣的話我們現有的工具將可以在上面順利地運作。
線上編輯器
除了在本地端使用編輯器外，Astro 在線上編輯器也能運作良好，以下包括：
- StackBlitz 和 CodeSandbox - 線上編輯器可在你的瀏覽器上執行，且有支援
.astro檔案的語法突顯。完全不需要安裝以及設定！ - GitHub.dev - 可以讓你將 Astro 的 VS Code 延伸模組以瀏覽器擴充功能的方式安裝，其可取得一些延伸模組的功能，而目前只支援語法突顯。
- Gitpod - 雲端上完整的開發環境，可以在 Open VSX 上安裝官方Astro 的 VS Code 延伸模組。
其他工具
ESLint
ESLint 是有名的 JavaScript 及 JSX 的程式碼分析工具。社群維護的外掛可以下載來增加對 Astro 的支援。
詳細資訊可至該專案的使用說明來了解如何為你的專案安裝及設定 ESLint。
Prettier
Prettier 是個有名的格式化工具，支援了 JavaScript, HTML, CSS 等。要加入對 .astro 檔的格式化支援可以使用官方的 Astro Prettier 外掛。
首先下載 Prettier 及外掛來開始：
npm install --save-dev prettier prettier-plugin-astro當你執行 Prettier 時，Prettier 會自動偵測外掛並利用它來處理 .astro 檔：
prettier --write .參閱 Prettier 外掛的 README 來了解它所支援的選項以及如何在 VS Code 內設定 Prettier 等等資訊。
Learn