编辑器设置

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

¥Customize your code editor to improve the Astro developer experience and unlock new features.

VS Code

VS Code 是由 Microsoft 打造的一款深受 Web 开发者欢迎的代码编辑器。VS Code 引擎还支持流行的浏览器内代码编辑器，例如 GitHub 代码空间和 Gitpod。

¥VS Code is a popular code editor for web developers, built by Microsoft. The VS Code engine also powers popular in-browser code editors like GitHub Codespaces and Gitpod.

Astro 可与任何代码编辑器配合使用。然而，VS Code 是我们推荐的 Astro 项目编辑器。我们维护官方 Astro VS Code 扩展，为 Astro 项目解锁多个关键功能和开发者体验改进。

¥Astro works with any code editor. However, VS Code is our recommended editor for Astro projects. We maintain an official Astro VS Code Extension that unlocks several key features and developer experience improvements for Astro projects.

.astro 文件的语法高亮。
.astro 文件的 TypeScript 类型信息。
VS Code 智能感知用于代码完成、提示等。

首先，立即安装 Astro VS Code 扩展。

¥To get started, install the Astro VS Code Extension today.

See how to set up TypeScript in your Astro project.

Zed

Zed 是一个开源代码编辑器，在 0.123.2 版本中添加了对 Astro 的支持。你可以在 IDE 的扩展选项卡中安装 Astro 扩展。此扩展包括语法高亮、代码完成和格式化等功能。

¥Zed is an open-source code editor that added support for Astro in version 0.123.2. You can install the Astro extension in the IDE’s Extensions tab. This extension includes features like syntax highlighting, code completion, and formatting.

JetBrains IDE

Webstorm 是一个 JavaScript 和 TypeScript IDE，在版本 2024.2 中添加了对 Astro 语言服务器的支持。此更新带来了语法高亮、代码完成和格式化等功能。

¥Webstorm is a JavaScript and TypeScript IDE that added support for the Astro Language Server in version 2024.2. This update brings features like syntax highlighting, code completion, and formatting.

通过 JetBrains 市场安装官方插件或在 IDE 的插件选项卡中搜索 “Astro”。你可以在 Settings | Languages & Frameworks | TypeScript | Astro 中切换语言服务器。

¥Install the official plugin through JetBrains Marketplace or by searching for “Astro” in the IDE’s Plugins tab. You can toggle the language server in Settings | Languages & Frameworks | TypeScript | Astro.

有关 Webstorm 中 Astro 支持的更多信息，请查看官方 Webstorm Astro 文档。

¥For more information on Astro support in Webstorm, check out the official Webstorm Astro Documentation.

其他代码编辑器

¥Other Code Editors

我们令人惊叹的社区为其他流行编辑器维护了多个扩展，包括：

¥Our amazing community maintains several extensions for other popular editors, including:

Open VSX 上的 VS Code 扩展 Official - 官方 Astro VS Code 扩展，可在 Open VSX 注册表中获取，适用于 VSCodium 等开放平台
新星扩展 Community - 为 Nova 内部的 Astro 提供语法高亮和代码完成
Vim 插件 Community - 为 Vim 或 Neovim 内部的 Astro 提供语法高亮、缩进和代码折叠支持
Neovim LSP 和 TreeSitter 插件 Community - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全
Emacs - 请参阅配置 Emacs 和 Eglot Community 与 Astro 配合使用的说明
Sublime Text 的 Astro 语法高亮显示 Community - Sublime Text 的 Astro 包可在 Sublime Text 包管理器上找到。

浏览器内编辑器

¥In-Browser Editors

除了本地编辑器之外，Astro 还可以在浏览器内托管的编辑器上运行良好，包括：

¥In addition to local editors, Astro also runs well on in-browser hosted editors, including:

StackBlitz 和 CodeSandbox - 在浏览器中运行的在线编辑器，具有内置语法高亮对 .astro 文件的支持。无需安装或配置！
GitHub.dev - 允许你将 Astro VS Code 扩展安装为网络扩展，这使你只能访问部分完整的扩展功能。目前仅支持语法高亮。
Gitpod - 云中的完整开发环境，可以从 Open VSX 安装官方 Astro VS Code 扩展。

其他工具

¥Other tools

ESLint

ESLint 是 JavaScript 和 JSX 的流行 linter。为了支持 Astro，可以安装社区维护的插件。

¥ESLint is a popular linter for JavaScript and JSX. For Astro support, a community maintained plugin can be installed.

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

¥See the project’s User Guide for more information on how to install and set up ESLint for your project.

Stylelint

Stylelint 是流行的 CSS linter。社区维护的 Stylelint 配置提供 Astro 支持。

¥Stylelint is a popular linter for CSS. A community maintained Stylelint configuration provides Astro support.

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

¥Installation instructions, editor integration, and additional information can be found in the project’s README.

Prettier

Prettier 是 JavaScript、HTML、CSS 等流行的格式化程序。如果你使用的是 Astro VS Code 扩展或另一个编辑器中的 Astro 语言服务器，则包含使用 Prettier 进行代码格式化。

¥Prettier is a popular formatter for JavaScript, HTML, CSS, and more. If you’re using the Astro VS Code Extension or the Astro language server within another editor, code formatting with Prettier is included.

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

¥To add support for formatting .astro files outside of the editor (e.g. CLI) or inside editors that don’t support our editor tooling, install the official Astro Prettier plugin.

Install prettier and prettier-plugin-astro.
- npm
- pnpm
- Yarn
Terminal window
npm install --save-dev prettier prettier-plugin-astro
Terminal window
pnpm add -D prettier prettier-plugin-astro
Terminal window
yarn add --dev prettier prettier-plugin-astro

Create a .prettierrc.mjs config file at the root of your project and add prettier-plugin-astro to it.

In this file, also manually specify the parser for Astro files.

/** @type {import("prettier").Config} */
export default {
  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

Run the command prettier . --write in the terminal to format your files.
- npm
- pnpm
- Yarn
Terminal window
npx prettier . --write
Terminal window
pnpm exec prettier . --write
Terminal window
yarn prettier . --write

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

¥See the Prettier plugin’s README for more information about its supported options, how to set up Prettier inside VS Code, and more.