【VSCode】ファイルの種類ごとに既定のフォーマッターを変更する方法｜Default Formatterの設定

みなさんこんにちは。

VSCodeでJavaScriptやJSONを編集していると、ファイルの種類によってコードを整形するツールを変更したいと思ったことがある方も多いかと思います。

今回は、Default Formatter（既定のフォーマッター）を言語ごとに設定する方法についてご紹介したいと思います。

この記事はこんな人におすすめ

この記事はこんな人におすすめです！

• JavaScriptではPrettierを使いたい人
• JSONなどは別のフォーマッターに切り替えたい人
• 言語別のsettings.jsonの書き方を知りたい人

といったところでしょうか。

既定のフォーマッターを確認する

VSCodeでは、ファイルを整形する際に使用するツールをフォーマッターと呼びます。JavaScriptなどには標準の整形機能があり、拡張機能を追加すると別の整形ツールも選べます。

まず.jsファイルを開き、右下の言語モードが「JavaScript」になっていることを確認してください。続いてエディター内を右クリックし、「Format Document With…（ドキュメントのフォーマット方法）」を選択します。

表示された候補のうち、「Configure Default Formatter…（既定のフォーマッターの構成）」から現在使用するフォーマッターを選べます。

JavaScriptのフォーマッターを変更する

今回はJavaScriptにPrettierを指定してみます。未導入の場合は、Ctrl + Shift + Xで拡張機能を開き、「Prettier – Code formatter」をインストールしてください。

JavaScriptファイルを開いた状態で、もう一度「Format Document With…」→「Configure Default Formatter…」を開き、Prettier – Code formatterを選択します。

動作確認用にformatter-test.jsを作成し、次のコードを入力します。

function greet(name){console.log("こんにちは、"+name);}

その後、Shift + Alt + Fでドキュメントを整形し、選択したフォーマッターで処理されることを確認しましょう。

ファイルの種類ごとに設定する

JavaScriptではPrettier、JSONではVSCode標準のフォーマッターを使いたい場合は、settings.jsonに言語別の設定を記述します。

Ctrl + Shift + Pを押し、「Preferences: Open User Settings (JSON)」を選択してください。以下は設定例となります。

と[json]はVSCodeの言語IDよ。拡張子だけでなく、画面右下に表示される言語モードに対応して設定するのがポイントとなります。

なお、settings.json自体は「JSON with Comments（jsonc）」として扱われるため、上の[json]設定の対象とは異なる点に注意してください。

設定を保存して動作確認する

設定を追加したらCtrl + Sで保存してください。.jsと.jsonをそれぞれ開き、Shift + Alt + Fで整形できるか確認します。

今回の設定は整形に使うツールの指定です。保存時にも自動整形したい場合は、別途editor.formatOnSaveを有効にする必要があります。

また、チームで設定を共通化する場合は.vscode/settings.jsonに記述できます。既存設定は消さずに必要な項目だけ追加してください。使用する拡張機能がインストールされていない場合も動作しないので確認しましょう。

保存時の整形が動作しない場合は、

も参考にしてみてください。

最後に

いかがでしたでしょうか。今回は、VSCodeの既定フォーマッターをファイルの種類ごとに変更する方法をご紹介しました。

言語別に設定しておけば、JavaScriptとJSONで異なる整形ツールを使い分けられます。少しでも参考になれば幸いです。

開発依頼について

ココナラでWebスクレイピング開発サービスを出品しております。

自分で開発をしようと思ったけど、VBAでのネット記事が少なく困っている方も多いかと思います。

そんな方はいつでもお気軽にご相談ください。

また、本ブログからご依頼いただいた方については割引特典がございますので、

ご不明点と合わせてメッセージをいただけると幸いです。

Webスクレイピング以外にもWebアプリの開発サービスも出品しております。

こちらについても、本ブログからご依頼いただいた方については割引特典がございますので、

お気軽にご相談ください。

ご興味がある方はこちら！！

@KP16Wt9UOB97870