编辑器设置

自定义你的代码编辑器以改善 Astro 的开发体验并解锁新功能。

VS Code

VS Code 是一款由微软开发的、深受 Web 开发者欢迎的代码编辑器。VS Code 的引擎也为 GitHub Codespaces 和 Gitpod 等流行的浏览器内代码编辑器提供支持。

Astro 适用于任何代码编辑器。然而，我们推荐使用 VS Code 来开发 Astro 项目。我们维护了一个官方的 Astro VS Code 扩展，它为 Astro 项目解锁了几个关键功能并改善了开发体验。

• 为 .astro 文件提供语法高亮。
• 为 .astro 文件提供 TypeScript 类型信息。
• 为代码补全、提示等功能提供 VS Code 智能感知。

要开始使用，请立即安装 Astro VS Code 扩展。

查看如何在你的 Astro 项目中设置 TypeScript。

Zed

Zed 是一款开源代码编辑器，自 0.123.2 版本起添加了对 Astro 的支持。你可以在 IDE 的扩展标签页中安装 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 注册表上使用
• Nova 扩展 社区 - 为 Nova 内的 Astro 提供语法高亮和代码补全功能
• Vim 插件 社区 - 为 Vim 或 Neovim 内的 Astro 提供语法高亮、缩进和代码折叠支持
• Neovim LSP 和 TreeSitter 插件 社区 - 为 Neovim 内的 Astro 提供语法高亮、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 linter。对于 Astro 支持，可以安装一个社区维护的插件。

有关如何为你的项目安装和设置 ESLint 的更多信息，请参阅该项目的用户指南。

Stylelint

Stylelint 是一款流行的 CSS linter。一个社区维护的 Stylelint 配置提供了对 Astro 的支持。

安装说明、编辑器集成和其他信息可以在项目的 README 文件中找到。

Prettier

Prettier 是一款流行的代码格式化工具，适用于 JavaScript、HTML、CSS 等。如果你正在使用 Astro VS Code 扩展或在其他编辑器中使用 Astro 语言服务器，那么就已经包含了 Prettier 的代码格式化功能。

要在编辑器外部（例如 CLI）或在不支持我们编辑器工具的编辑器内添加对 .astro 文件的格式化支持，请安装官方的 Astro Prettier 插件。

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

   npm

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

   pnpm

   pnpm add --save-dev --save-exact prettier prettier-plugin-astro

   Yarn

   yarn add --dev --exact prettier prettier-plugin-astro

2. 在你的项目根目录下创建一个 .prettierrc 配置文件（或 .prettierrc.json、.prettierrc.mjs 或其他支持的格式），并将 prettier-plugin-astro 添加进去。

   在此文件中，还需要手动为 Astro 文件指定解析器。

   .prettierrc

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

3. 或者，为你的项目安装其他 Prettier 插件，并将它们添加到配置文件中。这些额外的插件可能需要按特定顺序列出。例如，如果你使用 Tailwind，prettier-plugin-tailwindcss 必须是插件数组中的最后一个 Prettier 插件。

   .prettierrc

   {
     "plugins": [
       "prettier-plugin-astro",
       "prettier-plugin-tailwindcss" // needs to be last
     ],
     "overrides": [
       {
         "files": "*.astro",
         "options": {
           "parser": "astro"
         }
       }
     ]
   }

4. 在终端中运行以下命令来格式化你的文件。

   npm

   npx prettier . --write

   pnpm

   pnpm exec prettier . --write

   Yarn

   yarn exec prettier . --write

有关其支持的选项、如何在 VS Code 中设置 Prettier 等更多信息，请参阅 Prettier 插件的 README。