跳转到内容
Astro Astro

编辑器配置

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

VS Code

段落标题 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。

JetBrains IDE

段落标题 JetBrains IDE

Astro 的初始支持已经在 WebStorm 2023.1 中推出。你可以通过 JetBrains Marketplace 或在 IDE 的插件选项卡中搜索“Astro”来安装官方插件。此插件包括诸如语法高亮、代码补全和格式化之类的功能，并计划在未来添加更多高级功能。它还可用于所有其他支持 JavaScript 的 JetBrains IDE。

JetBrains 即将推出的 Fleet IDE 将支持语言服务器，我们目前可用的工具将能够毫无障碍地在那里运行。

其他代码编辑器

段落标题 其他代码编辑器

我们令人惊喜的社区为其他受欢迎的编辑器维护了几个扩展，它们包括：

  • 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 协作

云端编辑器

段落标题 云端编辑器

除本地编辑器外，Astro 同样适用于云端托管编辑器，包括：

  • StackBlitz 和 CodeSandbox - 运行在你浏览器中的编辑器，并为 .astro 文件提供支持并内置语法高亮。无需安装或配置！
  • GitHub.dev - 可以将 Astro VS Code 扩展安装为网页 extension 只能使用部分功能，目前仅支持语法高亮。
  • Gitpod - 云上的完整开发环境，可以从 Open VSX 上安装官方 Astro VS Code 扩展。

其他工具

段落标题 其他工具

ESLint

段落标题 ESLint

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

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

Stylelint

段落标题 Stylelint

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

有关安装说明、编辑器集成和其他信息，请参阅该工具的 README 文件。

Prettier

段落标题 Prettier

Prettier 是一个流行的 JavaScript、HTML、CSS 等格式化工具。如果你使用 Astro VS Code 扩展或支持 Astro 语言服务器的其他编辑器，Prettier 格式化功能已经内置。

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

要开始使用，首先要安装 Prettier 和该插件：

Terminal window
npm install --save-dev prettier prettier-plugin-astro

然后 Prettier 会自动检测到这个插件，并在运行时使用它来处理 .astro 文件：

Terminal window
prettier --write .

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