VSCode自動保存の設定方法【画像と動画で解説】

VSCodeって自動で保存できない？

VSCodeでの保存方法ですが、デフォルトだとコードを入力・編集したら手動で保存する必要があります。

これをコーディングと同時に自動で保存されるように設定する方法を解説していきます。

画像はMac環境での解説ですが、Windowsでも基本は同じです。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

VSCodeの自動保存の設定方法を解説

まずはVSCodeを開いて画面左下にある歯車アイコンをクリックします。

VSCode：歯車の設定アイコンをクリック

そして設定をクリックします。

VSCode：設定アイコン → 設定をクリック

もしくは画面左上の『Code → 基本設定 → 設定』でもOKです。

VSCode：Code → 基本設定 → 設定

ここで設定の検索でauto saveと入力します（下の画像ではよく使用するものとして表示されますが）

VSCode：設定 → 設定の検索

何件か項目が表示されますが、今回の目的はこちらの2つです。

VSCode：Auto Save設定

これらの設定は選択項目を変更したり数値を入力すれば自動で設定が保存されます（保存ボタンなどはありません）

Auto Save

まずは『Auto Save』から設定します。

『Auto Save』は4種類あります。

VSCode：Auto Save設定項目

それぞれの項目にマウスカーソルを乗せると説明が表示されます。

VSCode：Auto Save設定項目の説明

それでは『off』以外の解説を補足していきます。

afterDelay

これは後述する『Auto Save Delay』で指定した時間経過後に自動保存される設定で『Auto Save Delay』のデフォルトは1000ミリ秒（1秒）です。

1000ミリ秒だとほぼ入力後すぐに保存される感じで、通常はこのままでいいかと思います。

onFocusChange

これは『エディターがフォーカスを失ったときに自動保存される設定』で、例えば以下のHTMLファイルを編集したとします。

VSCode：Auto Save（onFocusChange）

ここで上の赤枠は白丸が表示されているので『編集されたけどまだ保存されていない』という状態です。

そして下の赤枠は『HTMLファイル内のフォーカスがあたっている箇所』になります。

この状態はまだエディターがフォーカスを失っていないので、自動保存されていません。

ここで別のファイル、例えば『style.css』のタブを選択した場合、エディタがフォーカスを失うので自動保存されます。

VSCode：style.cssタブ追加

実際の動きはこんな感じです。

VSCode：onFocusChangeで自動保存される動き

onWindowChange

これは『ウィンドウがフォーカスを失ったときに自動保存される設定』で、先ほどはHTMLファイルからCSSファイルを選択した時に自動保存されましたが、これでは自動保存されません。

今回はHTMLファイルやCSSファイルなどエディタ内でフォーカスがあたっている時ではなく、エディタ外の別ファイルを開いた時などに自動保存されます。

実際の動きを見てみます。

VSCode：onWindowChangeで自動保存される動き

HTMLファイルからCSSファイルを選択しても自動保存されませんが、エディタとは無関係のメモ帳を選択したら白丸が消えて自動保存されたのが分かると思います（上記動画はWindowsです）

Auto Save Delay

これは先ほどafterDelayでも出てきましたが、編集されてから自動保存されるまでの時間を設定します。

VSCode：Auto Save Delay

デフォルトは1000ミリ秒で、画像にも書いてある通り『afterDelay』が設定されている場合のみ適用されます。

『自動保存』にチェックを入れる

そして最後に『自動保存』にチェックを入れます。

自動保存の設定はさっきやったと思うかも知れませんが、これはまた別の設定となります。

画面左上の『ファイル』をクリックすると『自動保存』という項目があります。

VSCode：ファイル → 自動保存

これはクリックするとチェックが入り、またクリックするとチェックが外れます。

このチェックが外れている場合『Auto Save』は『off』になります。

そしてチェックを入れると『Auto Save』は『afterDelay』になります。

もし自動保存にチェックが入っていて『Auto Save』が『onFocusChange』や『onWindowChange』になっていても、自動保存のチェックを外してからまたチェックを入れると自動的に『afterDelay』になります。

ちょっとややこしいので実際の動きを見てみましょう。

最初は『Auto Save』を『onFocusChange』にしているので、そこに注目して下さい。

自動保存にチェック（onFocusChange）→ 自動保存のチェック外す（off）→ 自動保存にチェック（afterDelay）

となります（上記動画はWindowsですが、Macでも同じです）

『Auto Save』も『自動保存』も一度設定したら変更する事は滅多にないかと思いますが、PCを買い替えた時などにまた設定し直す事もあるかも知れないので、その時に思い出して頂ければと思います。

まとめ

今回はVSCodeで自動保存の設定方法を解説しました。

最初は自動保存しないようにしていましたが、やはり自動保存された方が使いやすいですね。

以上になります。