🍚

VSCodeで言語によって異なるフォーマッターを設定する

2025/01/21に公開

 はじめに最近 VSCode で開発している時に、「TypeScript はこっちのフォーマッターを使いたいけど、Python ではこっちのフォーマッターを使いたい。。。」となりました。
別々のワークスペースを開いてデフォルトのフォーマッターを設定したり、コミット前にフォーマッターを手動実行したりする方法もありますが、それをせずに 1 つのワークスペースで言語によってフォーマッターを変える方法を探していました。
色々調べた結果、VSCode の設定を変更することで対応できました！
その方法を書いていきます！

 設定方法以下で説明しますが、より詳しい内容を知りたい方は、VSCode の公式ドキュメントをご参照ください。
https://code.visualstudio.com/docs/getstarted/settings#_language-specific-editor-settings

 事前準備ここでは TypeScript にPrettierを、Python にblackを設定します。

先にPrettierとblackの拡張機能をインストールしておいてください。
Prettier
black
また、以下の手順では、ファイル保存時にフォーマッターが実行される設定（editor.formatOnSave）も追加しています。必要なければ削除してください。

 VSCode で設定を変更する方法タブの「表示」->「コマンドパレット」を開く。
「基本設定: ユーザー設定を開く（JSON）」を選択。（英語だと「Preferences: Open User Settings (JSON)」となります）
settings.jsonが開くので、以下を追加します。
{
    その他の設定...

+  "[python]": {
+    "editor.defaultFormatter": "ms-python.black-formatter",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  }
}
VSCode を再度開きます。

 devcontainer で設定を変更する方法.devcontainer/devcontainer.jsonに以下を追加します。
{
その他の設定...

  "customizations": {
    "vscode": {
      "extensions": [
+       "esbenp.prettier-vscode",
+       "ms-python.black-formatter"
      ],
      "settings": {
+       "[python]": {
+         "editor.defaultFormatter": "ms-python.black-formatter",
+         "editor.formatOnSave": true
+       },
+       "[typescript]": {
+         "editor.defaultFormatter": "esbenp.prettier-vscode",
+         "editor.formatOnSave": true
+       }
      }
    }
  },
}
devcontainer を再度開きます。

 最後に今回は VSCode で言語によって異なるフォーマッターを設定する方法を書いてきました！
今回は TypeScript と Python のフォーマッターを設定しましたが、他の言語でも設定が可能です。
ぜひお試しください！🙇‍♂️

はじめに

設定方法

事前準備

VSCode で設定を変更する方法

devcontainer で設定を変更する方法

最後に

Discussion