Astro セットアップ記録

npm create astro@latest

mkdir roulette

cd ./roulette
npm run dev

npm install --save-dev eslint eslint-plugin-astro
npm install --save-dev @typescript-eslint/parser  

touch eslint.config.js 

import eslintPluginAstro from "eslint-plugin-astro";
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ...eslintPluginAstro.configs.recommended,
  {
    rules: {
      // override/add rules settings here, such as:
      // "astro/no-set-html-directive": "error"
    },
  },
];

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

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

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

touch .vscode/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"
  ]
}

npx astro add react