Configure Prettier for any JavaScript/TypeScript project with recommended settings. Use when setting up code formatting, adding Prettier to existing projects, or when the user mentions Prettier setup or formatter 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"
]
}
}
npx skills add camoneart/Setting up Prettier下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer