VSCodeのsettings.jsonでPrettier設定を完璧にする！コード整形の決定版ガイド

プログラミング・IT

「チーム開発でコードフォーマットが統一されていない」 「保存するたびに勝手に改行されてイライラ」 「Prettierの設定がうまく動かない」

コードフォーマッターの設定、意外と難しいですよね。

でも大丈夫！この記事を読めば、VSCodeとPrettierの設定を完璧にマスターできます。settings.jsonの書き方から、プロジェクトごとの設定分け、トラブル解決まで、全部わかりやすく説明します。

これで、きれいなコードを自動で保てるようになりますよ！

スポンサーリンク

Prettierって何？なぜ必要なの？

https://www.choge-blog.com/wp-admin/post.php?post=65718&action=edit
www.choge-blog.com

コード整形の救世主

Prettierは、JavaScript、TypeScript、CSS、HTMLなど様々な言語に対応した自動コード整形ツールです。

【Prettierがやってくれること】

  • インデントを統一
  • セミコロンの有無を統一
  • クォート（’と”）を統一
  • 改行位置を最適化
  • 余分な空白を削除
  • カンマの位置を調整

手動でやったら大変な作業を、保存時に一瞬でやってくれます！

Prettierを使うメリット

【個人開発でも】

  • コードが読みやすくなる
  • 細かいフォーマットを気にしなくていい
  • エラーを見つけやすくなる

【チーム開発なら必須】

  • コードレビューが本質に集中できる
  • 誰が書いても同じスタイル
  • Gitの差分がきれいになる

基本セットアップ：5分で完了！

ステップ1：Prettierをインストール

【VSCode拡張機能をインストール】

  1. VSCodeを開く
  2. 左サイドバーの拡張機能アイコンをクリック（Ctrl+Shift+X）
  3. 「Prettier」で検索
  4. 「Prettier – Code formatter」をインストール
  5. VSCodeを再起動（念のため）

【プロジェクトにもインストール（推奨）】

# npmの場合
npm install --save-dev prettier

# yarnの場合
yarn add --dev prettier

# pnpmの場合
pnpm add -D prettier

両方インストールすることで、チーム全員が同じ設定を共有できます。

ステップ2：VSCodeの設定を開く

settings.jsonを開く3つの方法：

方法1：コマンドパレットから

  1. Ctrl+Shift+P（Mac: Cmd+Shift+P）
  2. 「settings json」と入力
  3. 「Preferences: Open User Settings (JSON)」を選択

方法2：設定画面から

  1. Ctrl+,（Mac: Cmd+,）で設定を開く
  2. 右上の「{}」アイコンをクリック

方法3：直接ファイルを開く

  • Windows: %APPDATA%\Code\User\settings.json
  • Mac: ~/Library/Application Support/Code/User/settings.json
  • Linux: ~/.config/Code/User/settings.json

settings.json 基本設定：これだけは入れておこう

最小限の設定

{
  // Prettierをデフォルトのフォーマッターに設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // 保存時に自動フォーマット
  "editor.formatOnSave": true,
  
  // ペースト時にも自動フォーマット（お好みで）
  "editor.formatOnPaste": true
}

これだけで基本的な自動フォーマットが動きます！

言語別の設定

特定の言語だけPrettierを使いたい場合：

{
  // JavaScript/TypeScriptだけPrettierを使う
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  
  // JSONとCSSも追加
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  
  // HTMLは別のフォーマッターを使いたい場合
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnSave": true
  }
}

Prettierの詳細設定：カスタマイズしよう

settings.jsonでPrettier設定

VSCodeのsettings.jsonに直接Prettier設定を書く方法：

{
  // Prettier設定
  "prettier.printWidth": 100,           // 1行の最大文字数
  "prettier.tabWidth": 2,                // インデントのスペース数
  "prettier.useTabs": false,             // タブ文字を使うか
  "prettier.semi": true,                 // セミコロンを付けるか
  "prettier.singleQuote": true,          // シングルクォートを使うか
  "prettier.quoteProps": "as-needed",    // オブジェクトのキーのクォート
  "prettier.jsxSingleQuote": false,      // JSXでシングルクォートを使うか
  "prettier.trailingComma": "es5",       // 末尾カンマの設定
  "prettier.bracketSpacing": true,       // {foo: bar}のスペース
  "prettier.bracketSameLine": false,     // JSXの>を同じ行に
  "prettier.arrowParens": "always",      // アロー関数の引数の括弧
  "prettier.endOfLine": "lf",            // 改行コード（lf/crlf/cr/auto）
  "prettier.htmlWhitespaceSensitivity": "css", // HTMLの空白の扱い
  "prettier.embeddedLanguageFormatting": "auto" // 埋め込み言語のフォーマット
}

よく使う設定パターン

【スタンダードスタイル】

{
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none"
}

【Airbnbスタイル】

{
  "prettier.printWidth": 100,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.arrowParens": "always"
}

【保守的スタイル】

{
  "prettier.printWidth": 80,
  "prettier.tabWidth": 4,
  "prettier.semi": true,
  "prettier.singleQuote": false
}

.prettierrc設定ファイルとの使い分け

プロジェクトごとの設定

プロジェクトのルートに.prettierrcファイルを作ると、そちらが優先されます。

【.prettierrcの例】

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

【優先順位】

  1. .prettierrc（プロジェクトルート）
  2. package.jsonの"prettier"セクション
  3. VSCodeのsettings.json

.prettierignoreで除外設定

フォーマットしたくないファイルを指定：

# .prettierignore
build/
dist/
coverage/
*.min.js
*.min.css
package-lock.json

ESLintとの連携：最強の組み合わせ

ESLintとPrettierを共存させる

競合を避けるための設定：

【必要なパッケージをインストール】

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

【.eslintrc.jsonの設定】

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

【settings.jsonの設定】

{
  // ESLintの自動修正も有効化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // Prettierは引き続き有効
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

ワークスペース設定：プロジェクトごとに使い分け

.vscode/settings.jsonの活用

プロジェクトごとに異なる設定を使いたい場合：

【プロジェクト構造】

my-project/
├── .vscode/
│   └── settings.json  ← プロジェクト専用設定
├── src/
├── package.json
└── .prettierrc

【.vscode/settings.json の例】

{
  // このプロジェクトだけの設定
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // タブサイズもプロジェクトごとに
  "editor.tabSize": 2,
  
  // 特定のファイルは除外
  "[markdown]": {
    "editor.formatOnSave": false
  },
  
  // 推奨拡張機能
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

トラブルシューティング：よくある問題と解決法

問題1：Prettierが動かない

【確認ポイント】

  1. 拡張機能が有効か確認
    • 拡張機能タブでPrettierが有効になっているか
    • 無効化されていたら有効化
  2. デフォルトフォーマッターの確認 { "editor.defaultFormatter": "esbenp.prettier-vscode" }
  3. 出力パネルでエラー確認
    • 表示 → 出力 → Prettierを選択
    • エラーメッセージを確認

問題2：保存時にフォーマットされない

【解決方法】

{
  // これらすべてを確認
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",  // または "modifications"
  "files.autoSave": "off"  // 自動保存は無効にする
}

問題3：設定が反映されない

【キャッシュクリア】

  1. Ctrl+Shift+P
  2. 「Reload Window」を実行
  3. それでもダメなら拡張機能を再インストール

問題4：特定のファイルだけフォーマットされない

【言語モードの確認】

  1. 右下のステータスバーで言語を確認
  2. 正しい言語が選択されているか
  3. 必要に応じて言語を変更

便利な追加設定とTips

ショートカットキーの設定

【手動フォーマットのショートカット】

  • Windows/Linux: Shift+Alt+F
  • Mac: Shift+Option+F

【カスタムショートカット】 keybindings.jsonに追加：

[
  {
    "key": "ctrl+alt+f",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus"
  }
]

Format on Save の条件付き設定

特定のフォルダだけフォーマットしない：

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "files.associations": {
    "**/legacy/**/*.js": "plaintext"  // レガシーコードは除外
  }
}

パフォーマンス改善

大きなファイルでの動作を改善：

{
  "prettier.requireConfig": true,  // 設定ファイルがある時だけ動作
  "prettier.ignorePath": ".prettierignore",  // 無視ファイルを明示
  "editor.formatOnSaveTimeout": 5000  // タイムアウトを延長
}

チーム開発でのベストプラクティス

設定の共有方法

【必須ファイル】

プロジェクトルート/
├── .vscode/
│   ├── settings.json    # VSCode設定
│   └── extensions.json  # 推奨拡張機能
├── .prettierrc         # Prettier設定
├── .prettierignore     # 除外設定
└── .editorconfig       # エディター共通設定

【extensions.jsonの例】

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig"
  ]
}

pre-commitフックの設定

コミット前に自動フォーマット：

# huskyとlint-stagedをインストール
npm install --save-dev husky lint-staged

【package.jsonに追加】

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write"
    ]
  }
}

まとめ：もうコードフォーマットで悩まない！

VSCodeとPrettierの設定を正しく行えば、コードの見た目を気にせず、本質的な開発に集中できます。

今すぐやるべきこと：

✅ Prettier拡張機能をインストール

  • VSCodeの拡張機能から簡単導入

✅ 基本のsettings.json設定

  • 最低限の3行から始める

✅ プロジェクトに.prettierrc作成

  • チームで設定を共有

✅ ESLintとの連携設定

  • より高品質なコードに

✅ 保存時の自動フォーマット有効化

  • もう手動フォーマットは不要

覚えておくべきポイント：

  • グローバル設定とプロジェクト設定を使い分ける
  • チーム開発では設定ファイルをGit管理
  • トラブル時は出力パネルを確認
  • 定期的に設定を見直して最適化

これで、きれいで読みやすいコードを、努力なしで維持できるようになります。

Happy Coding! 🎉

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました