VSCodeでは、ファイルを保存したタイミングでソースコードを自動的に整形できます。
インデントやスペース、改行などを毎回手作業で整える必要がなくなるため、コードの見た目を統一しやすくなります。
保存時の自動フォーマットを有効にする基本設定は、editor.formatOnSaveです。
{
"editor.formatOnSave": true
}ただし、使用する言語や環境によっては、フォーマッターのインストールやデフォルトフォーマッターの指定も必要になります。
この記事では、VSCodeで保存時の自動フォーマットを設定する方法から、PrettierやPythonでの設定、うまく動かない場合の対処法まで詳しく解説します。
VSCodeの保存時自動フォーマットとは
VSCodeの保存時自動フォーマットとは、ファイルを保存した際にフォーマッターを実行し、コードの書式を自動的に整える機能です。
たとえば、JavaScriptで次のようなコードを書いたとします。
function hello(){console.log("Hello");}適切なフォーマッターを設定している場合、保存すると次のような形へ整形できます。
function hello() {
console.log("Hello");
}コードの内容そのものを変更するというより、インデントや改行、スペースなどの書式を一定のルールに合わせて整えるのが基本です。
VSCodeには標準フォーマッターも用意されている
VSCodeでは、JavaScript、TypeScript、JSON、HTML、CSSなど、一部の言語について標準のフォーマット機能が用意されています。
そのため、これらの言語では必ずしもPrettierなどの拡張機能をインストールしなければフォーマットできないわけではありません。
一方で、より統一されたルールでコードを整形したい場合や、チーム開発で書式を揃えたい場合には、Prettierなどの外部フォーマッターを利用することがあります。
設定画面から保存時フォーマットを有効にする方法
VSCode初心者であれば、まず設定画面からFormat On Saveを有効にする方法が分かりやすいでしょう。
VSCodeの設定を開く
VSCodeで設定画面を開きます。
WindowsやLinuxでは、次のショートカットを使用できます。
Ctrl + ,macOSでは次のとおりです。
Command + ,メニューから設定画面を開くこともできます。
Format On Saveを検索する
設定画面上部の検索ボックスに、次のように入力します。
Format On Saveすると、Editor: Format On Saveという設定項目が表示されます。
Editor: Format On Saveを有効にする
Editor: Format On Saveのチェックボックスをオンにします。
これで、内部的には次の設定が有効になります。
{
"editor.formatOnSave": true
}対応するフォーマッターが設定されていれば、以降はファイルを保存したタイミングで自動的にフォーマットされます。
settings.jsonで保存時フォーマットを設定する方法
VSCodeでは、設定画面だけでなくsettings.jsonを直接編集して設定することもできます。
細かい設定を管理したい場合や、複数の言語ごとにフォーマッターを指定したい場合には便利です。
settings.jsonを開く
コマンドパレットを開きます。
WindowsやLinuxでは次のショートカットです。
Ctrl + Shift + PmacOSでは次のとおりです。
Command + Shift + Pコマンドパレットで、次の項目を検索します。
Preferences: Open User Settings (JSON)実行すると、ユーザー設定用のsettings.jsonを編集できます。
editor.formatOnSaveを追加する
基本設定は次のとおりです。
{
"editor.formatOnSave": true
}すでにほかの設定がある場合は、その中に追加します。
{
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.formatOnSave": true
}JSONでは、設定項目同士をカンマで区切る必要があります。
記述ミスがあると設定が正しく読み込まれないため注意しましょう。
デフォルトフォーマッターを指定する方法
editor.formatOnSaveを有効にしても、自動フォーマットされない場合があります。
代表的な原因の一つが、使用するフォーマッターが決まっていないことです。
複数のフォーマッターがある場合は指定が必要
同じ言語に対して複数のフォーマッターが利用できる場合、どのフォーマッターを使用するのか指定しておくと動作が安定します。
VSCodeでは、editor.defaultFormatterを使ってデフォルトフォーマッターを指定できます。
たとえば、Prettierを使用する場合は次のように設定します。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}これにより、保存時にPrettierが使用されます。
Prettierで保存時に自動フォーマットする方法
Web制作やフロントエンド開発では、Prettierがよく利用されています。
JavaScriptやTypeScript、HTML、CSS、JSON、Markdownなど、さまざまな形式のファイルを一定のルールで整形できます。
Prettierをインストールする
VSCode左側のExtensionsを開きます。
WindowsやLinuxでは次のショートカットを利用できます。
Ctrl + Shift + X検索ボックスで、次のように検索します。
Prettier一般的には、Prettier - Code formatterをインストールします。
拡張機能IDは次のとおりです。
esbenp.prettier-vscodePrettierをデフォルトフォーマッターにする
対象のファイルを開いた状態で右クリックし、次の順番で選択します。
Format Document With...
↓
Configure Default Formatter...
↓
Prettier - Code formatterこれにより、その言語でPrettierをデフォルトフォーマッターとして利用できます。
settings.jsonでPrettierを指定する
設定ファイルから指定する場合は、次のように記述できます。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}これで、Prettierが対応しているファイルを保存した際に自動フォーマットされます。
参考サイト
Prettierの自動フォーマットをvscodeのファイル保存時に行う方法［基礎的］
言語ごとに自動フォーマットを設定する方法
VSCodeでは、すべての言語で同じフォーマッターを使用する必要はありません。
JavaScriptではPrettier、PythonではBlackというように、言語ごとにフォーマッターを切り替えられます。
JavaScriptだけ設定する
JavaScriptだけ保存時フォーマットを有効にする場合は、次のように設定できます。
{
"[javascript]": {
"editor.formatOnSave": true
}
}JavaScriptでPrettierを使用する
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}これにより、JavaScriptファイルだけにPrettierを適用できます。
HTML・CSS・JavaScriptでPrettierを使用する
Web制作では、次のような設定も利用できます。
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}TypeScriptも利用する場合は、次の設定を追加できます。
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}Pythonを保存時に自動フォーマットする方法
Pythonでは、専用のフォーマッター拡張機能を使用することが一般的です。
代表的なものとして、Black、autopep8、Ruffなどがあります。
Blackを使用する場合
Black Formatterを利用する場合は、対応する拡張機能をインストールしたうえで、次のように設定できます。
{
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
}
}これにより、Pythonファイルを保存したタイミングでBlackによるフォーマットが実行されます。
フォーマットとimport整理は別の処理
Pythonでは、コードのフォーマットとimport文の整理が別処理として扱われる場合があります。
editor.formatOnSaveを有効にしただけでは、必ずしもimport文の並び替えまで実行されるわけではありません。
たとえばRuffを利用してimport整理を行う場合は、editor.codeActionsOnSaveを別途設定する方法があります。
{
"[python]": {
"editor.codeActionsOnSave": {
"source.organizeImports.ruff": "explicit"
}
}
}そのため、Python環境では「フォーマット」と「import整理」を分けて考えると設定内容を理解しやすくなります。
User設定とWorkspace設定の違い
VSCodeの設定には、適用範囲があります。
保存時フォーマットを設定する際には、User設定とWorkspace設定の違いも理解しておくと便利です。
User設定
User設定は、基本的にVSCode全体へ適用される設定です。
たとえば、User設定に次の内容を追加します。
{
"editor.formatOnSave": true
}普段使うすべてのプロジェクトで保存時フォーマットを利用したい場合に向いています。
Workspace設定
Workspace設定は、特定のプロジェクトやワークスペースに適用する設定です。
一般的には、プロジェクト内の次のファイルで管理します。
.vscode/settings.jsonたとえば次のように設定できます。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}プロジェクトごとに使用するフォーマッターを変えたい場合に便利です。
設定の優先順位に注意する
VSCodeには、User設定やWorkspace設定だけでなく、Workspace Folder設定や言語固有設定などもあります。
そのため、単純に「Workspace設定は必ずUser設定より優先される」と考えるのではなく、設定スコープや言語固有設定を含めて確認することが重要です。
保存時フォーマットが期待どおりに動かない場合は、User、Workspace、言語固有設定のそれぞれを確認するとよいでしょう。
チーム開発ではフォーマッター側の設定も共有する
チームでコードの書式を統一したい場合は、VSCodeの設定だけでなく、フォーマッター自体の設定ファイルも共有すると効果的です。
Prettierでは設定ファイルを利用できる
Prettierの場合は、たとえば次のような設定ファイルを利用できます。
.prettierrc
prettier.config.js
prettier.config.mjsプロジェクト内にこれらの設定ファイルを置いてGitで共有すれば、開発者ごとの環境差を減らしやすくなります。
Pythonでも設定ファイルを利用できる
Pythonの場合は、使用するツールによって次のようなファイルで設定を管理できます。
pyproject.toml
ruff.tomlエディター側だけでなく、フォーマッター側でもルールを管理しておくことで、ローカル環境やCIなどでも同じフォーマットルールを適用しやすくなります。
保存時に自動フォーマットされない原因と対処法
editor.formatOnSaveを有効にしたのにコードが整形されない場合は、いくつかの原因が考えられます。
フォーマッターがインストールされていない
対象言語に対応するフォーマッターが必要なのに、拡張機能がインストールされていないケースです。
たとえば、PythonでBlackを使用したい場合はBlack Formatter拡張機能が必要です。
まずは、対象言語に対応するフォーマッターが利用可能か確認しましょう。
デフォルトフォーマッターが設定されていない
複数のフォーマッターが利用できる場合、どれを使用すればよいのかVSCodeが判断できないことがあります。
その場合は、次の操作からデフォルトフォーマッターを設定します。
Format Document With...
↓
Configure Default Formatter...editor.defaultFormatterをsettings.jsonへ直接記述しても構いません。
ファイルの言語モードが間違っている
VSCode右下には、現在のファイルがどの言語として認識されているか表示されています。
たとえば、JavaScriptファイルがPlain Textとして認識されていると、JavaScript用フォーマッターが正常に利用できない場合があります。
右下の言語モードを確認し、対象言語として正しく認識されているか確認しましょう。
コードに構文エラーがある
フォーマッターによっては、コードを構文解析してから整形します。
そのため、コードに重大な構文エラーがあるとフォーマットできない場合があります。
たとえば、JavaScriptで次のように構文が壊れている場合です。
function hello( {このような場合は、まず構文エラーを修正してから再度フォーマットを試します。
Workspace設定などで別の設定が適用されている
User設定でeditor.formatOnSaveを有効にしていても、Workspace設定や言語固有設定の影響によって期待どおり動作しないことがあります。
特に、プロジェクト内に次のファイルがある場合は確認するとよいでしょう。
.vscode/settings.json言語固有設定についても確認してください。
PrettierのrequireConfig設定を確認する
Prettierには、設定ファイルが存在する場合のみフォーマットするための設定があります。
{
"prettier.requireConfig": true
}この設定が有効になっていると、Prettierの設定ファイルが存在しないファイルではフォーマットされないことがあります。
Prettierをインストールしているのに保存時フォーマットが動作しない場合は、確認してみるとよいでしょう。
Outputパネルでエラーを確認する
フォーマッター自体がエラーを出している場合は、VSCodeのOutputパネルを確認すると原因を特定しやすくなります。
コマンドパレットからOutput: Focus on Outputを実行し、使用しているフォーマッターの出力チャンネルを確認します。
エラーメッセージが表示されていれば、その内容をもとに設定やコードを修正できます。
手動でコードをフォーマットする方法
保存時フォーマットだけでなく、任意のタイミングでコードを整形することもできます。
Format Documentを実行する
対象ファイルを開き、右クリックから次の項目を選択します。
Format Documentキーボードショートカットも利用できます。
Windowsでは次のとおりです。
Shift + Alt + FmacOSでは次のとおりです。
Shift + Option + FLinuxでは、標準キーバインドとして次のショートカットが案内されています。
Ctrl + Shift + I保存時フォーマットが動かない場合は、まずFormat Documentを手動で実行できるか確認すると、原因を切り分けやすくなります。
Format On SaveとAuto Saveの違い
VSCodeでは、Format On SaveとAuto Saveを混同しないようにしましょう。
両者は別の機能です。
Format On Saveとは
Format On Saveは、ファイルが保存された際にコードをフォーマットする機能です。
設定は次のとおりです。
{
"editor.formatOnSave": true
}Auto Saveとは
Auto Saveは、ファイルそのものを自動的に保存する機能です。
たとえば、次のように設定できます。
{
"files.autoSave": "afterDelay"
}Auto Saveでは、一定時間後やフォーカスが外れたときなど、さまざまな条件でファイルを自動保存できます。
両方を組み合わせることもできる
次のように設定することもできます。
{
"files.autoSave": "afterDelay",
"editor.formatOnSave": true
}このようにすると、自動保存と保存時フォーマットを組み合わせて利用できます。
ただし、Auto SaveとFormat On Saveはあくまで別々の機能である点を理解しておきましょう。
Web制作で使いやすい設定例
HTML、CSS、JavaScript、TypeScript、JSONなどを扱う場合は、次のような設定が分かりやすいでしょう。
{
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}保存時フォーマットを全体で有効にしつつ、Web制作でよく使用する言語のデフォルトフォーマッターとしてPrettierを指定しています。
プロジェクトによって必要な言語だけ残して調整するとよいでしょう。
保存時自動フォーマットを使うメリット
保存時フォーマットを利用すると、コードの書式を手作業で整える負担を減らせます。
コードの見た目を統一しやすい
インデントやスペース、改行などをフォーマッターへ任せることで、ファイルごとの書式のばらつきを抑えられます。
特に複数人で開発する場合は、コードの見た目を統一しやすくなります。
コーディングに集中しやすい
コードを書くたびに細かな書式を意識する必要が減るため、処理内容やロジックに集中しやすくなります。
保存するだけで一定のルールに整えてくれる点は、大きなメリットです。
Gitの差分を確認しやすくなる
チーム全体で同じフォーマットルールを使用すれば、人による書式の違いが減ります。
不要な書式変更がGitの差分に大量に表示されるのを防ぎやすくなり、実際のコード変更を確認しやすくなる場合があります。
VSCodeで保存時フォーマットを設定する際のポイント
VSCodeで保存時にコードを自動フォーマットしたい場合は、まず次の設定を有効にします。
{
"editor.formatOnSave": true
}VSCode標準のフォーマッターを利用できる言語もありますが、Web制作ではPrettier、PythonではBlackやRuffなどの専用ツールを利用することもできます。
複数のフォーマッターが利用できる場合は、editor.defaultFormatterを設定して使用するフォーマッターを明確にしておくとよいでしょう。
また、自動フォーマットされない場合は、フォーマッターのインストール状況、デフォルトフォーマッター、言語モード、構文エラー、Workspace設定、フォーマッター固有の設定などを確認することが重要です。
保存時フォーマットを適切に設定しておけば、コードの整形作業を自動化でき、日々のコーディングをより効率的に進められます。
以上、VSCodeで保存時に自動フォーマットする方法についてでした。
最後までお読みいただき、ありがとうございました。
