14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSCode使ってるなら自動保存と自動フォーマットを使おう

Last updated at Posted at 2022-12-09

はじめに

この記事は長野高専 Advent Calendar 2022の10日目の記事です.主催者が一つしか記事を上げないのもどうかと思ったので急遽書き上げました.
ここではVSCodeの基本的な設定である,自動保存と自動フォーマット機能を紹介します.

自動保存とは?

自動保存とは文字通りファイルを編集した後に自動で保存してくれる機能です. VSCodeはデフォルトでは自動保存は無効になっており,編集した後のファイルには「●」がつくようになっています.
画像の場合だと,gradation.rsは編集してまだ保存していないので「●」がつくようになっており,bmp.rsは保存済みなので特に何も付いていません.

編集済みのファイルと未編集のファイル

普通ならgradation.rsを保存する場合はCtrl + s1や上のメニューから「Save」を選択することで保存することができますが,いちいち保存するのは少々面倒です.
そこでVSCodeには自動保存機能があります.これはファイルを編集した後,任意のタイミングで自動的にファイルが保存されるようになります.ファイルを編集した後は大抵の場合は保存しますし,元に戻したい場合もエディタのUndoやGitなどから戻せるので自動保存機能は基本的に有効にしておいたほうがいいでしょう.

自動保存機能を有効にする方法

自動保存機能は設定メニューから有効にすることが可能です.設定メニューは左下の歯車のアイコンから「Settings」を選択したりCtrl + ,2から開くことができます.

設定メニューの開き方

設定メニューの検索欄に「autosave」と入力すると,Files: Auto Saveという項目が出てきます.ここから自動保存機能の有効化無効化の設定やどのタイミングで保存するかを設定することができます.

設定項目は4項目あります.

  • off: 自動保存機能を無効化します(デフォルト)
  • afterDelay: 最後に編集してから任意の時間が経つと保存されます
  • onFocusChange: 編集中のファイル以外にフォーカスが当たる(別のファイルを開いたり,ターミナルにカーソルを向けるなど)と保存されます
  • onWindowChange: VSCode以外のウィンドウにフォーカスが当たると保存されます

afterDelayの秒数設定はFiles: Auto Save Delayから行うことができ,デフォルトでは1000(1秒)になっています.

Auto Saveのオプション一覧

自動フォーマットとは?

多くのプログラミング言語の場合,演算子の間の空白や改行などは自由に挿入することができますが,きちんと揃えないととても読みにくいコードになってしまいます.これを機械的に揃えてくれるツールがフォーマッタです.

下記の画像がフォーマット前のコードです.インデントや空白がぐちゃぐちゃでかなり読みづらいです.

フォーマット前のコード

下記の画像がフォーマット後のコードです.インデントや空白が揃えられ,前よりも読みやすくなっています.

フォーマット後のコード

ほとんどの言語でフォーマッタが開発・提供されており,中には言語やフレームワークに組み込まれている場合もあります.3このフォーマッタでコードの体裁を整えることをフォーマットといい,VSCodeでもShift + Alt + f4でファイル全体をフォーマットすることができます.5
ただ,いちいちコードを書いた後にショートカットキーを使ってフォーマットするのは面倒です.ここで使うのが自動フォーマット機能です.この機能を有効にするとファイルを保存したりコードをコピペしたあとに自動的にフォーマッタを動作させてフォーマットすることができます.

自動フォーマット機能を有効にする方法

自動フォーマット機能も自動保存機能と同様に設定メニューから有効にする事が可能です.検索欄に「format」と入力すると,Editor: Format On Paste/Save/Typeという項目が出てきます.これはそれぞれ「コードのコピペ後」,「ファイルの保存後」,「改行後」のフォーマットを有効にするかどうかの設定です.なお,改行後のフォーマットは一部フォーマッタが未対応です.ファイルの保存後のフォーマットは自動保存機能と一緒に使うことで自動保存からの自動フォーマットが可能です!

自動フォーマット機能の設定欄

最後に

VSCodeはそのままでもそれなりに便利ですが,きちんと設定することで更に便利にすることできます.ここで紹介したのはVSCodeの便利機能のほんの一部なので自分にあった設定をして,コーディング環境を整えていきましょう!

  1. macOSの場合はCommand + sで保存できます.

  2. macOSの場合はCommand + ,で設定メニューを開くことができます.

  3. Go言語やDenoなど.

  4. macOSの場合はShift + Option + fでファイル全体をフォーマットすることできます.

  5. 一部言語はフォーマッタ統合用の拡張機能が必要です.

14
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?