Astro セットアップ記録

npm create astro@latest

minamo

先にディレクトリ作っておかなきゃいけない？

mkdir roulette

目標: Astro + React でルーレットアプリをつくる

minamo

動作確認

cd ./roulette
npm run dev

おっけー

minamo

ESLint のセットアップ
Astro 用のプラグインと Prettier を優先するパッケージを追加

パッケージのインストール

npm install --save-dev eslint eslint-plugin-astro @typescript-eslint/parser eslint-plugin-jsx-a11y eslint-config-prettier

設定ファイル追加

npx eslint --init

とりあえず対話で設定したあと、 Astro と Prettier 向けの設定を追加。

.eslint.config.js

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
+import eslintPluginAstro from 'eslint-plugin-astro';
+import eslintConfigPrettier from 'eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  { languageOptions: { globals: globals.browser } },
+  {
+    ignores: [
+      'node_modules/',
+      '.astro/',
+      'dist/',
+      'public/',
+      'package-lock.json',
+      'tailwind.config.mjs',
+      'tsconfig.json',
+      'src/env.d.ts',
+      '*.cjs',
+      '*.mjs',
+    ],
+  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
+  ...eslintPluginAstro.configs['flat/recommended'],
+  ...eslintPluginAstro.configs['flat/jsx-a11y-recommended'],
+  eslintConfigPrettier,
];

minamo

Prettier のセットアップ

npm install --save-dev prettier prettier-plugin-astro prettier-plugin-organize-imports
touch .prettierrc
touch .prettierignore

.prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "plugins": ["prettier-plugin-astro", "prettier-plugin-organize-imports"],
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "printWidth": 360
      }
    },
    {
      "files": ["*.css", "*.scss"],
      "options": {}
    },
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

.prettierignore

node_modules/
.vscode/
.astro/
build/
dist/
out/
public/
package-lock.json
yarn.lock
pnpm-lock.yaml
next.config.js

minamo

VSCode 設定

touch .vscode/settings.json

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.addMissingImports": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "prettier.documentSelectors": ["**/*.astro"],
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "eslint.validate": [
    "html",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

minamo

React をインストール

npx astro add react

minamo

Style は自分で書かずに Tailwind でやろうかな
Tailwind のセットアップ

npx astro add tailwind

Prettier の Tailwind 向けプラグインを追加

 npm i -D prettier-plugin-tailwindcss

特に設定追記はいらないらしい。

minamo

format コマンドの追加
npm-run-all をインストール

npm i -D npm-run-all

package.json に追記

package.json

  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
+    "lint": "run-p lint:*",
+    "lint:eslint": "eslint \"**/*.{js,ts}\"",
+    "lint:prettier": "prettier --check .",
+    "fix": "run-s fix:{eslint,prettier}",
+    "fix:eslint": "npm run lint:eslint -- --fix",
+    "fix:prettier": "prettier --write ."
  },

minamo

Linter, formetter を動かしてみる

npm run lint
npm run fix

React のバージョン指定が必要というエラー

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

config にバージョン指定を追記

eslint.config.js

export default [
  {
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
...

エラー解消。ほかも大丈夫そう。。

minamo

ファイルや画像の圧縮をしてくれる astro-compress を追加

npx astro add astro-compress