【入門編】Prettierが効かない？VSCodeで自動整形を確実に動かすための設定チェックリスト – デバッグ・コード品質・テストツール生産性向上バイブル

エンジニアの皆さん、こんにちは。

コードを書いている時、「なぜかインデントが揃わない」「保存するたびにフォーマットが崩れる」といった些細なストレスに、貴重な集中力を削がれていませんか？

PrettierとESLintは、いわばあなたのコードの「番人」です。しかし、この二つが喧嘩を始めると、開発現場はカオスと化します。今日は、VSCode環境においてこの二つを完全に調教し、「保存するだけで完璧なコードが完成する」というエンジニアにとっての理想郷を構築するための、本質的な設定術を伝授します。

—

1. なぜ「Prettierが効かない」が起きるのか？

多くの場合、問題の本質は「設定の優先順位」と「フォーマッタの競合」にあります。

VSCodeのデフォルトフォーマッタ: VSCode自体が持つ整形機能が、Prettierより先に動いてしまっている。
拡張機能の衝突: `eslint-plugin-prettier` や `prettier-eslint` など、古いアプローチの設定が混在している。
設定の場所: `.vscode/settings.json`、ユーザーのグローバル設定、`.prettierrc`、これらが脳内会議をせずにバラバラに指示を出している。

これらを解決する唯一の正解は、「責務の分離」です。

—

2. 魂のセットアップ：設定の絶対法則

まず、`.prettierrc` はプロジェクトのルートに置き、Prettierに「どう整形するか」を専任させます。そしてVSCodeには「Prettierを使ってくれ」とだけ命令します。

ステップ1：必要なパッケージを最小限で入れる

現代のベストプラクティスはシンプルです。ESLintとPrettierを仲直りさせるための `eslint-config-prettier` だけをインストールします。

Prettier本体と、ESLintとの競合を無効化するプラグインを導入
npm install –save-dev prettier eslint-config-prettier

ステップ2：.prettierrc（設定ファイル）の作成

プロジェクト直下に `.prettierrc` を作成します。JSON形式が最も堅牢です。

{
“semi”: true, // 文末のセミコロンを強制
“singleQuote”: true, // ダブルクォートではなくシングルクォートに統一
“tabWidth”: 2, // インデントはスペース2つ
“trailingComma”: “es5” // オブジェクトや配列の末尾にカンマを付ける
}

—

3. VSCodeで「確実に」動かすためのsettings.json

ここが最も重要な「現場の知見」です。VSCodeのプロジェクトルートに `.vscode/settings.json` を作成してください。これにより、「他のプロジェクトの設定に影響されず、このプロジェクトだけ」の挙動を担保できます。

{
// VSCodeのデフォルトフォーマッタを無効化し、Prettierを強制する
“editor.defaultFormatter”: “esbenp.prettier-vscode”,

// ファイル保存時に自動的にフォーマットを走らせる
“editor.formatOnSave”: true,

// JS/TS系ファイルでのみPrettierを適用する（重要：余計なファイルに干渉させない）
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[typescript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[typescriptreact]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
}

解説：
なぜ「すべて」ではなく「言語ごと」に設定するのか？それは、将来的にCSSやMarkdownなど別のフォーマッタを使いたくなった時に、設定が競合して「また動かない！」と嘆くのを防ぐための防波堤です。

—

4. 動作確認：HelloWorld的チェックリスト

設定が終わったら、以下の手順で「確実に動作しているか」を確認してください。

1. わざと崩す: 適当な `.ts` ファイルを開き、インデントを崩したり、セミコロンを削除したりします。
2. 保存する: `Cmd + S` (Winは `Ctrl + S`) を押す。
3. 瞬時に整う: 一瞬でコードが `.prettierrc` の通りに整形されれば成功です。

もし動かない場合（チェックリスト）：

右下のステータスバー: VSCodeの右下に「Prettier」の文字が表示されていますか？
出力ログ: `Ctrl + Shift + U` で出力パネルを開き、ドロップダウンから「Prettier」を選択してください。ここにエラーが出ていれば、それが答えです。
拡張機能: 「Prettier – Code formatter」拡張機能が有効（Enabled）になっているか確認してください。

—

最後に：なぜこの設定が必要なのか

「たかが自動整形」と思うかもしれません。しかし、チーム開発において「セミコロンがあるかないか」「クォートがどっちか」で悩む時間は、1日あたり数分、年間で数時間に及びます。

その数時間を自動化に任せることで、あなたは「どう書くか」ではなく「何を解決するか」という、エンジニアとして最も創造的な仕事に集中できるようになります。

この環境構築は、あなたがより高い次元のコードを書くための、最初で最も重要な投資です。ぜひ、今すぐ手元のプロジェクトで試してみてください。劇的に楽になる感覚が、そこにはありますよ。