【VS Code】TypeScript / JavaScript コードを自動フォーマットする

最近は Svelte + TypeScript を楽しんでいる岩崎真也です。

VS Code で、TypeScript / JavaScript コードのフォーマット設定をしましたので記録しておきます。

拡張機能

個人的に「else」などは波括弧の次の行に表示したほうが見やすいと感じるため、標準的なプラグイン「Prettier」ではなく「Prettier Now」を利用しました。

「Prettier Now」をインストールする。

※間違って同様の他のプラグインを入れないこと。

※Prittier 系の他のプラグインは無効にすること。

VS Code を再起動する。

設定を変更する

セミコロンがなくても動くのであれば、セミコロンはないほうが見やすいと思います。

VS Code の設定を開き、「Prettier Now」を検索する。

• ✓ Break Before Else
• Print Width: 100
• ❌ Semi
• TabWidth: 2
• Trailing Comma: es5
• ❌ Use Tabs

設定を変更する 2

他社向けのプロジェクトでは以下のように設定しているものもあります。

VS Code の設定を開き、「Prittier Now」を検索する。

• ✓ Break Before Else
• ✓ Semi
• TabWidth: 4
• Trailing Comma: es5
• ✓ Use Tabs

VSCode デフォルトフォーマット設定

VSCodeの設定を開く。

「Formatter」で検索する。

「Default Formatter」を None にする。

ファイル全体にフォーマットを適用する

事前にコミットを済ませておく。

ファイルを右クリックして「Format Document」を選択する。

ダイアログが表示されたら「Yes」を選択し、Formatter を選択する。

差分を確認して、不要な折返しなど、戻したい箇所はフォーマットを戻す。

範囲指定にフォーマットを適用する。

範囲指定後に右クリックして「Format Selection」を選択する。

保存時にフォーマットを適用する。

常に自動フォーマットで問題ないのであれば、VS Code の設定で「Format on Save」を有効にする。