Visual Studio Codeをインストールする方法を紹介

Visual Studio Code（VSコード）は、人気のあるテキストエディタであり、プログラミングやWeb開発などのさまざまなプロジェクトに使用されています。

Visual Studio Codeを使用すると、使いやすいインターフェースと豊富な拡張機能が利用できます。この記事では、Visual Studio Codeをインストールする方法について説明します。

忍者CODEの学習は“実践型”！
だから結果を出せる！

●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級！それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から！

ダウンロードページを開く

まず、公式のVisual Studio Codeのウェブサイトにアクセスします。お使いのウェブブラウザを開き、次のURLに移動します: https://code.visualstudio.com/

プラットフォームの選択

Visual Studio Codeは、Windows、macOS、Linuxなどさまざまなプラットフォームで利用できます。ウェブサイトにアクセスしたら、お使いのオペレーティングシステムに合わせて適切なプラットフォームを選択します。

インストーラーのダウンロード

ラットフォームを選択すると、自動的に対応するインストーラーが表示されます。インストーラーをクリックすると、ダウンロードが開始されます。ダウンロードが完了したら、次のステップに進みます。

インストーラーを実行する

ダウンロードしたインストーラーを開く

ダウンロードが完了したら、お使いのオペレーティングシステムでインストーラーファイルを見つけます。ファイルをダブルクリックしてインストーラーを開きます。これにより、インストールプロセスが開始されます。

インストールの設定

インストーラーが開かれると、いくつかのインストールオプションを設定することができます。一般的なオプションには、インストール先のパスやショートカットの作成が含まれます。必要な設定を選択し、インストールの準備が整ったら、次に進みます。インストールプロセスは数分かかる場合がありますので、完了するまでお待ちください。

インストーラーが完了するまで待つ

インストーラーが実行されると、Visual Studio Codeのインストールが開始されます。

インストールプロセスが進行中の間は、しばらくお待ちください。インストールには数分かかる場合があります。

初回起動と基本設定

初回起動

インストールが完了したら、Visual Studio Codeを初めて起動することができます。

アプリケーションを起動すると、初回セットアップのためのウェルカム画面が表示されます。画面の指示に従って進み、初期設定を行います。

基本設定

初回起動時には、いくつかの基本設定を行うことができます。言語設定やテーマ、フォントの選択など、自分の好みに合わせてカスタマイズすることができます。

また、Visual Studio Codeの基本的な機能の使い方やショートカットキーについても学ぶことができます。これらの設定は、後で変更することもできますので、初めはデフォルトのまま進めても問題ありません。

プログラミングスクールなら
忍者CODE

あなたの適性学習プランを診断

拡張機能の追加

Visual Studio Codeでは、さまざまな機能を追加するための拡張機能が利用できます。以下では、拡張機能の検索とインストール方法について説明します。

拡張機能の検索

VSコードの左側にあるアクティビティバーから、拡張機能のアイコン（四角いパズルのようなアイコン）をクリックすると、拡張機能ビューが表示されます。

検索バーに関連するキーワードを入力すると、該当する拡張機能が表示されます。

拡張機能のインストール

拡張機能を見つけたら、その拡張機能のカードをクリックします。詳細ページが表示され、インストールボタンが表示されるはずです。

インストールボタンをクリックすると、Visual Studio Codeが選択した拡張機能をダウンロードし、自動的にインストールします。インストールが完了すると、拡張機能が利用可能になります。

おすすめの拡張機能

Live Server

Live Serverは、Web開発においてリアルタイムのプレビュー機能を提供する拡張機能です。

HTML、CSS、JavaScriptなどのファイルを編集している際に、変更内容を自動的にブラウザに反映させてくれます。これにより、コードの修正やデザインの調整を素早く確認することができます。

Prettier – Code formatter

Prettierは、コードの自動整形を行ってくれる拡張機能です。一貫性のあるコードスタイルを保つために役立ちます。Prettierを使用すると、コードを保存するたびに自動的にインデントやスペースの調整、行の折り返しの設定などが行われます。これにより、コードのフォーマットに時間をかける必要がなくなります。

これらの拡張機能は、開発効率を向上させるために役立つものです。お好みや開発のニーズに合わせて、さまざまな拡張機能を探索してみてください。

挫折することなくプログラミングを学ぶなら

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際に学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

関連記事：「未経験からWebエンジニアを目指には」

関連記事：「未経験でも挫折させないプログラミングスクール忍者CODEとは？」