编辑器配置

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

VS Code 是由 Miscrosoft 构建,受网页开发者欢迎的代码编辑器。VS Code 引擎还对云端代码编辑器像 GitHub CodespacesGitpod 提供了支持。

Astro 可以和任意编辑器一同工作。不过我们推荐在 Astro 项目中使用 VS Code。我们维护着一个官方 Astro VS Code 扩展,为 Astro 项目提供了几个关键特性并改善开发者体验。

  • .astro 文件提供语法高亮
  • .astro 文件提供 TypeScript 类型信息。
  • VS Code 智能提示提供代码补全和提示

开始前需要先安装 Astro VS Code 扩展

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

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

  • Open VSX 上的 VS Code 扩展 官方 - 官方 Astro VS Code 扩展, 同时在 Open VSX registry 上分发,为其他开发平台如 VSCodium 提供支持
  • Nova 扩展社区 - 为 Astro 提供语法高亮,、智能提示、自动补全
  • Neovim LSPTreeSitter 插件 社区 - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全。

我们很想支持 Webstorm IDE。不幸的是,它不支持语言服务器,而且我们没有足够的资源来编写并维护一个与我们现有代码库语言不同的完全独立的扩展。请访问相关的 JetBrains 支持问题,对工单进行投票,跟踪进展,并找到社区解决方法。

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

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

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

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

关于如何为你的项目安装和设置 ESLint 的更多信息,请参见the project’s User Guide

Prettier 是流行的 JavaScript、HTML、CSS等 的格式化器。为了增加对 .astro 文件格式化的支持,请使用官方 Astro Prettier 插件

要开始使用,首先要安装 Prettier 和该插件:

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

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

prettier --write .

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