分かりやすい！Visual Studio Codeの初期設定や使い方を画像付きで解説

Microsoft社が提供するプログラミングやシステムを開発できるソフトウェア「Visual Studio Code」。

Visual Studio Codeをこれから利用したいと考えている方向けに、以下の解説を画像付きでまとめました。

はじめて利用する方でも、Visual Studio Codeの利用方法が分かりますので、ぜひ参考にしてください。

Visual Studio Codeとは？

「Visual Studio Code（ビジュアル　スタジオ　コード）」とは、Microsoft社が提供するテキストエディタです。

プログラマーの中には、「VS Code（ブイエスコード）」と呼んでいる方も多いです。

Visual Studio Codeは、プログラミングやシステム開発できるソフトウェアを搭載しており、無料で使用できるため初心者にも人気が高いです。

Visual Studio Codeのインストールから初期設定までを解説

ここからは、Visual Studio Codeのインストールから使い方までの方法をご紹介します。

順に見ていきましょう。

１．Visual Studio Codeの公式サイトを開く

Google Cromeを開き、検索窓に「Visual Studio Code」と入力し、公式サイトを開きます。

または、Microsoft社の公式サイトをクリックして直接ページを開くことも可能です。

２．Visual Studio Codeをインストールする

こちらのトップ画面が表示されたら、「Download now」からダウンロードを行いましょう。

インストールに際して、費用は無料で利用できるため、安心して利用できます。

画面の指示に従って、お使いのパソコンに適したファイルをダウンロードしてください。

３．ダウンロードを完了する

ダウンロードをしたファイルが、パソコン画面の左下に表示されます。

ダブルクリックをして開きましょう。

初期設定の流れは、以下の通りです。

• ライセンスに「同意する」をクリック
• 他全て「次へ」を選択

全て選択したら、Visual Studio Codeが立ち上がるのを待ちましょう。

４．Visual Studio Codeの初期設定を行う

ダウンロードが完了したら、使用前にVisual Studio Codeを使いやすくするための、初期設定を行いましょう。

設定を行うのは、以下の2点です。

1. 配色を選択する
2. 言語を設定する

それぞれ見ていきましょう。

初期設定①．配色を選択する

画面の配色設定は、画面左下の歯車マーク⇒「配色テーマ」から行います。

ダークモードやライトモードなど、複数の選択肢から自分に合ったカラーを選らぶことが可能です。

拡張機能を追加して配色をカスタマイズする方法

配色をカスタマイズできる拡張機能を追加して、自分好みに設定する方法もご紹介します。

まずは、画面左側のボックス（①）のアイコンをクリックします。

検索窓に「theme」と入力しましょう。

すると、プログラマーの方が作成した様々な拡張機能が表示されますので、お好みでカスタマイズをしていきます。

初期設定②．Emmetを編集する

次は、HTMLやCSSの入力をサポートしてくれる（書きやすくしてくれるための）拡張機能「Emmet（エメット）」の編集を行います。

ここでは主に、使用する言語の設定も行いましょう。

画面左下の歯車マークから、「設定」をクリックしてください。

多様な設定に関する情報が表示されますので、上部の検索窓に「Emment」と入力すればピンポイントで探せるのでおすすめです。

デフォルトでは英語に設定されていますので、「項目の追加」をクリックして、「値」の欄に日本語を表す「ja」と入力すれば設定完了です。

初期設定を完了させるためにも、ここまでの作業が完了したら一度パソコンを再起動させましょう。

 Visual Studio Codeの使い方

初期設定を終えたら、実際にコードを書き始める準備を整えましょう。

ここからは、Visual Studio Codeで実際にコードを書き始めるまでの手順は、以下の通りです。

それでは見ていきましょう。

１．パソコンのデスクトップにファイルを作成する

お持ちのパソコンのデスクトップに、新規でファイルを作成します。

ファイルの名前は、MYCSSや、MYHTMLなどと書くと良いでしょう。

２．Visual Studio Codeからフォルダを開く

Visual Studio Codeのソフトウェアを開きます。

左上の「ファイル」から「フォルダを開く」または「Open Folder」をクリックしてください。

手順1で作成したフォルダを指定して、選択します。

３．新規作成する

Visual Studio Codeの左画面に、先ほど指定したフォルダ名が表示されるはずです。

カーソルをフォルダ名に合わせると、右上に新規作成のマークが現れますので、赤い枠で囲ったアイコンをクリックしてください。

※複数のページを作成する必要がある場合は、フォルダ→新規作成でフォルダ直下で階層を作ります。

例えば、自己紹介は1ページで納まるため初めから「新規作成」でOKですが、商品販売は複数のカテゴリー別のページが考えられるため、フォルダを作成したうえで、フォルダ内に新規作成を行います。

４．作成するページに名前を付ける

最後は、新規作成したページに名前を付けて、Enterで確定をしましょう。

ページの名前は、一般的に以下が使われることが多いので、参考にしてください。

• index.html
• index.css

ここまでの手順を終えたら、実際にVisual Studio Codeにプログラミング言語を書いていきましょう。

無料でプログラミングを学ぶなら「プログラマカレッジ」がおすすめ

いざプログラミングを学びたいと思っても、

「プログラマーを目指したいけど、どこも受講費が高い…」
「受講料に20万～30万円も支払えない…」

実際に、このような悩みを抱く方が多いです。

そこで、お金をかけずにプログラミングの知識を習得するなら「プログラマカレッジ」の利用をおすすめします。

（引用：プログラマカレッジ）

プログラマカレッジでは、無料でプログラミングを学ぶことが可能で、最終的には就職のサポートまで受けられます。

また、オンライン学習にも対応しており、マンツーマンで講師に質問できる手厚いサポート体制も整っています。

アカウントの登録は無料ですし、利用前にカウンセラーと無料相談できるため、これからプログラミングを始めたいと考えている方はチェックしておきましょう。

プログラマカレッジに無料相談してみる

 Visual Studio Codeで半角・全角を区別する方法

Visual Studio Codeを使用する中で、半角と全角の区別がつけば作業がスムーズに進みます。

例えば、空白を誤って全角にしている場合、正しくコードが反映されませんのでご注意ください。

そこで、ここでは入力した半角・全角の空白を見分ける方法をご紹介します。

手順は以下の通りです。

インストール後に全角が反映されないという方は、再起動をされてみてください。

全角空白で入力したスペースが、グレー背景に変化して区別が簡単になるのでおすすめです。

【補足】その他の設定│ファイル名拡張子の表示設定

最後に、ファイル名拡張子についてもご紹介しておきます。

こちらは、Visual Studio Codeとは直接関係のない動作ではありますが、基本動作ですので併せて参考にしてください。

まずは、エクスプローラーを開きます。

画面上部の「表示」から「ファイル名拡張子」にチェックを入れるだけでOKです。

ファイル名拡張子にチェックを入れることで、表示名の末尾にファイルの種類や形式を表示するための文字列が表示されます。

例えば、「.exe」という文字列は、Windows上で実行できるファイルと識別することができるため、設定しておくと後々安心です。

ファイル名を付ける際の注意点

最後に、ファイル名を付ける際の注意点をご紹介します。

注意すべき項目は、以下の通りです。

• 大文字・小文字は統一する
• 空白は入れない
• アンダースコアではなくハイフンを使用する

まず、テキストエディタでファイルを指定する際に、大文字・小文字が間違っているだけで、コードは正しく反映されません。

また、ソフトウェアによってはファイル名の空白を “%20” (URI の空白の文字コード)として置き換えたり、２つのファイル名と認識してしまい、誤った動作を引き起すケースもあります。

ファイル名を区切る際は、アンダースコア（_）よりもハイフン（-）を使用しましょう。