Astro × TailwindCSS × React プロジェクトのセットアップ

Prettier の導入

パッケージをインストールする：

npm install --save-dev prettier prettier-plugin-astro prettier-plugin-tailwindcss

設定ファイルを作成する：

.prettierrc.cjs

// @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",
      },
    },
  ],
};

package.json

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

ESLint の導入

パッケージをインストールする：

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

設定ファイルを作成する：

.eslintrc.cjs

// @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",
      },
    },
  ],
};

package.json

{
  "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 .",
  }
}

lint-staged, husky の導入

1. husky の導入

husky をインストールする。

npm exec husky-init && npm install

pre-commit の設定を行う。

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

404 | Husky

Not Found

typicode.github.io

2. lint-staged の導入

lint-staged をインストールする。

npm install --save-dev lint-staged

lint-staged の設定を書く。

.lintstagedrc.cjs

// @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"],
}

3. 動作確認

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

参考文献

GitHub - lint-staged/lint-staged: 🚫💩 — Run linters on git staged files

🚫💩 — Run linters on git staged files. Contribute to lint-staged/lint-staged development by creating an account on GitHub.

github.com

GitHub - lint-staged/lint-staged: 🚫💩 — Run linters on git staged files

GitHub - typicode/husky: Git hooks made easy 🐶 woof!

Git hooks made easy 🐶 woof! Contribute to typicode/husky development by creating an account on GitHub.

github.com

GitHub - typicode/husky: Git hooks made easy 🐶 woof!