保存のたびにインデント・引用符などの書式を整えます。JavaScript・TypeScript をはじめ CSS・HTML・JSON など Web 系の主要言語に対応します。
技術用語
304
Prettier
プリティア
体験区分：触った
推奨読者レベル：Level 2-3
何をしてくれるか
どこで出会うか
VS Code の拡張として導入するのが一般的です。AI が生成したコードを貼り付けて保存すると書式が揃うため、バイブコーディング中に自然に活躍します。
Before / After
2026.04·ready
「Prettier を保存時にかけておけば、Claude が出すコードも自分の書式に揃います。」
Prettierの見方
305
この用語の見どころ
1
役割
コードの書式を自動で統一するフォーマッタです。
2
うれしさ
保存するだけで書式が整い、レビューの指摘が減ります。
3
注意点
設定の自由度は低く、細かいルールは変えられない設計です。
4
どこで役立つか
複数人開発やバイブコーディングで書式の揺れを防ぎます。
5
はじめに
VS Code 拡張を入れて「保存時に整形」を有効化するだけです。
6
深掘り先
ESLint、VS Code、TypeScript
非エンジニアのつまずき
- 設定に誤りがあると起動のたびに違うコードが生成されフォーマットが崩れる状況に陥り、かなり苦労しました。
私のコメント
- 第一印象:フォーマッターとしてまず入れておくと良い、という感じで紹介されました。
- 良い点:出力の形を統一してくれるので、機械的に運用できてとても便利です。
- ダメな点:設定を押さえないと機能せず、AI に任せる場合も設定まで含めた指示が必要です。
- 誰向けか:エージェントでコーディングを進めていく人には必要です。
開発フローでの位置
環境構築
コード生成
ESLint 連携
レビュー
関連用語
F-21·term_tool
バイブコーディング図鑑