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"
https://typicode.github.io/husky/getting-started.html#automatic-recommended
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を実行させる'
