VSCode Web制作 コーディング

VS Codeの自動保存設定

VS Codeって自動で保存できない?

今回はそんな疑問にお答えします。

VS Codeで自動保存する設定

まずはVS Codeを開いて画面左下にある歯車マークをクリックします。

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

もしくは画面左上のファイル → ユーザー設定 → 設定でもOKです。

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

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

 

Auto Save

Auto Saveは4種類あります。

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

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

それではoff以外を補足していきます。

 

afterDelay

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

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

 

onFocusChange

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

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

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

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

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

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

 

onWindowChange

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

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

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

htmlファイルからcssファイルを選択しても自動保存されませんが、エディタとは無関係のメモ帳を選択したら白丸が消えて自動保存されたのが分かると思います。

 

Auto Save Delay

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

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

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

 

自動保存

そして最後に自動保存の設定です。

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

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

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

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

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

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

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

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

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

となります。

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

-VSCode, Web制作, コーディング