Astro × TailwindCSS × React な環境に ESLint と Prettier を導入する

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

// @ts-check

/** @type {import('prettier').Options} */
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};

 {
   "scripts": {
+    "format": "prettier --ignore-path .gitignore --write './**/*.{js,cjs,ts,jsx,tsx,astro,json,html,md}'",
   }
 }

pnpm add -D eslint \
            eslint-config-prettier \
            eslint-plugin-astro \
            eslint-plugin-jsx-a11y \
            @typescript-eslint/eslint-plugin \
            @typescript-eslint/parser

// @ts-check

/** @type {import('eslint').ESLint.ConfigData} */
module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:astro/recommended",
    "prettier",
  ],
  env: {
    browser: true,
    node: true,
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {
    "no-undef": "off",
  },
  ignorePatterns: ["node_modules", "dist"],
  overrides: [
    {
      files: ["*.astro"],
      parser: "astro-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
      },
    },
    {
      files: "*.cjs",
      env: {
        node: true,
      },
      rules: {
        "@typescript-eslint/no-var-requires": "off",
      },
    },
  ],
};

 {
   "scripts": {
+    "check": "astro check && tsc --noEmit",
+    "lint": "eslint --ext '.js,.cjs,.ts,.jsx,.tsx,.astro' .",
+    "lint:fix": "eslint --ext '.js,.cjs,.ts,.jsx,.tsx,.astro' --fix .",
   }
 }

pnpx husky-init && pnpm install

pnpm exec husky set .husky/pre-commit "pnpm exec lint-staged"

pnpm add -D lint-staged 

// @ts-check

/** @type {import('lint-staged').Config} */
module.exports = {
  "*.{js,cjs,ts,jsx,tsx,astro}": ["eslint --fix", "prettier --write"],
  "*.{md,html,json,yaml,yml}": ["prettier --write"],
}

git add -A && git commit -m 'chore: huskyとlint-stagedを導入し、commit時にeslintとprettierを実行させる'

pnpm exec husky set .husky/pre-push "pnpm run check"

git add -A && \
    git commit -m 'chore: push時に`pnpm run check`を実行させる && \
    git push