majiayu000 Setting up Prettier
あらゆるJavaScript/TypeScriptプロジェクトでPrettierを導入・設定するスキル。
いつ使うか
- 新規プロジェクトにPrettierを導入する時
- 既存プロジェクトにコードフォーマッターを追加する時
- コードフォーマット設定が必要な時
- チーム開発でコードスタイルを統一したい時
- ユーザーが「Prettierセットアップ」「フォーマッター設定」について言及した時
セットアップ手順
1. Prettierのインストール
基本パッケージ（必須）：
pnpm add -D prettier
ESLintと併用する場合（推奨）：
pnpm add -D prettier eslint-config-prettier
パッケージの役割:
prettier: コードフォーマッター本体eslint-config-prettier: ESLintとPrettierの競合を防ぐ（ESLint使用時のみ）
2. プロジェクト固有のプラグイン（任意）
プロジェクトに応じて追加：
# Tailwind CSS を使用している場合
pnpm add -D prettier-plugin-tailwindcss
# Svelte を使用している場合
pnpm add -D prettier-plugin-svelte
# その他のプラグインも必要に応じて追加可能
3. 設定ファイルの作成
.prettierrc.json
プロジェクトルートに作成（推奨設定）：
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "always"
}
設定項目の説明：
semi: セミコロンを付ける（true推奨）singleQuote: シングルクォート使用（チーム次第）trailingComma: 末尾カンマ（"es5"推奨）tabWidth: インデント幅（2または4）printWidth: 1行の最大文字数（80-120推奨）
.prettierignore（任意）
フォーマット対象外のファイルを指定：
# dependencies
node_modules
.pnp
.pnp.js
# builds
dist
build
.next
out
# misc
.DS_Store
*.log
.env*
# lock files
pnpm-lock.yaml
package-lock.json
yarn.lock
4. ESLintとの統合（ESLint使用時）
.eslintrc.json を更新して、Prettierとの競合を防ぐ：
既存の設定がある場合：
{
"extends": [
"existing-config",
"prettier" // ← 最後に追加（重要）
]
}
Next.jsの場合の例：
{
"extends": ["next/core-web-vitals", "prettier"]
}
Reactの場合の例：
{
"extends": ["react-app", "prettier"]
}
5. package.json スクリプトの追加
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
使い方:
pnpm run format: 全ファイルをフォーマットpnpm run format:check: フォーマットチェックのみ（CI用）
6. VS Code 設定の推奨
.vscode/settings.json を作成（任意だが推奨）：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
完全なセットアップフロー
新規プロジェクト
# 1. プロジェクト作成（例：Vite）
pnpm create vite my-app
# 2. ディレクトリ移動
cd my-app
# 3. Prettier追加
pnpm add -D prettier eslint-config-prettier
# 4. 設定ファイル作成
# （このスキルが自動で作成）
# 5. フォーマット実行
pnpm run format
既存プロジェクト
# 1. Prettier追加
pnpm add -D prettier eslint-config-prettier
# 2. 設定ファイル追加
# （このスキルが自動で作成）
# 3. ESLint設定更新（使用している場合）
# （このスキルが自動で更新）
# 4. フォーマット実行
pnpm run format
プロジェクトタイプ別の推奨設定
React / Next.js
pnpm add -D prettier eslint-config-prettier
# Tailwind使用時は追加
pnpm add -D prettier-plugin-tailwindcss
Vue / Nuxt
pnpm add -D prettier eslint-config-prettier
Svelte / SvelteKit
pnpm add -D prettier prettier-plugin-svelte eslint-config-prettier
Node.js / Express
pnpm add -D prettier eslint-config-prettier
設定ファイルテンプレート
詳細なテンプレートは templates/ を参照。
チェックリスト
セットアップ完了前に確認：
- Prettierがインストールされているか
-
.prettierrc.jsonが作成されているか -
.prettierignoreが作成されているか（任意） - ESLint使用時は
.eslintrc.jsonにprettierが追加されているか - package.json に format スクリプトが追加されているか
-
pnpm run formatが正常に動作するか -
.vscode/settings.jsonの作成を検討したか
トラブルシューティング
フォーマットが効かない
- VS Code拡張がインストールされているか確認
- Prettier - Code formatter (
esbenp.prettier-vscode)
- Prettier - Code formatter (
- 設定ファイルの構文エラーを確認
.prettierrc.jsonの JSON構文
- ESLintとの競合を確認
eslint-config-prettierがインストールされているか.eslintrc.jsonの extends に"prettier"が最後に追加されているか
特定のファイルがフォーマットされない
.prettierignoreで除外されていないか確認- ファイルの拡張子がPrettierでサポートされているか確認
- プラグインが必要な場合は追加（例：.svelte ファイル）
保存時にフォーマットされない
- VS Codeの設定を確認
"editor.formatOnSave": trueが設定されているか"editor.defaultFormatter"が正しく設定されているか
- ワークスペース設定とユーザー設定の競合確認
Tailwind CSSのクラス順序が整わない
prettier-plugin-tailwindcssがインストールされているか確認.prettierrc.jsonにプラグイン設定を追加（プラグインが自動検出する場合もある）
CI/CD での使用
GitHub Actions 例
- name: Check code formatting
run: pnpm run format:check
Pre-commit Hook（Husky使用時）
pnpm add -D husky lint-staged
# .husky/pre-commit
pnpm lint-staged
// package.json
{
"lint-staged": {
"*.{js,jsx,ts,tsx,json,css,md}": [
"prettier --write"
]
}
}