编辑器配置

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

VS Code

VS Code 是由 Microsoft 构建，受网页开发者欢迎的代码编辑器。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 扩展，同时在 Open VSX registry 上分发，为其他开发平台如 VSCodium 提供支持
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 扩展安装为网页 extension 只能使用部分功能，目前仅支持语法高亮。
IDX 和 Gitpod - 云上的完整开发环境，可以从 Open VSX 上安装官方 Astro VS Code 扩展。

其他工具

ESLint

ESLint 是流行的 JavaScript 和 JSX 的 linter。为了支持 Astro，需要安装一个由社区维护的插件。

关于如何为你的项目安装和设置 ESLint 的更多信息，请参见此插件的用户指南。

Stylelint

Stylelint 是流行的 CSS 代码检查工具。为了支持 Astro，需要安装一个由社区维护的 Stylelint 配置文件。

有关安装说明、编辑器集成和其他信息，请参阅该工具的 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 --save-exact prettier prettier-plugin-astro
终端窗口
pnpm add --save-dev --save-exact prettier prettier-plugin-astro
终端窗口
yarn add --dev --exact prettier prettier-plugin-astro
在项目根目录创建一个 .prettierrc 配置文件（或是 .prettierrc.json、.prettierrc.mjs, 或是其他支持的格式），并在其中添加 prettier-plugin-astro。

在这个文件中，还需要手动指定 Astro 文件的解析器。
.prettierrc
```
{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro",
      }
    }
  ]
}
```
（可选）为你的项目安装其他 Prettier 插件，并将它们添加至配置文件中。这些附加的插件可能需要以特定的方式排列。例如，如果你正在使用 Tailwind 的话，那么 prettier-plugin-tailwindcss 就必须放置在 Prettier 插件数组的最后一位。
.prettierrc
```
{
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss" // 该项需要在数组的最末尾
  ],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}
```
在你的终端中运行以下的命令来格式化你的文件。
- npm
- pnpm
- Yarn
终端窗口
npx prettier . --write
终端窗口
pnpm exec prettier . --write
终端窗口
yarn exec prettier . --write

参见 Prettier 插件的 README，以获得更多关于其支持的选项、如何在 VS Code 内设置 Prettier 等信息。

贡献社区赞助