编辑器配置

自定义你的代码编辑器，以改善 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 是一个高性能的开源代码编辑器。你可以在 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 上分发，可用于 Cursor 或者 VSCodium 等编辑器。
Vim 插件社区 - 在 Vim 或 Neovim 中为 Astro 提供语法高亮、缩进和代码折叠支持
Neovim LSP 和 TreeSitter 插件社区 - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全。
Emacs - 查看配置 Emacs 和 Eglot 的指南社区 - 与 Astro 协作
适用于 Sublime Text 的 Astro 语法高亮社区 - 适用于 Sublime Text 的 Astro 包可在 Sublime Text 包管理器上获取
Nova 扩展社区 - 为 Astro 提供语法高亮、智能提示、自动补全

云端编辑器

除本地编辑器外，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 文件。

Biome

Biome 是一个面向 Web 的 all-in-one 的 linter 和 formatter。 Biome 目前对 .astro 文件有部分支持，可用于检查和格式化 .astro 文件中的 frontmatter。

Prettier

Prettier 是一个流行的 JavaScript、HTML、CSS 等格式化工具。如果你使用 Astro VS Code 扩展，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 等信息。

dprint

dprint 是一个高度可配置的代码格式化工具，支持多种语言，包括 JavaScript、TypeScript、CSS 等。可以使用 markup_fmt 插件为 .astro 文件添加支持。

贡献社区赞助