2026.04.29

VSCode初期設定｜初心者のうっかりミスを防ぐおすすめ設定6選

PC操作

VSCodeをインストールしてコードを書き始めると、保存し忘れや原因不明のエラーといった小さなミスに時間を取られることがあります。こうしたミスの多くはVSCodeの初期設定で防げますが、設定項目が多くどれを優先すべきか迷いがちです。この記事では、初心者がつまずきやすいミスに絞って、最初に入れておきたい初期設定を紹介します。

この記事で学べること：

保存し忘れや上書きで「コードが消えた」を防ぐ設定
全角スペース混入によるエラー防止、スクロール中の迷子を防ぐ表示設定
インデントの乱れを保存・貼り付け時に自動で整える設定
settings.jsonですべての設定をコードで一括管理する方法

小さなミスも積み重なれば大きな時間のロスになります。こうした問題に気づき、環境を自分で整えていく経験は、開発のあらゆる場面で活きる力になります。ぜひ自分に必要な設定を取り入れて、使いやすいVSCodeを構築してみてください。

VSCode設定画面の表示方法

VSCodeの設定画面の表示は、以下の手順で開きます。

ショートカットキー（Windows： Ctrl + , 、Mac：⌘ + ,）
ファイルメニュー→ユーザー設定→設定

本記事での各セクションの解説は、設定画面を開いた状態からの手順を紹介します。

VSCodeの自動保存とファイル復元の設定

files.autoSave と Local History を設定しておくと、「保存し忘れ」や「誤った上書き」でコードが消えるリスクを防げます。

ファイル自動保存：files.autoSave

files.autoSaveは、手動で保存操作をしなくてもVSCodeが自動的にファイルを保存する設定です。

ファイル保存のし忘れで「修正が反映されない→バグが直っていない？」と勘違いするのは、初心者によくあるパターンです。

設定方法：

検索欄に Auto save と入力
afterDelay を選択

ファイルの変更履歴と復元：Local History

Local Historyは、ファイルを保存するたびにその時点の状態をローカルに自動記録する機能です。

「動いていたコードを変更したらバグが発生して、どこを変えたか分からない」という場面で、変更前の状態に戻せる保険になります。

**設定方法：**デフォルトで有効ですが、念のため確認しておきましょう。

検索欄に Local History と入力
Enabled欄にチェックが入っていれば有効

復元方法：

復元したいファイルを開く
アクティビティバーの「タイムライン」を開き、戻したい時点の履歴を選択
右クリック→コンテンツの復元を選択し、「復元」をクリックする

VSCodeのスペースとスクロールの表示設定

editor.renderWhitespaceとSticky Scrollを設定しておくと、「見えない空白の混入」や「スクロール中の迷子」によるミスを防げます。

空白文字の表示：editor.renderWhitespace

editor.renderWhitespaceは、スペースやタブなどの空白文字をエディタ上に記号として表示する設定です。

日本語入力時に全角スペースが混入し、Pythonのインデントエラーになるケースは初心者に多いトラブルです。空白を可視化しておけば、コードを書いた時点で気づけます。

設定方法：

検索欄に renderWhitespace と入力
all（すべて表示）または boundary（単語の境界のみ）を選択

関数名を画面上部に固定表示：Sticky Scroll

Sticky Scrollは、スクロール中も現在表示しているコードが属する関数名やクラス名をエディタ上部に固定表示する機能です。

コードが長くなると「今、どの関数の中を見ているんだっけ」と迷うことがあります。スコープが常に表示されるため、読み違えや編集箇所の取り違えを防げます。

**設定確認：**デフォルトで有効ですが、念のため確認しておきましょう。

検索欄に stickyScroll と入力
Enabled欄にチェックが入っていれば有効

VSCodeの自動フォーマット設定

editor.formatOnSaveとeditor.formatOnPasteを設定しておくと、保存・貼り付けのタイミングでコードが自動整形され、インデントやスペースの乱れを防げます。

保存時の自動フォーマット：editor.formatOnSave

editor.formatOnSaveは、ファイルを保存するたびにコードフォーマッターを自動実行する設定です。

インデントやスペースの乱れを手動で直すのは初心者には負担が大きく、チーム開発ではレビューで指摘されやすいポイントでもあります。保存時に自動で整形されれば、小さなミスを防げます。

設定方法：

検索欄に formatOnSave と入力
チェックを入れて有効化

※自動整形にはフォーマッターの拡張機能が必要です。JavaScript/TypeScriptには「Prettier」、Pythonには「Black」が広く使われています。

貼り付け時の自動フォーマット：editor.formatOnPaste

editor.formatOnPasteは、コードを貼り付けた際にフォーマッターを自動実行する設定です。

Webサイトや他のファイルからコードをコピーすると、インデントが崩れた状態で貼り付けられることがあります。貼り付け直後に自動整形されれば、手直しの手間が省けます。

設定方法：

検索欄に formatOnPaste と入力
チェックを入れて有効化

VSCodeのsettings.jsonで設定を管理する方法

ここまで紹介した設定は、settings.jsonというファイルにコードとして記述して管理できます。コード化しておくと、PCを新しくした際の環境再現や、チームメンバーへの設定共有が簡単になります。

settings.jsonの設定

settings.jsonとは、VSCodeの設定をJSONフォーマットで記述・管理するファイルです。UIの設定画面で変更した内容はすべてsettings.jsonに自動反映されます。

設定方法：

コマンドパレット（Windows：Ctrl+Shift+P、Mac：⌘+Shift+P）を開く
Open User Settings (JSON) と入力して選択

以下は、セクション1〜3で紹介した設定をまとめたコード例です。settings.jsonに貼り付けるだけで、すべての設定を一括で適用できます。

{
  // 【セクション1】自動保存とファイル復元
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // 【セクション2】スペースとスクロールの表示
  "editor.renderWhitespace": "boundary",
  "editor.stickyScroll.enabled": true,

  // 【セクション3】自動フォーマット
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true
}

既存のsettings.jsonに設定がある場合は、{} の中に各行を追加してください。

VSCode初期設定に関するよくある質問

VSCode初期設定に関するよくある質問を以下にまとめました。

Q：VSCodeの基本設定はどこにありますか？

VSCodeの基本設定は、メニューの「ファイル」→「ユーザー設定」→「設定」から開けます。ショートカットはWindows：Ctrl+,、Mac：⌘+,です。UIで変更した内容は、自動的にsettings.jsonに保存されます。

Q：VSCodeの設定をデフォルトに戻すにはどうすればいいですか？

設定画面で各項目右側の歯車アイコンから「設定値をリセット」を選択するとデフォルトに戻せます。全設定を一括でリセットしたい場合は、settings.jsonの内容を{}だけにしてください。

Q：settings.jsonとUIの設定画面はどう使い分ければいいですか？

UIの設定画面は項目を探しやすく、初めての設定変更に向いています。settings.jsonはコードとして管理できるため、チームへの共有や複数端末での環境再現に便利です。どちらで変更しても同じファイルに反映されます。

Q：自動フォーマットが効かない場合はどうすればいいですか？

対応するフォーマッターの拡張機能がインストールされているか確認してください。設定画面でeditor.defaultFormatterと検索し、使用中の言語に合ったフォーマッターを指定すると解決することがあります。

Q：自動保存を有効にするとデメリットはありますか？

意図しないタイミングで保存される可能性はありますが、Local Historyを併用すれば変更前の状態に戻せるため、大きなリスクにはなりません。

まとめ

本記事では、初心者がVSCodeを使い始める際に設定しておきたい、うっかりミスを防ぐための初期設定を紹介しました。

学んだ内容：

この記事の要点は以下の通りです。

files.autoSaveとLocal Historyによる「保存し忘れ」「誤った上書き」の防止
editor.renderWhitespaceとSticky Scrollによる「空白混入エラー」「スクロール中の迷子」の防止
editor.formatOnSaveとeditor.formatOnPasteによるインデントの乱れの自動解消
settings.jsonによる設定の一括管理

紹介したsettings.jsonのコードをコピーして貼り付ければ、今すぐすべての設定を反映できます。小さなミスでも積み重なれば多くの時間になります。今回紹介した初期設定以外にも便利な設定を取り入れることで作業効率が向上し、その分コードを書くことや学習に集中できます。ぜひ自分好みの使いやすいVSCodeを構築してみてください。

VSCodeの関連記事

本記事で紹介した初期設定と合わせて、以下の記事も参考にしてください。

参考資料

以下のリンクは、この記事で解説した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご覧ください。

【番外編】USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話

IT未経験者必見 USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話

プログラミング塾に半年通えば、一人前になれると思っているあなた。それ、勘違いですよ。「なぜ間違いなの？」「正しい勉強法とは何なの？」ITを学び始める全ての人に知って欲しい。そう思って書きました。是非読んでみてください。

「フリーランスエンジニア」

近年やっと世間に浸透した言葉だ。ひと昔まえ、終身雇用は当たり前で、大企業に就職することは一種のステータスだった。しかし、そんな時代も終わり「優秀な人材は転職する」ことが当たり前の時代となる。フリーランスエンジニアに高価値が付く現在、ネットを見ると「未経験でも年収400万以上」などと書いてある。これに釣られて、多くの人がフリーランスになろうとITの世界に入ってきている。私もその中の1人だ。数年前、USBも知らない状態からITの世界に没入し、そこから約2年間、毎日勉学を行なった。他人の何十倍も努力した。そして、企業研修やIT塾で数多くの受講生の指導経験も得た。そこで私は、伸びるエンジニアとそうでないエンジニアをたくさん見てきた。そして、稼げるエンジニア、稼げないエンジニアを見てきた。

「成功する人とそうでない人の違いは何か？」

私が出した答えは、「量産型エンジニアか否か」である。今のエンジニア市場には、量産型エンジニアが溢れている！！ここでの量産型エンジニアの定義は以下の通りである。

比較的簡単に学習可能なWebフレームワーク（WordPress, Rails）やPython等の知識はあるが、ITの基本概念を理解していないため、単調な作業しかこなすことができないエンジニアのこと。

多くの人がフリーランスエンジニアを目指す時代に中途半端な知識や技術力でこの世界に飛び込むと返って過酷な労働条件で働くことになる。そこで、エンジニアを目指すあなたがどう学習していくべきかを私の経験を交えて書こうと思った。続きはこちらから、、、、