リンター設定とコミット時実行の手順

package.jsonの設定

コマンドのショートカットを設定

package.jsonのscriptsに各リンターのショートカットを設定する。

{
  "scripts": {
    // HTMLファイルに対してmarkuplintを実行
    "lint:html": "markuplint \"**/*.html\"",
    // Astroファイルに対してmarkuplint、biome、stylelintを実行
    "lint:astro": "markuplint \"**/*.astro\" && biome check --write ./src && stylelint --fix **/*.{astro}",
    // CSSファイルに対してbiomeとstylelintを実行
    "lint:style": "biome check --write ./src && stylelint --fix **/*.{css,scss,sass}",
    // JavaScript/TypeScriptファイルに対してbiomeを実行
    "lint:script": "biome check --write ./src"
  }
}

これでpnpm run "lint:〇〇"で実行できるようになる。

コミット時にリンターが実行されるようにする

Huskyのインストールと設定

Gitのフックを利用して、コミット前に自動的にリンターを実行できるようにする。¹

# Huskyを開発依存関係としてインストール
pnpm install -D husky

プロジェクト内でhuskyを使うためのコマンドを実行する。プロジェクト直下に.husky/pre-commitが作成される。

# Huskyの初期化（pre-commitフックファイルを作成）
pnpm exec husky init

lint-stagedのインストールと設定

huskyのみだと全てのファイルが対象になるため、lint-stagedでコミット対象のファイルのみ処理を実行するようにする。

# lint-stagedを開発依存関係としてインストール
pnpm install -D lint-staged

package.jsonにコミット前に実行する設定を記述する。

{
  "lint-staged": {
    // Astroファイルに対する処理
    "*.astro": ["markuplint", "biome check --write", "stylelint --fix"],
    // HTMLファイルに対する処理
    "*.html": ["markuplint"],
    // CSS/SCSS/SASSファイルに対する処理
    "*.{css,scss}": ["biome check --write", "stylelint --fix"],
    // TypeScript/JavaScriptファイルに対する処理
    "*.{ts,tsx,js,jsx}": "biome check --write"
  }
}

.husky/pre-commitに書かれていたpnpm testをlint-stagedに変更しておく。

これでコミット前に各リンターが実行されるようになる。