Prettierでフォーマットできない原因と解決方法｜初心者向け完全ガイド
はじめに
Prettierはコードの自動フォーマットツールとして多くの開発者に愛用されています。しかし、「フォーマットができない」「保存時に自動フォーマットが動作しない」といったトラブルに直面することは少なくありません。本記事では、Prettierがフォーマットできない主な原因と、初心者でも実践できる解決手順をご紹介します。
Prettierでフォーマットできない主な原因
1. Prettierがインストールされていない
最も基本的な原因として、Prettierそのものがプロジェクトにインストールされていないケースがあります。特に新しいプロジェクトを始めた際に見落とされやすい問題です。
2. 設定ファイルが不正
.prettierrcやprettier.config.jsなどの設定ファイルが誤った形式で記述されていると、Prettierが正常に動作しません。JSON形式の誤りやコメント記号の問題が該当します。
3. VS Codeの拡張機能の問題
VS CodeでPrettierを使用する場合、Prettier拡張機能が正しくインストールされていない、または無効になっている可能性があります。
4. エディタの設定で別のフォーマッターが優先されている
複数のフォーマッターがインストールされている環境では、他のフォーマッター（EslintやBeautifyなど）が優先されてしまうことがあります。
5. ファイルタイプが対応していない
Prettierはデフォルトで特定のファイル形式のみに対応しています。設定なしでは対応していないファイルタイプはフォーマットされません。
6. .prettierignoreで除外されている
.prettierignoreファイルにフォーマット対象のファイルが記述されていると、そのファイルはフォーマットされません。
7. ESLintとの競合
ESLintとPrettierの設定が競合すると、フォーマット結果が不安定になったり、フォーマットが反映されないことがあります。
Prettierがフォーマットできない場合の解決手順
ステップ1: Prettierのインストール確認
まず、Prettierが正しくインストールされているか確認しましょう。
# npm を使用している場合
npm list prettier
# yarn を使用している場合
yarn list prettierインストールされていない場合は、以下のコマンドで導入してください。
# npm を使用している場合
npm install --save-dev prettier
# yarn を使用している場合
yarn add --dev prettierステップ2: 設定ファイルの確認と作成
プロジェクトのルートディレクトリに.prettierrcファイルを作成します。以下は基本的な設定例です。
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}JSON形式で記述する際は、ダブルクォートを使用し、最後のプロパティにはカンマを付けないことに注意してください。
ステップ3: VS Codeの設定を確認
VS Codeを使用している場合は、settings.jsonで以下の設定を確認してください。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}ステップ4: コマンドラインでテスト実行
設定が完了したら、コマンドラインでPrettierが正常に動作するか確認しましょう。
# 単一ファイルをフォーマット
npx prettier --write src/index.js
# ディレクトリ配下のファイルをすべてフォーマット
npx prettier --write src/ステップ5: ESLintとの競合を解決
ESLintを使用している場合は、eslint-config-prettierをインストールして競合を回避しましょう。
npm install --save-dev eslint-config-prettierその後、.eslintrc.jsonに以下を追加します。
{
"extends": ["prettier"]
}実践的なコード例
例1: 基本的な.prettierrc設定
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "always"
}例2: package.jsonでのPrettier設定
{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
"prettier": "^3.0.0"
},
"prettier": {
"semi": true,
"singleQuote": true,
"printWidth": 100
},
"scripts": {
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
"format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\""
}
}例3: .prettierignore設定
node_modules
dist
build
.next
out
*.min.js
coverage
.git例4: フォーマット対象外ファイルへの対応
// .prettierrc.js（JavaScriptファイル形式）
module.exports = {
semi: true,
singleQuote: true,
printWidth: 100,
overrides: [
{
files: "*.md",
options: {
printWidth: 120
}
},
{
files: "*.yaml",
options: {
tabWidth: 2
}
}
]
};よくある間違いと対処法
間違い1: .prettierrcを複数作成している
.prettierrcとprettier.config.jsを同時に作成すると、どちらが優先されるかで混乱が生じます。設定ファイルは1つに統一しましょう。
間違い2: シングルクォートとダブルクォートの混在
// 間違い：JSONファイル内でシングルクォートを使用
{
'semi': true,
'singleQuote': true
}
// 正解：JSONファイルではダブルクォートを使用
{
"semi": true,
"singleQuote": true
}間違い3: グローバルインストールのみでプロジェクト内にインストールしていない
グローバルインストールだけでは、チームメンバーが同じバージョンを使用できません。必ずプロジェクトのdevDependenciesにインストールしてください。
間違い4: VS Code拡張機能をインストールしただけで設定していない
拡張機能をインストールするだけでは不十分です。settings.jsonでデフォルトフォーマッターに設定する必要があります。
間違い5: .prettierignoreで不要な除外設定をしている
// 間違い：フォーマット対象を意図せず除外
src/
components/
// 正解：特定のディレクトリのみ除外
node_modules
build
dist間違い6: ESLintとPrettierの設定が競合している
ESLint経由でPrettierを実行する場合、eslint-plugin-prettierとeslint-config-prettierの両方が必要です。片方だけのインストールではうまく動作しません。
トラブルシューティング早見表
| 症状 | 原因 | 解決方法 |
|---|---|---|
| フォーマットメニューがない | 拡張機能がインストールされていない | VS Code Marketplaceから「Prettier」をインストール |
| 保存時に自動フォーマットされない | formatOnSaveが有効になっていない | settings.jsonで「editor.formatOnSave」をtrueに設定 |
| コマンド実行がエラーになる | Prettierがインストールされていない | npm install –save-dev prettierで導入 |
| 複数人で動作が異なる | バージョンが異なっている | package.jsonを共有し、npm installで同期 |
まとめ
Prettierでフォーマットできない問題は、適切な手順に従うことでほぼ確実に解決できます。本記事で紹介した解決手順を順番に実践すれば、初心者でも問題を解決できるはずです。
重要なポイントをまとめると以下の通りです：
- インストール確認：Prettierがプロジェクトにインストールされているか確認する
- 設定ファイル：
.prettierrcを正しい形式で作成する - エディタ設定：VS Codeの設定でPrettierをデフォルトフォーマッターに指定する
- 競合回避：ESLintとの競合がないか確認する
- テスト実行：コマンドラインで動作確認を行う
万が一トラブルが発生した場合は、npm installでnode_modulesを再インストールし、キャッシュをクリアする（npm cache clean --force）ことも有効です。
Prettierを適切に設定することで、チーム全体で統一されたコードスタイルを保ち、開発効率を大幅に向上させることができます。本記事の内容が皆様の開発をサポートできれば幸いです。
