Configure Prettier for any JavaScript/TypeScript project with recommended settings.
あらゆるJavaScript/TypeScriptプロジェクトでPrettierを導入・設定するスキル。
基本パッケージ（必須）：
pnpm add -D prettier
ESLintと併用する場合（推奨）：
pnpm add -D prettier eslint-config-prettier
パッケージの役割:
prettier: コードフォーマッター本体eslint-config-prettier: ESLintとPrettierの競合を防ぐ（ESLint使用時のみ）プロジェクトに応じて追加：
# Tailwind CSS を使用している場合
pnpm add -D prettier-plugin-tailwindcss
# Svelte を使用している場合
pnpm add -D prettier-plugin-svelte
# その他のプラグインも必要に応じて追加可能
.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
.eslintrc.json を更新して、Prettierとの競合を防ぐ：
既存の設定がある場合：
{
"extends": [
"existing-config",
"prettier" // ← 最後に追加（重要）
]
}
Next.jsの場合の例：
{
"extends": ["next/core-web-vitals", "prettier"]
}
Reactの場合の例：
{
"extends": ["react-app", "prettier"]
}
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
使い方:
pnpm run format: 全ファイルをフォーマットpnpm run format:check: フォーマットチェックのみ（CI用）.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
pnpm add -D prettier eslint-config-prettier
# Tailwind使用時は追加
pnpm add -D prettier-plugin-tailwindcss
pnpm add -D prettier eslint-config-prettier
pnpm add -D prettier prettier-plugin-svelte eslint-config-prettier
pnpm add -D prettier eslint-config-prettier
詳細なテンプレートは templates/ を参照。
セットアップ完了前に確認：
.prettierrc.json が作成されているか.prettierignore が作成されているか（任意）.eslintrc.json に prettier が追加されているかpnpm run format が正常に動作するか.vscode/settings.json の作成を検討したかesbenp.prettier-vscode).prettierrc.json の JSON構文eslint-config-prettier がインストールされているか.eslintrc.json の extends に "prettier" が最後に追加されているか.prettierignore で除外されていないか確認"editor.formatOnSave": true が設定されているか"editor.defaultFormatter" が正しく設定されているかprettier-plugin-tailwindcss がインストールされているか確認.prettierrc.json にプラグイン設定を追加（プラグインが自動検出する場合もある）- name: Check code formatting
run: pnpm run format:check
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"
]
}
}