跳转到内容

编辑器配置

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

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

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

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

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

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

Zed 是一个开源代码编辑器,在 0.123.2 版本中增加了对 Astro 的支持。你可以在 IDE 的扩展标签页中安装 Astro 扩展。此扩展包括语法高亮、代码补全和格式化等功能。

Webstorm 是一个 JavaScript 和 TypeScript IDE,从 2024.2 版本开始支持 Astro 语言服务器。此更新带来了语法高亮、代码补全和格式化等功能。

通过 JetBrains Marketplace 安装官方插件,或在 IDE 的插件标签页中搜索 “Astro”。你可以在 Settings | Languages & Frameworks | TypeScript | Astro 中切换语言服务器。

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

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

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

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

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

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

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

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

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

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

  1. 安装 prettierprettier-plugin-astro

    Terminal window
    npm install --save-dev prettier prettier-plugin-astro
  2. 在项目根目录创建一个 .prettierrc.mjs 配置文件,并在其中添加 prettier-plugin-astro

    在这个文件中,还需要手动指定 Astro 文件的解析器。

    .prettierrc.mjs
    /** @type {import("prettier").Config} */
    export default {
    plugins: ['prettier-plugin-astro'],
    overrides: [
    {
    files: '*.astro',
    options: {
    parser: 'astro',
    },
    },
    ],
    };
  3. 运行 prettier . --write 命令来格式化你的文件。

    Terminal window
    npx prettier . --write

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

贡献

你有什么想法?

社区