code-quality

コード品質ツールチェーン導入スキル

メタデータ

• トリガー: 「コード品質を設定したい」「ESLint導入」「Prettier設定」「lint-staged」「Husky設定」「コード品質ツールチェーン」
• 前提条件: Node.js プロジェクト（package.json が存在）

概要

ESLint + Prettier + Husky + lint-staged の統合セットアップを自動化するスキル。 プロジェクトの技術スタックを自動検出し、最適な設定を生成する。

---

Phase 1: プロジェクト検出

1.1 技術スタック判定

# package.json の存在確認
cat package.json

# TypeScript 判定
[ -f tsconfig.json ] && echo "TypeScript" || echo "JavaScript"

# フレームワーク判定
node -e "
const pkg = require('./package.json');
const deps = {...(pkg.dependencies||{}), ...(pkg.devDependencies||{})};
if (deps.next) console.log('Next.js');
else if (deps.react) console.log('React');
else if (deps.vue) console.log('Vue');
else if (deps.express) console.log('Express');
else console.log('Node.js');
"

1.2 既存ツール確認

# 既存の lint/format 設定を確認
ls -la .eslintrc* eslint.config.* .prettierrc* .prettierignore biome.json 2>/dev/null
ls -la .husky/ 2>/dev/null

既存設定がある場合はユーザーに確認: 「既存の設定を上書きしますか？それともマージしますか？」

---

Phase 2: パッケージインストール

2.1 ESLint + Prettier（標準構成）

# TypeScript プロジェクトの場合
npm install --save-dev \
  eslint \
  @eslint/js \
  typescript-eslint \
  prettier \
  eslint-config-prettier \
  eslint-plugin-prettier \
  globals

# JavaScript プロジェクトの場合
npm install --save-dev \
  eslint \
  @eslint/js \
  prettier \
  eslint-config-prettier \
  eslint-plugin-prettier \
  globals

2.2 フレームワーク固有プラグイン

# React / Next.js の場合
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

# Vue の場合
npm install --save-dev eslint-plugin-vue

2.3 Husky + lint-staged

npm install --save-dev husky lint-staged
npx husky init

---

Phase 3: 設定ファイル生成

3.1 ESLint 設定（Flat Config — eslint.config.mjs）

TypeScript プロジェクト:

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';
import globals from 'globals';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  prettierConfig,
  {
    languageOptions: {
      globals: {
        ...globals.node,
        ...globals.browser,
      },
    },
    rules: {
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      'no-console': 'warn',
    },
  },
  {
    ignores: ['dist/', 'build/', 'node_modules/', 'coverage/', '*.config.js', '*.config.mjs'],
  }
);