🤖

Prettier - Code formatterのメモ

に公開

フォーマッターの方針がプロジェクトごとに異なるから

Userの設定を避けて、Workspaceの設定にしてる

該当のプロジェクトに、
方針にないのに、フォーマット設定してたらgit関係でソースコードの差分が出まくって
自分や他人が混乱するし迷惑もかかることがある

だから、要るプロジェクトのときに、毎度、workspace設定する必要があり
その度に、どうやったっけ? ってなるし、メンドイからいい加減書いておくことにした

この記事見て手を動かしたら、一瞬で終わるようにしたい。調べるのメンドイ

Prettier - Code formatterのインストール

esbenp.prettier-vscode
で、拡張機能を検索すると
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
が出てくる

Prettier (Legacy)
という表記が出てくる(2025/11/29時点)が、これで良いらしい

EditorのDefault FormatterでPrettier - Code formatterを選択する

default formatter で検索して
EditorのDefault FormatterでPrettier - Code formatterを選択する

EditorのFormat On Saveにチェックを入れる

format on save などで検索して
EditorのFormat On Saveのチェックを入れる

必要性があれば、プロジェクトルートに .prettierrcを作る

.prettierrc
の例

{
  "tabWidth": 4,
  "useTabs": false
}

上記の説明
"tabWidth": 4,
は、
タブキー押したときに、半角スペース4つでインデントする
この値を、2にすべきか、などは、プロジェクトの方針
"useTabs": false
は、タブキーが押したときに、TABが入らないようにする

VS CodeでReload Window

Ctrl+Shift+P(Command+Shift±P)で、
Developper:Reload Window
をして、設定値を反映させる

Discussion