VSCodeでフォーマッターを設定する方法

VSCode（Visual Studio Code）のフォーマッターとは、コードのインデントや改行、空白、括弧の配置などを一定のルールに従って自動的に整える機能です。

たとえば、次のようなJavaScriptコードがあるとします。

function hello(){console.log("Hello");}

フォーマッターを実行すると、使用するフォーマッターや設定によって、次のように整形できます。

function hello() {
  console.log("Hello");
}

フォーマッターを利用すると、コードスタイルを自動的に統一できるため、個人開発だけでなくチーム開発でも便利です。

インデントや改行の違いによる無駄な差分を減らせるため、Gitを利用した開発でも管理しやすくなります。

VSCodeには一部の言語向けフォーマット機能が標準で搭載されています。

さらに、Prettierやclang-formatなどの拡張機能や外部ツールを利用することで、より細かなルールに基づいてコードを整形できます。

VSCodeでコードを手動フォーマットする方法

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

現在開いているファイル全体を整形する場合は、エディター上で右クリックして「ドキュメントのフォーマット」を選択します。

英語表示の場合は「Format Document」です。

主なショートカットは次のとおりです。

OS	ショートカット
Windows	Shift + Alt + F
macOS	Shift + Option + F
Linux	Ctrl + Shift + I

頻繁にフォーマットする場合は、ショートカットを覚えておくと効率的です。

選択したコードだけフォーマットする

ファイル全体ではなく、一部分だけを整形することもできます。

対象となるコードを選択してから、「選択範囲のフォーマット」を実行します。

WindowsとLinuxでは、標準設定で次のキー操作を使用できます。

Ctrl + K
Ctrl + F

macOSでは次の操作です。

Command + K
Command + F

ただし、選択範囲のフォーマットに対応していないフォーマッターでは利用できない場合があります。

既定のフォーマッターを設定する方法

「Format Document With…」から設定する

複数のフォーマッターが利用できる場合は、どのフォーマッターを使うか指定する必要があります。

対象ファイルを開いた状態で右クリックし、「ドキュメントのフォーマット方法」または「Format Document With…」を選択します。

利用できるフォーマッターの一覧が表示されるので、使用したいものを選びます。

さらに「Configure Default Formatter」を選択すると、その言語で使用する既定のフォーマッターを指定できます。

複数のフォーマッター拡張機能をインストールしている場合は、既定のフォーマッターを明示しておくと競合を防ぎやすくなります。

settings.jsonで既定のフォーマッターを指定する

既定のフォーマッターは、settings.jsonでも設定できます。

たとえばPrettierを既定のフォーマッターとして使用する場合は、次のように設定します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

esbenp.prettier-vscodeは、VSCode向けPrettier拡張機能の識別子です。

この設定は、「どのフォーマッターを使用するか」を指定するものです。

保存時に自動フォーマットする設定とは別なので注意しましょう。

保存時に自動フォーマットする方法

設定画面から有効にする

ファイルを保存するたびに自動でフォーマットしたい場合は、「Format On Save」を有効にします。

VSCodeの設定画面を開き、検索欄に次の文字列を入力します。

Format On Save

表示された「Editor: Format On Save」を有効にします。

これでファイル保存時にフォーマッターが実行されるようになります。

settings.jsonで設定する

settings.jsonでは、次のように指定します。

{
  "editor.formatOnSave": true
}

既定のフォーマッターと組み合わせる場合は、次のように設定できます。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

editor.defaultFormatterは使用するフォーマッターを指定する設定です。

editor.formatOnSaveはフォーマットを実行するタイミングを指定する設定です。

この2つは役割が異なります。

入力時や貼り付け時にフォーマットする方法

editor.formatOnTypeを使用する

入力中に自動フォーマットを実行する場合は、次の設定を使用します。

{
  "editor.formatOnType": true
}

ただし、editor.formatOnTypeは、1文字入力するたびにファイル全体を整形する機能ではありません。

対応している言語やフォーマッターで、特定の文字を入力したときなどに自動フォーマットが実行されます。

実際の動作は言語機能やフォーマッターによって異なります。

editor.formatOnPasteを使用する

コードを貼り付けた際にフォーマットする場合は、次のように設定します。

{
  "editor.formatOnPaste": true
}

ただし、使用しているフォーマッターが範囲フォーマットに対応している必要があります。

すべてのフォーマッターで利用できるわけではありません。

保存時フォーマットだけを使う方法もおすすめ

自動フォーマットには複数の設定があります。

{
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true
}

便利ではありますが、最初からすべて有効にすると、意図しないタイミングでコードが整形されることがあります。

まずは、次の設定だけ有効にする方法がシンプルです。

{
  "editor.formatOnSave": true
}

必要に応じて、formatOnTypeやformatOnPasteを追加するとよいでしょう。

言語ごとにフォーマッターを設定する方法

JavaScriptとTypeScriptでPrettierを使う

VSCodeでは、言語ごとに異なるフォーマッターを指定できます。

たとえばJavaScriptとTypeScriptでPrettierを使用する場合は、次のように設定します。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

[javascript]や[typescript]は、特定の言語だけに適用する設定です。

HTMLやCSSにも設定する

HTMLやCSSにもPrettierを使用する場合は、次のように追加できます。

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

ReactやTypeScript ReactでもPrettierを使う場合は、それぞれ設定します。

{
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

editor.defaultFormatterは言語ごとに分けて指定する

Prettierを既定のフォーマッターとして指定する場合は、複数の言語を1つのブロックにまとめるより、言語ごとに分けて記述する方法が安全です。

たとえば、次のように設定します。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

フォーマッター設定では、各言語を個別に指定しておくと挙動を把握しやすくなります。

言語固有の設定をGUIから変更する方法

Configure Language Specific Settingsを使用する

settings.jsonを直接編集しなくても、言語別の設定を変更できます。

コマンドパレットを開きます。

WindowsやLinuxでは次のショートカットです。

Ctrl + Shift + P

macOSでは次の操作です。

Command + Shift + P

その後、次のコマンドを検索します。

Preferences: Configure Language Specific Settings

対象の言語を選択すると、その言語に限定した設定を変更できます。

たとえば、JavaScriptでは保存時フォーマットを有効にし、Markdownでは無効にするといった使い分けが可能です。

VSCodeの設定優先順位に注意する

User設定とWorkspace設定がある

VSCodeには、複数の設定スコープがあります。

代表的なのがUser設定とWorkspace設定です。

User設定は、基本的に自分のVSCode全体に適用されます。

Workspace設定は、特定のプロジェクトに適用されます。

たとえばUser設定で次のように指定したとします。

{
  "editor.formatOnSave": true
}

すると、多くのプロジェクトで保存時フォーマットが有効になります。

言語固有設定には独自の優先関係がある

VSCodeでは、通常設定だけでなく言語固有設定にも優先順位があります。

たとえばUser設定でJavaScript向けに、

{
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

と設定している場合、Workspace側の通常設定より言語固有設定が優先されるケースがあります。

そのため、フォーマッターが想定どおり動作しない場合は、User設定だけでなくWorkspace設定や言語固有設定も確認する必要があります。

単純に「Workspace設定が必ずすべてのUser設定より強い」と考えると、原因を見つけにくくなることがあります。

Workspace単位でフォーマッターを設定する方法

.vscode/settings.jsonを使用する

プロジェクト単位で設定を共有する場合は、.vscode/settings.jsonを利用できます。

構成は次のようになります。

project
└─ .vscode
   └─ settings.json

たとえばJavaScriptでPrettierを使用する場合は、次のように設定できます。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

.vscode/settings.jsonをGitで管理すれば、プロジェクトメンバー間で同じVSCode設定を共有できます。

ただし、どこまでエディター設定をリポジトリに含めるかは、チームの運用方針によって異なります。

Prettierをフォーマッターとして設定する方法

Prettier拡張機能をインストールする

Web開発では、Prettierがよく利用されます。

VSCodeの拡張機能画面で「Prettier」と検索し、「Prettier – Code formatter」をインストールします。

インストール後、既定のフォーマッターとして指定できます。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

保存時にも自動実行する場合は、次のようにします。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

プロジェクトにPrettierをインストールする方法

チーム開発では、VSCode拡張機能だけでなく、プロジェクト自体にPrettierをインストールする方法もよく使われます。

npmを使用する場合は、たとえば次のようにインストールできます。

npm install --save-dev --save-exact prettier

プロジェクトローカルにPrettierを入れておけば、開発メンバーやCI環境でも同じバージョンを利用しやすくなります。

VSCodeのPrettier拡張機能は、プロジェクト側にPrettierが存在する場合、基本的にそちらを利用します。

Prettierの設定ファイルを利用する方法

.prettierrcでルールを設定する

VSCode側では「どのフォーマッターを使うか」や「いつ実行するか」を設定します。

一方、Prettierそのもののコードスタイルは、.prettierrcなどの設定ファイルで管理できます。

たとえば次のように設定します。

{
  "semi": true,
  "singleQuote": true
}

この場合、セミコロンを付け、文字列にシングルクォートを使用する設定になります。

VSCode設定とPrettier設定の役割を分ける

役割を整理すると、次のようになります。

VSCode側では、主に以下を設定します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

これは、

• どのフォーマッターを使うか
• いつフォーマットするか

を指定しています。

一方、.prettierrcでは、

• セミコロンを付けるか
• シングルクォートを使うか
• 1行の長さをどうするか

といったコードスタイルを設定します。

チーム開発では、このように役割を分けて管理すると分かりやすくなります。

Web開発向けの設定例

JavaScriptやTypeScriptでPrettierを使う

Web開発でPrettierを使用する場合は、次のような設定が分かりやすいでしょう。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

この設定では、対象となる言語だけ保存時フォーマットが有効になります。

formatOnSaveを全言語で有効にする方法

すべての対応言語で保存時フォーマットを有効にしたい場合は、トップレベルに設定する方法もあります。

{
  "editor.formatOnSave": true
}

この設定は、JavaScriptやTypeScriptだけでなく、フォーマッターが設定されている他の言語にも影響します。

そのため、特定の言語だけ保存時フォーマットを有効にしたい場合は、言語別の設定内に記述する方が管理しやすい場合があります。

VSCode標準フォーマッターを利用する方法

拡張機能なしでもフォーマットできる言語がある

VSCodeには、JavaScriptやTypeScript、JSON、HTML、CSSなど、一部の言語について標準のフォーマット機能があります。

そのため、必ずしもPrettierなどの拡張機能をインストールしなければならないわけではありません。

簡単な開発や学習用途であれば、標準フォーマッターだけでも十分な場合があります。

標準フォーマッターと拡張機能が競合する場合もある

Prettierなどをインストールすると、VSCode標準フォーマッターと外部フォーマッターの両方が利用できる状態になることがあります。

その場合は、editor.defaultFormatterで使用するフォーマッターを明示するとよいでしょう。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

これにより、どのフォーマッターを使うかを明確にできます。

CやC++でフォーマッターを設定する方法

C/C++拡張機能ではclang-formatを利用できる

CやC++では、JavaScriptとは異なるフォーマッターを使用します。

MicrosoftのC/C++拡張機能では、clang-formatとvc_formatによるフォーマットがサポートされています。

標準ではclang-formatが使用されます。

そのため、言語によって次のようにフォーマッターを使い分けることができます。

JavaScript / TypeScript → Prettier
C / C++ → clang-format

すべての言語で同じフォーマッターを使う必要はありません。

複数のフォーマッターが競合する場合の対処法

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

フォーマットを実行したときに、

There are multiple formatters for 'JavaScript' files.

のように複数のフォーマッターが存在する状態になることがあります。

その場合は、「Format Document With…」から使用するフォーマッターを選択します。

さらに「Configure Default Formatter」で既定のフォーマッターを指定しておくと、毎回選択する必要がなくなります。

settings.jsonで明示する

JavaScriptでPrettierを使用する場合は、次のように設定できます。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

フォーマッターを明示すると、複数の拡張機能をインストールしている環境でも挙動を安定させやすくなります。

フォーマットされない場合の確認ポイント

フォーマッターがインストールされているか確認する

外部フォーマッターを指定している場合は、対応する拡張機能が必要です。

たとえば、

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

と設定していても、Prettier拡張機能がインストールされていなければPrettierは実行できません。

Format on Saveが有効か確認する

手動フォーマットでは動作するのに保存時だけ動かない場合は、次の設定を確認します。

{
  "editor.formatOnSave": true
}

falseになっている場合、保存時にはフォーマットされません。

言語モードを確認する

VSCodeの右下には、現在のファイルがどの言語として認識されているか表示されます。

たとえば、次のように表示されます。

JavaScript
TypeScript
HTML
CSS
Plain Text

JavaScriptファイルなのにPlain Textとして認識されている場合は、JavaScript用フォーマッターが正しく動作しないことがあります。

必要に応じて言語モードを変更しましょう。

User設定とWorkspace設定を確認する

User設定では保存時フォーマットを有効にしていても、Workspace設定や言語固有設定によって別の値が適用されている場合があります。

フォーマッターが想定どおり動作しないときは、次の設定を確認します。

User
Workspace
Workspace Folder
Language-specific Settings

特に言語固有設定は通常設定とは異なる優先関係を持つため、確認が重要です。

settings.jsonを開く方法

User Settings JSONを開く

VSCodeの設定を細かく編集する場合は、settings.jsonを直接開くと便利です。

コマンドパレットを開き、次のコマンドを実行します。

Preferences: Open User Settings (JSON)

User設定のsettings.jsonが開きます。

Default Settingsを確認する

VSCodeで利用できる設定項目を確認したい場合は、デフォルト設定も参照できます。

コマンドパレットから次の項目を開きます。

Preferences: Open Default Settings (JSON)

デフォルト設定は基本的に確認用であり、直接編集するものではありません。

特定のフォーマッターをショートカットで実行する方法

キーバインドにフォーマッターを指定する

VSCodeでは、特定のフォーマッターを直接実行するショートカットを設定できます。

たとえばPrettierをCtrl + Alt + Fで実行したい場合は、キーバインドに次のような設定を追加できます。

{
  "key": "ctrl+alt+f",
  "command": "editor.action.formatDocument.multiple",
  "args": {
    "formatter": "esbenp.prettier-vscode"
  },
  "when": "editorTextFocus && !editorReadonly"
}

この設定を利用すると、既定のフォーマッターを変更せずに、特定のショートカットを押したときだけPrettierを実行できます。

複数のフォーマッターを使い分ける場合に便利です。

VSCodeのフォーマッター設定でおすすめの構成

個人利用ではシンプルな設定でもよい

個人開発でPrettierを中心に使用する場合は、次のような設定でも十分です。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Prettierが対応している言語で、保存時に自動フォーマットできます。

チーム開発では言語ごとの設定がおすすめ

複数の言語を扱うチーム開発では、言語ごとにフォーマッターを明示する方法が分かりやすいでしょう。

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

さらに、プロジェクト側にPrettierをインストールし、.prettierrcなどの設定ファイルをGitで共有すると、開発環境やCIでも同じフォーマットルールを利用しやすくなります。

まとめ

VSCodeでは、「ドキュメントのフォーマット」を使用して、ソースコードを手動で整形できます。

保存時に自動フォーマットしたい場合は、editor.formatOnSaveを有効にします。

複数のフォーマッターが存在する場合は、editor.defaultFormatterを設定し、使用するフォーマッターを明示するとよいでしょう。

また、[javascript]や[typescript]などを利用すれば、言語ごとに異なるフォーマッターや設定を指定できます。

Web開発ではPrettierを使用するケースが多く、VSCode拡張機能だけでなく、プロジェクトローカルにPrettierをインストールし、.prettierrcと組み合わせて管理する方法も効果的です。

フォーマットが正常に動作しない場合は、フォーマッターのインストール状況、editor.formatOnSave、言語モード、User設定、Workspace設定、言語固有設定を順番に確認すると原因を特定しやすくなります。

以上、VSCodeでフォーマッターを設定する方法についてでした。

最後までお読みいただき、ありがとうございました。