この記事は新歓ブログリレー2026の41日目の記事です。

はじめに

こんにちは!! 主にアルゴリズム班とゲーム班で活動している25BのHaruです!!
新入生のみなさん、大学生活が始まってはや一週間が経ちましたが、キャンパスライフはいかがですか?

さて、traPに入会した新入生の中には、「大学からパソコンでいろいろやってみたいけど、何すれば良いかわからない」という方も多くいるのではないでしょうか。
この記事では、プログラミングをするなら絶対使うことになるであろうVSCodeでの作業を快適にするあれこれをまとめていきます!!

VSCodeってなに?

VSCode (Visual Studio Code) は、Microsoftが提供している無料で超軽量で高性能なオープンソースエディタです。
要するに、めっちゃ凄いテキストエディタ(プログラムとか書くやつ)です。

世の中にはたくさんのテキストエディタが存在していますが、何の言語で、何の目的でプログラミングをするにしても、とりあえずVSCodeを使っておけば間違いないと思います。

僕は普段競技プログラミング(Python)とUnityでのゲーム開発(C#)をしていますが、どちらもVSCodeを用いてコーディングしていますし、大学のレポートやちょっとしたメモ(markdownやTypst, LaTeX)も、すべてVSCodeで書いています。
参考までに、僕は1日1,2時間くらい、長いときだと6時間以上も開いています。

もちろんどれくらいVSCodeを使うかは人に依りますが、プログラミングをするならかなりの時間VSCodeと睨めっこすることになるのは確かです。なら、できる限り快適な開発環境を整えて、QOLを上げたいものですよね。

というわけで、この記事では、そんなVSCodeでの開発環境を快適なものにするために僕がやっていることを書き連ねていこうかと思います!!

おすすめの拡張機能10選

まずは、僕が(個人的に)おすすめの拡張機能を10個、紹介していきます。

1. Japanese Language Pack for Visual Studio Code

マーケットプレイスはこちら
VSCodeが日本語表示になります。
よっぽど英語に自信が無い限りは、まずこれを入れましょう。

2. GitHub Copilot Chat

マーケットプレイスはこちら
GitHub Copilotという、GitHubが提供しているコーディングAIをVSCode上で使えるようになります。
学生はGitHub EducationによりGitHub Copilotを無料で使用できるので、ぜひ申請しておきましょう。
この拡張機能を入れると、セカンダリーバー(右側に出てくるサイドバー)がCopilotとのチャットに変わります。

3. Error Lens

マーケットプレイスはこちら
エディタ上のエラーが出る行にエラー文が表示されるようになります。
VSCodeの標準機能でもエラーの出る箇所に波線は表示されますし、エラー文が大分うるさいので好みが分かれます。僕は好きです。

4. GitLens

マーケットプレイスはこちら
gitを用いた共同開発において、「誰がいつ何を変更したか」を簡単に確認できるようになります。
共同開発をする上でかなり強力です。バグの犯人探しに便利

5. Git Graph

マーケットプレイスはこちら
見やすいgitのコミットグラフを表示することができるようになります。(VSCode標準のコミットグラフは正直見づらい)
また、コミットグラフ上でブランチの作成やリベース等の操作を行うことができます。

6. Better Comments

マーケットプレイスはこちら
コメントの色を自由に変えることができるようになります。
「ここ、バグが埋まってるよ!!」的なコメントをめっちゃ目立つ色に変えられるので、便利です。
共同作業中は同じ設定をメンバーに強要したくなる。
細かい設定はsettings.json(後述)で行えます。

7. Code Spell Checker

マーケットプレイスはこちら
変数名等でスペルミスをしていた場合に波線を引いてくれます。
スペルミスによるバグは見つけづらく、かなりストレスになります。この拡張機能を入れておくことで、そのようなバグを未然に防ぐことができます!
デフォルトではアメリカ英語の一般的な語彙が登録されていますが、他言語用拡張機能を入れることで他言語も登録することができます。
また、settings.json(後述)から自分用の辞書登録もできます。

8. Material Icon Theme

マーケットプレイスはこちら
ファイル/フォルダのアイコンの種類が増えたり、見た目が良い感じになったりします。
VSCode標準でもファイルの拡張子ごとにアイコンは変わりますが、この拡張機能を入れるとアイコンがより色鮮やかに、見やすくなります。
無いと困るわけでは全く無いけど、あった方が気分が上がる気がします

9. indent-rainbow

マーケットプレイスはこちら
インデント幅に応じて色がつくようになります。
Pythonでコーディングするときにはかなり便利ですが、それ以外の言語だとそこまで必要ではない気がします。(僕はPythonにしか使っていません)
色の設定はsettings.json(後述)で行えます。

10.(ネタ枠) Power Mode

マーケットプレイスはこちら
このブログを執筆するにあたって先輩方のブログを漁っていた際に見つけました。
文字を打つたびにパーティクルが出たり、画面が出たり、コンボが発動したりします。(??)
設定の自由度が無駄にかなり高いのがポイント。
とにかく画面がうるさくなるので、おすすめはしませんw

settings.jsonを用いた設定

VSCodeではCtrl+, (MacはCmd+,)で設定を開くことができ、様々な設定をGUIから行うことができます。
ここで、設定ウィンドウの右上の「紙と矢印のアイコン」(ホバーすると「設定(JSON)を開く」と出てくる)を押すと、settings.jsonという、json形式の設定(ある種、設定の本体)が表示されます。
基本的にはGUIの設定だけで事足りますが、より高度な設定をしたい場合やGUIがめんどくさい場合はこのsettings.jsonを使うことになります。

では、settings.jsonで設定できることですが、大体何でもいじれます。
全ての設定を確認したい場合は、GUIの設定ウィンドウやVSCode公式サイトで確認できます。また、コマンドパレット(F1かCmd+Shift+P (MacはF1かCmd+Shift+P))でdefault settingsと検索して出てくるdefaultSettings.jsoncには、文字通り全ての設定の一覧とその規定値が1万8千行のjsonファイルで出てきます。う〜ん、見づらい。

そんな大量の設定を全て取り上げることはできないので、ここでは先ほど取り上げた拡張機能たちに関すること$+\alpha$をまとめていこうかと思います。

(ちなみに、settings.json内で""と書くと、コード補完で設定一覧が出てきます。結局これが一番見やすかったり)

Better Comments

コメントに色をつける拡張機能でしたね。
以下のように書くと、//{tag}で始まるコメントが設定した色で表示されます。(//はコメントの記号。言語に依って違います)

{
    "better-comments.tags": [
        {
            "tag": "!",
            "color": "#FF2D00FF",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "TODO",
            "color": "#FF8C00FF",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        }
    ]
}

Code Spell Checker

コード内のスペルミスをチェックしてくれる拡張機能です。

辞書に追加したい単語を書き連ねた.txtファイルを作成し、以下のように辞書名とそのパスを書くことで、カスタム辞書を登録できます。

{
    "cSpell.customDictionaries": {
        "My_dict": {
            "name": "My_dict",
            "path": "/Users/Haru_18/Hoge/MyDict.txt" // .txtファイルの絶対パス
        }
    }
}

また、以下のように書くことで言語ごとに辞書を設定することができます。

{
    "cSpell.languageSettings": [
        { "languageId": "*", "locale": "en", "dictionaries": ["MyDict"] },
        { "languageId": "python", "dictionaries": ["PythonDict"] },
        { "languageId": "typescript", "dictionaries": ["TypescriptDict", "Hoge"] }
    ]
}

indent-rainbow

インデントに深さに応じて色をつけてくれる拡張機能です。
以下のように色を設定できます。一番上が最も浅いインデントで、下に行くほど深いインデントの色になります。設定した数(下の例では7)より深いインデントでは、設定値が周期的に繰り返されます。

{
    "indentRainbow.colors": [
        "rgba(0,0,255,0.2)",
        "rgba(43,43,212,0.2)",
        "rgba(85,85,170,0.2)",
        "rgba(128,128,128,0.2)",
        "rgba(170,170,85,0.2)",
        "rgba(213,213,43,0.2)",
        "rgba(255,255,0,0.2)"
    ],
    "indentRainbow.includedLanguages": ["python"] //書かなかった場合、全言語に適用される
}

(R,G,Bは0~255なのにアルファ値が0~1なのなんなんでしょうね)

テーマ設定

ここからは拡張機能関係無い設定。
まずはVSCode全体のテーマの設定です。(この記事の中でこれが一番重い)

VSCodeには標準でたくさんの配色テーマが用意されており、Cmd+K→Cmd+Tで一覧を開くことができます。
僕のおすすめは「ダーク モダン」です。みなさんもお気に入りのテーマを見つけてみてください!

､､お気に入りのテーマを見つけるのも良いですが、実はsettings.jsonではVSCodeの配色をとても細やかに設定できます。

以下は、僕が実際に使用している配色設定です。

{
    "workbench.colorTheme": "Dark Modern",
    "workbench.colorCustomizations": {
        "activityBar.background": "#051028",
        "statusBar.background": "#000000",
        "titleBar.activeBackground": "#0e0e0e",
        "editor.background": "#09090e",
        "editorCursor.foreground": "#dcb700",
        "editor.selectionBackground": "#0d6ed0aa",
        "editor.wordHighlightBorder": "#c8a217",
        "editor.wordHighlightStrongBorder": "#c8a217",
        "tab.activeBackground": "#1b1b1b",
        "tab.activeBorderTop": "#0e5de4",
        "tab.inactiveBackground": "#000000",
        "tab.inactiveForeground": "#777777",
        "sideBar.background": "#121212",
        "terminal.background": "#151515"
    }
}

設定一覧は公式サイトか閲覧することができます。また、settings.jsonのコード上で設定名をホバーすると、その説明を読むことができます。

かっこにまつわる設定

先ほど、"workbench.colorCustomizations"で配色をいじれることを述べましたが、ここでは かっこ の色や諸々の設定をすることができます。

僕の配色、設定がこちら

{
    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#7b15dbff",
        "editorBracketHighlight.foreground2": "#155ddbff",
        "editorBracketHighlight.foreground3": "#008d07ff",
        "editorBracketHighlight.foreground4": "#d0d621ff",
        "editorBracketHighlight.foreground5": "#d0a01cff",
        "editorBracketHighlight.foreground6": "#ac0303ff"
    },
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true
}

"editorBracketHighlight.foreground"で外からn番目のかっこの色を設定できます。(最大6)
そして、"editor.bracketPairColorization.enabled": trueにすることでこの設定をアクティブにします。
"editor.guides.bracketPairs": trueは、対応する開きかっこと閉じかっこを繋ぐガイドラインを表示してくれます。便利。

フォント

エディタのフォント設定です。
これに関してはGUIの設定ウィンドウでも簡単に設定できるので、無理にsettings.jsonを使うことはありません。

Cmd+,で設定ウィンドウを開き、検索欄にfontと打ち込むとフォントにまつわる設定がいろいろ出てきます。
これもこれで設定できるものがたくさんあるのですが、とりあえずフォントサイズとフォントファミリ(いわゆるフォント)を好みのものに設定しておきましょう。

ちなみに、僕のおすすめフォントは

• JetBrainsMono
• MomiageMono

の2つです。とても見やすくて目への負担が少ない。

(MomiageMonoはJetBrainsMonoとそれに近い日本語フォントでできた等幅フォントなので、MomiageMonoを入れればJetBrainsMonoは不要なはずなのですが、僕の環境(MacOS)ではMomiageMonoのアルファベット表示がなぜかバグっており、JetBrainsMonoも使用しています。おま環かなぁ)

複数フォントの設定方法は画像の通りです。左にあるフォントから優先的に適用されます。(左のフォントで対応してない文字の場合は右のフォントを参照する、といった具合)

また、settings.jsonだと以下の通りです。

{
    "editor.fontSize": 10,
    "editor.fontFamily": "JetBrainsMono-Regular,Momiage Mono"
}

おわりに

いかがでしたでしょうか。
気づいたら結構長い記事になってしまいましたが、VSCodeにはここでは紹介しきれなかった拡張機能や設定がまだまだ山ほどあります。
ぜひ自分でいろいろ調べてみたり、設定をいじったりしてみて、あなたの考えた最強の開発環境をつくってみてください!!

特に、settings.jsonをいじるのは少し勇気がいるかもしれませんが、どうせCtrl+Z(Mac:Cmd+Z)でもとに戻せるので、臆することなくいじってみてください!!

この記事が、みなさんの開発体験を快適にする一助となれば幸いです!!

明日(4/16(木))の新歓ブログリレー2026の担当は @n3 です! お楽しみに!!