VS Codeをインストールしたら最初に設定すべき5選!おすすめ拡張機能も解説

VS Codeをインストールしたら最初に設定すべき5選!おすすめ拡張機能も解説

VS Codeをインストールしたら最初に設定すべき5選!おすすめ拡張機能も解説
困った顔で働く会社員のイラスト(男性)
「Visual Studio Code(VS Code)をインストールしたけど、次に何をすればいいの?」
「全部英語で、どこを触ればいいか分からない…」
「もっとプログラミングしやすくなる、おすすめの設定や拡張機能が知りたい!」

 

プログラミング学習の冒険に出る決意を固め、最強の武器である「VS Code」を手に入れたあなた。おめでとうございます!その一歩は、非常に大きな前進です。

しかし、手に入れたばかりの剣は、まだ鞘に収まったまま。その真の力を引き出すには、あなたの手に馴染むように、いくつかの**「初期設定」**を施す必要があります。

 

この記事では、プログラミング初心者の方が、「VS Code、なんだか使いにくいな…」と挫折してしまうことがないように、「これだけは、絶対に最初にやっておくべき!」という、必須の設定と、おすすめの拡張機能を5つに厳選して、どこよりも分かりやすく、ステップ・バイ-ステップで解説していきます。

少しの手間をかけるだけで、あなたのVS Codeは、ただの「エディタ」から、思考を加速させる「最高の相棒」へと進化します。

 

  • なぜ、その設定が必要なのか?

  • 具体的な設定方法

 

 

設定1:【最優先】まずは、すべてを日本語化しよう!

設定1:【最優先】まずは、すべてを日本語化しよう!

 

インストールしたてのVS Codeは、メニューやコマンドがすべて英語です。

プログラミングの学習に集中するためにも、まず最初に、インターフェースを完全に日本語化してしまいましょう。

 

別の記事で画像付きで詳しく解説している記事があるので、ここでは簡単に概要レベルでの説明とします。

 

画像付きで詳しく解説している記事はコチラ

「プログラミングを始めたいけど、どのエディタを使えばいいの?」「Visual Studio Code(VS Code)が人気らしいけど、インストールが難しそう…」「インストールしたけど、全部英語でよくわからない!」  […]

【初心者向け】Visual Studio Codeインストール方法!日本語化から使い方まで徹底解説 (2024年版)

 

 

なぜ必要か?

エラーメッセージや設定項目が日本語になるだけで、ツールの理解度と、問題解決のスピードが、劇的に向上します。英語に慣れるのは、もっと後からで大丈夫です。

 

設定方法

  1. 拡張機能ビューを開く

    • 画面左側のアクティビティバー(アイコンが縦に並んだバー)から、**四角いブロックが4つ並んだような「拡張機能(Extensions)」**アイコンをクリックします。(ショートカット: Ctrl+Shift+X / Cmd+Shift+X

  2. 日本語化パックを検索・インストール

    • 上部に表示された検索ボックスに、**Japanese Language Pack**と入力します。

    • 検索結果に出てくる「Japanese Language Pack for Visual Studio Code」の、青い「Install」ボタンをクリックします。

  3. VS Codeを再起動

    • インストールが完了すると、画面の右下に「Change Language and Restart」というボタンが表示されます。これをクリックして、VS Codeを再起動してください。

 

たったこれだけです。再起動後、すべてのメニューが日本語で表示されていれば、成功です。

 

設定2:コードの保存忘れを防ぐ!「自動保存」を有効にしよう

設定2:コードの保存忘れを防ぐ!「自動保存」を有効にしよう

 

プログラミング初心者が、本当によくやってしまうミス。それが**「コードを書いたのに、保存(Ctrl+S / Cmd+S)し忘れて、実行したら古いコードが動いてしまい、パニックになる」**というものです。

この悲劇を、未来永劫なくすための、魔法の設定。それが「自動保存」です。

 

なぜ必要か?

保存忘れによる、無駄なエラー探しや、混乱を防ぐことができます。

一度設定すれば、あなたはもう「保存」という行為を、意識する必要がなくなります。

 

設定方法

  1. 設定画面を開く

    • メニューバーから「ファイル」→「ユーザー設定」→「設定」を選択します。

    • または、ショートカット Ctrl+, (Windows) / Cmd+, (Mac) でも開けます。

  2. 「auto save」で検索

    • 上部の検索ボックスに、**auto save**と入力します。

  3. 設定を変更する

    • 「Files: Auto Save」という項目が見つかります。

    • デフォルトでは「off」になっている、このドロップダウンリストをクリックし、**「afterDelay」**に変更します。

    • すぐ下に表示される「Files: Auto Save Delay」の数値が、自動保存されるまでの時間(ミリ秒)です。デフォルトの「1000」(=1秒)のままで、十分快適です。

 

これで、あなたがコードの入力を1秒間止めると、自動的にファイルが保存されるようになります。もう、Ctrl+Sキーを連打する癖とは、お別れです。

設定3:【神拡張】コードを自動で綺麗に!「Prettier」を導入しよう

設定3:【神拡張】コードを自動で綺麗に!「Prettier」を導入しよう

 

プログラミングにおいて、「コードの見た目(フォーマット)」を、読みやすく、綺麗に保つことは、非常に重要です。

インデント(字下げ)がガタガタだったり、スペースの使い方がバラバラだったりするコードは、バグの温床になります。

 

Prettierは、この面倒な**「コードの整形」を、ファイルを保存するたびに、全自動で行ってくれる**、神のような拡張機能です。

 

なぜ必要か?

コードの見た目に関する、一切の悩みから解放されます。誰が書いても、常に統一された、美しいコードが生まれるため、コードの可読性が飛躍的に向上し、チーム開発でも絶大な威力を発揮します。

 

設定方法

  1. 拡張機能をインストール

    • 拡張機能ビューで**Prettier – Code formatter**と検索し、インストールします。

  2. デフォルトフォーマッターに設定

    • 設定画面(Ctrl+,)を開き、検索ボックスに**default formatter**と入力します。

    • 「Editor: Default Formatter」の項目で、ドロップダウンリストから**「Prettier – Code formatter」**を選択します。

  3. 保存時にフォーマットする設定

    • 設定画面の検索ボックスに**format on save**と入力します。

    • **「Editor: Format On Save」**という項目に、チェックを入れます。

 

さあ、これで準備は完了です。わざとインデントを崩した、汚いコードを書いて、Ctrl+Sで保存してみてください。一瞬で、魔法のように、コードが美しいフォーマットに整形されるはずです。この感動を、ぜひ味わってください。

 

設定4:【HTML/CSS学習者向け】ブラウザリロードを自動化!「Live Server」

設定4:【HTML/CSS学習者向け】ブラウザリロードを自動化!「Live Server」

 

HTMLやCSSを学習しているとき、「コードを修正 → 保存 → ブラウザに切り替え → リロードボタンを押す」という作業を、一日に何百回も繰り返すことになります。

この、地味で面倒な「リロード作業」を、完全に自動化してくれるのがLive Serverです。

 

なぜ必要か?

コードを保存した瞬間に、ブラウザの表示が、自動で、瞬時に更新されるようになります。

コーディングの結果を、リアルタイムで確認できるため、開発効率と学習効率が、爆発的に向上します。

 

設定方法

  1. 拡張機能をインストール

    • 拡張機能ビューで**Live Server**と検索し、インストールします。

  2. Live Serverを起動する

    • HTMLファイルを開いている状態で、VS Codeの右下にあるステータスバーに、**「Go Live」**というボタンが新しく表示されています。これをクリックするだけです。

    • 自動的に、既定のブラウザが立ち上がり、あなたのHTMLファイルが表示されます。

  3. 自動リロードを体験する

    • VS Codeで、HTMLの文字を何か修正して、保存してみてください。

    • ブラウザに切り替える必要はありません。修正が、瞬時にブラウザの表示に反映されるはずです。

 

設定5:一目でわかる!ファイルアイコンのテーマを変更しよう

設定5:一目でわかる!ファイルアイコンのテーマを変更しよう

 

VS Codeのデフォルトのエクスプローラービューは、少しシンプルで、ファイルの種類が見分けにくい、と感じるかもしれません。

ファイルアイコンのテーマを変更するだけで、見た目が華やかになるだけでなく、ファイルの種類が一目でわかるようになり、作業効率が向上します。

 

なぜ必要か?

index.html style.css script.js といったファイルが、それぞれHTML5、CSS3、JSの美しいアイコンで表示されるようになります。

視覚的にファイルを探しやすくなり、何より、コーディングのモチベーションが上がります!

 

設定方法

  1. ファイルアイコンテーマの設定画面を開く

    • メニューバーから「ファイル」→「ユーザー設定」→「テーマ」→「ファイル アイコンのテーマ」を選択します。

  2. テーマを選択、または追加する

    • デフォルトでもいくつかの選択肢がありますが、おすすめは、追加で人気のテーマをインストールすることです。

    • コマンドパレットで、「追加のファイルアイコンテーマをインストール」を選択します。

    • 拡張機能ビューが開くので、**Material Icon Themevscode-icons**といった、人気のアイコンテーマをインストールします。

    • インストール後、再度「ファイル アイコンのテーマ」を選択する画面に戻り、インストールしたテーマを選択すれば、設定完了です。

 

エクスプローラーのファイル一覧が、カラフルで分かりやすくなったのを確認してください。

 

まとめ

まとめ

 

VS Codeは、インストールしただけの「素の状態」でも、十分に強力なエディタです。

しかし、今回紹介した、たった5つの初期設定を行うだけで、その戦闘力は、何倍にも跳ね上がります。

 

  1. 日本語化:すべての基本。迷わず最初にやる。

  2. 自動保存:保存忘れという、初心者のミスを撲滅する。

  3. Prettier:コードの見た目を、常に完璧に保つ、あなたの執事。

  4. Live Server:HTML/CSSの学習効率を、2倍速にするタイムマシン。

  5. アイコンテーマ:日々のコーディングを、少しだけ楽しくする、ささやかな彩り。

 

これらの設定は、一度やってしまえば、ずっとあなたの開発を助け続けてくれる、最高の「自己投資」です。

快適な開発環境は、プログラミング学習を継続するための、最も重要な土台となります。

関連記事

「プログラミングを勉強したスキルを、お金に変えてみたい!」「副業で、まずは月3万円くらい稼げたら嬉しいな…」「クラウドソーシングって、本当に初心者でも稼げるの?」 プログラミング学習の先に、多くの人が思い描くのが「自分の力[…]

【プログラミング未経験向け】クラウドソーシングで月3万円稼ぐには?期間と稼ぐまでのロードマップを徹底解説!