VSCodeを自分好みに育てる！新人エンジニアのためのsettings.json徹底ガイド

こんにちは。ゆうせいです。

VSCode（ブイエスコード）をインストールしてみたけれど、「なんだか文字が小さくて読みにくいな…」「保存するたびに手作業でコードを整えるのが面倒！」なんて感じていませんか？

プログラミングの世界に足を踏み入れたばかりの皆さんにとって、エディタは毎日使う大切な「相棒」です。相棒が使いにくいと、学習の効率も下がってしまいますよね。

実は、VSCodeには「settings.json（セッティングス・ドット・ジェイソン）」という、あなた専用の最強の相棒に育てるための「設定ファイル」が用意されています。

この記事では、新人エンジニアの皆さんに向けて、settings.jsonとは何か、そして具体的にどんな設定をすれば開発が快適になるのかを、優しく解説していきます！

settings.jsonって、いったい何者？

settings.jsonとは、ひと言でいうと「VSCodeの全設定が書き込まれた指示書」のようなものです。

設定画面（GUI）との違い

VSCodeの左下にある歯車マークから「設定」を開くと、マウスでポチポチと選べる設定画面（GUI＝ジーユーアイと言います）が出てきますよね。

もちろん、そこから設定を変更するのも簡単で良い方法です。

では、なぜわざわざsettings.jsonというファイルを使うのでしょうか？

それは、このファイルが「JSON（ジェイソン）」という形式のテキストファイルだからです。

JSONって何？

JSONは、データを保存したり交換したりするためによく使われる、シンプルなメモ帳のような書き方ルールです。

難しく考えなくて大丈夫。「設定の名前」と「設定したい内容」をペアにして書いていくだけです。

例えば、こんな感じです。

{
    "editor.fontSize": 16,
    "editor.tabSize": 2
}

これは、「editor.fontSize（エディタの文字サイズ）を 16 にしてください」そして「editor.tabSize（タブキーを押したときの幅）を 2 にしてください」という2つの指示をVSCodeに伝えています。

settings.jsonを使うメリット

このファイルで管理することには、大きなメリットがあります。

• メリット1：設定の引越しが超カンタン！新しいパソコンを買ったとき、このsettings.jsonファイルさえコピーして持ってくれば、一瞬でいつもの使い慣れたVSCode環境を再現できます。
• メリット2：細かい設定ができるGUIの設定画面には表示されていないような、マニアックで詳細な設定も、settings.jsonになら直接書き込めます。
• メリット3：設定の共有がしやすいチームで開発するとき、「みんなでお揃いの設定にしよう！」となったら、このファイルを共有するだけです。

デメリットは？

もちろん、いいことばかりではありません。

• デメリット：書き間違いに弱いJSONのルールは厳格です。例えば、設定と設定の間にある「,（カンマ）」を忘れたり、全角スペースが混じったりするだけで、ファイル全体がエラーになってしまいます。

とはいえ、VSCodeが賢く「ここ間違ってるよ！」と赤線で教えてくれるので、心配しすぎなくても大丈夫ですよ。

settings.jsonを開いてみよう！

では、さっそくあなたのsettings.jsonを開いてみましょう。一番簡単な方法をご紹介します。

1. Windowsなら Ctrl + Shift + P を、Macなら Cmd + Shift + P を押してください。
2. 画面上部に「コマンドパレット」という入力欄が出てきます。
3. そこに「settings json」と入力してみてください。
4. 「基本設定: ユーザー設定を開く (JSON)」という選択肢が出てくるはずです。
5. それをクリック！

これで、あなたのsettings.jsonファイルが開きます。最初は { } とだけ書かれているか、いくつかの設定がすでに入っているかもしれませんね。

新人エンジニアに絶対おすすめ！定番設定3選

では、具体的に何を設定すればよいのでしょうか？

まずは「これを設定しておけば間違いない！」という定番の設定を3つ、ご紹介します。

以下の例を、すでにある { } の中にコピー＆ペーストしてみてください。（もし既に何か書かれていたら、カンマで区切って追加してくださいね）

{
    // すでに何か設定がある場合は、
    // その最後の行にカンマ「,」を足してから
    // 以下の設定を追加してください。

    // 1. 保存時に自動でコードを整形する
    "editor.formatOnSave": true,

    // 2. ファイルを自動で保存する
    "files.autoSave": "onFocusChange",

    // 3. 文字サイズを見やすくする (お好みで数字を変えてください)
    "editor.fontSize": 16
}

1. editor.formatOnSave

これは「ファイルを保存した瞬間に、自動でコードをキレイに整列させてね」という設定です。

インデント（字下げ）がガタガタだったり、不要なスペースがあったりすると、コードはとても読みにくくなります。これを true（オン）にしておくだけで、保存するたびにVSCodeが美しいコードに仕上げてくれます。

これはもう、絶対に設定してください！作業効率が劇的に上がります。

2. files.autoSave

うっかり保存し忘れて、ブラウザをリロードしても変更が反映されない…なんて経験はありませんか？

この設定を onFocusChange にしておくと、「VSCode以外の別のウィンドウ（例えばブラウザなど）をクリックした瞬間」に自動で保存してくれます。

これで保存忘れとはおさらばです！

3. editor.fontSize

これはそのまま、文字の大きさです。

デフォルトは小さすぎると感じることが多いので、16や18など、ご自身が見やすいサイズに変更してみましょう。目が疲れにくくなりますよ。

これからどう学ぶ？

settings.jsonの世界は、とても奥が深いです。

今日ご紹介したのは、ほんの入り口に過ぎません。

まずは、今日設定した3つを使いこなしながら、「ここの色を変えたいな」「この線の表示を消したいな」と思ったら、その都度「VSCode 設定 〇〇」のように検索して、settings.jsonに1行ずつ追加していくのがおすすめです。

次のステップとしておすすめなのは、以下の2つです。

1. keybindings.json を触ってみるこれは、キーボードショートカットを自由に設定できるファイルです。settings.jsonの隣にあります。よく使う操作を押しやすいキーに割り当ててみましょう。
2. 拡張機能（Extensions）を入れてみるVSCodeの真の力は、拡張機能にあります。例えば、「Prettier」というコードフォーマッター（コードをキレイにする専門家）の拡張機能を入れ、settings.jsonで「デフォルトのフォーマッターはPrettierに任せる！」と設定すると、さらに強力になります。

設定をいじってエディタが壊れることはありませんから、怖がらずに色々と試してみてください。あなただけの設定を育てて、快適なコーディングライフを送りましょう！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

最新の投稿

• 山崎講師2025年10月26日Pythonのimport完全ガイド！パッケージとモジュールの階層構造をスッキリ理解しよう
• 山崎講師2025年10月26日Python関数の引数の罠！正しい順番をマスターしてエラーを回避しよう
• 山崎講師2025年10月26日Pythonの「浅いコピー」と「深いコピー」の違いとは？コピーの罠を徹底解説！
• 山崎講師2025年10月26日VSCodeを自分好みに育てる！新人エンジニアのためのsettings.json徹底ガイド