Web制作

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

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

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

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

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

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

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

VSCode:Code → 基本設定 → 設定

VSCode:Code → 基本設定 → 設定

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

VSCode:設定 → 設定の検索

VSCode:設定 → 設定の検索

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

VSCode:Auto Save設定

VSCode:Auto Save設定

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

 

Auto Save

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

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

VSCode:Auto Save設定項目

VSCode:Auto Save設定項目

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

VSCode:Auto Save設定項目の説明

VSCode:Auto Save設定項目の説明

  • off:自動保存しない(デフォルト設定)
  • afterDelay:Auto Save Delayで指定した時間経過後に自動保存
  • onFocusChange:エディタがフォーカスを失ったときに自動保存
  • onWindowChange:ウィンドウがフォーカスを失ったときに自動保存

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

 

afterDelay

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

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

 

onFocusChange

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

VSCode:Auto Save(onFocusChange)

VSCode:Auto Save(onFocusChange)

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

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

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

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

VSCode:style.cssタブ追加

VSCode:style.cssタブ追加

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

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

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

 

onWindowChange

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

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

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

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

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

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

 

Auto Save Delay

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

VSCode:Auto Save Delay

VSCode:Auto Save Delay

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

 

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

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

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

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

VSCode:ファイル → 自動保存

VSCode:ファイル → 自動保存

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

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

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

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

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

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

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

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

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

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-