在 VS Code 上配置 Astro 开发环境

73

最近一直在学习 Astro 这个网站构建框架，单论静态网站的构建，个人觉得比 Next.JS 与 Nuxt 好一点。当然了，工具这东西没有可比性，适合自己的才是最重要的。

因为是刚接触，没想到 Astro 的开发环境在 VS Code 上还花了我点时间才配置好。一开始我以为只需要安装官方提供的 VS Code 插件就可以了，结果发现没那么简单。

以下分享我的个人配置

安装 Astro VS Code 扩展

官方出品，我觉得还是必须安装的，它可以为我们提供以下功能：

• 为 .astro 文件提供语法高亮；
• 为 .astro 文件提供 TypeScript 类型信息。

配置 ESLint

项目上安装插件

pnpm add -D eslint eslint-plugin-astro @typescript-eslint/parser

项目根目录添加 .eslintrc.js

module.exports = {
  // ...
  extends: [
    // ...
    "plugin:astro/recommended",
  ],
  // ...
  overrides: [
    {
      // Define the configuration for `.astro` file.
      files: ["*.astro"],
      // Allows Astro components to be parsed.
      parser: "astro-eslint-parser",
      // Parse the script in `.astro` as TypeScript by adding the following configuration.
      // It's the setting you need when using TypeScript.
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
      },
    },
    // ...
  ],
}

配置 Prettier

项目上安排插件

pnpm add -D prettier prettier-plugin-astro prettier-plugin-tailwindcss

项目根目录添加 .prettierrc

{
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "printWidth": 160,
  "singleQuote": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    },
    {
      "files": ["*.md", "*.mdx", "*.yaml"],
      "options": {
        "tabWidth": 2
      }
    }
  ]
}

项目根目录添加 .prettierignore

# 不进行格式化的目录与文件
.astro
.github
.vscode
.git
dist
pnpm-lock.yaml

VS Code 安装 Prettier – Code formatter

然后在 VS Code 的设置上添加

"prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

注：这里我根据官方介绍的插件去安装与配置，结果无法成功将 .astro 文件上的代码格式化。原本我以为只需在项目上安装了 prettier 与其 Astro 插件后即可，但是实际操作下来，VS Code 上还是需要安装 Prettier – Code formatter 这个插件的。

至此，在 VS Code 上就完成了对 Astro 的初步配置了。