環境構築

• Nodejs@20.12.2
• Yarn@4.1.1

1. Astro プロジェクトの作成

下記を実行して Astro のプロジェクトを作成できる

この時点ではYarnは 1.22.21 となっている

yarn create astro

※ この時、依存関係はインストールしない選択肢があるのでそれを選ぶ

プロジェクト名は frontend 等にする

以降は frontend として進める

2. node_modules の使用

Yarn@4.1.1だと node_modules を使わなくなるので、frontend直下に.yarnrc.ymlファイルを作成する

nodeLinker: node-modules

3. Yarn のバージョン設定

下記コマンドを実行してバージョンを設定し、依存関係をインストールする

yarn set version berry
yarn install

4. Prettier の設定

下記コマンドを実行して Prettier をインストール

yarn add --dev prettier prettier-plugin-astro

frontend直下に.prettierrc.mjsを作成

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

5. VSCode の設定

settings.jsonに下記を追加する

{
  "prettier.documentSelectors": ["**/*.astro"],
  "typescript.inlayHints.parameterNames.enabled": "all",
  "[astro]": {
    "editor.formatOnSaveMode": "modifications",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

また、Astro用の拡張機能もあるのでインストールする