VSCodeの始め方を解説!インストールから便利な機能まで網羅

本記事では多機能で使い勝手のよいエディター、VSCodeのインストール方法と、覚えておきたい便利な機能をいくつか紹介します。初めてエディターを使う人が躓きやすい、フォルダ/ファイルの作り方まで解説しているので、「インストールはしたけど、それ以上先に進めてない」という人にも役立つ記事となっています。

VSCodeとは

VSCodeとはVisual Studio Codeの略で、Microsoftが開発した多機能で軽量なオープンソースのエディターです。無料であるのにもかかわらず、初心者はもちろん、機能拡張の自由度が高いため、上級者にとっても使い勝手の良いエディターとなっています。そのため、VSCodeが初めてのエディターだという人が経験を積んでいっても、長く使用することができます。

またWindowだけでなく、MacOSやLinuxといったOSにも対応しているため、開発環境の変化にも柔軟に対応することができます。したがってどのエディターを使うか迷っている人も、無料なのでひとまずVSCodeにするという気持ちでインストールして問題ありません。

インストールからHTMLファイル作成まで

まずはVSCodeのダウンロード画面を開きましょう。以下の画像のページに遷移すれば問題ありません。

  1. ダウンロード〜インストール

では、自身の開発環境に合わせてVSCodeをダウンロードします。多くの人はWindowsかMacでしょう。それぞれのダウンロードボタンの下に、青い小さなボタンがいくつかありますが、今回は無視して問題ありません。赤い枠で囲んだ部分のどれかを選択してください。

あるいは、Windowsの場合は「User Installer」を使うこともあるかもしれません。あらかじめバージョン情報で何bitかを確認しておきましょう。なお「System Installer」は特定のPCを複数ユーザーで使用する場合などに用います。そういったことが想定されなければ「User Installer」で問題ありません。

ダウンロードの後は、Windowsの場合は「使用許諾契約書」に同意し、インストール先の選択などを行ったのち、案内にしたがって「インストール」まで行います。

Macの場合は、ダウンロードしたzipファイルを展開すると「Visual Studio Code.app」が作成されるので、使いやすいようにアプリケーションフォルダなどに移動させておきましょう。

  1. VSCodeを日本語化する

インストールが完了したら、VSCodeを開きましょう。

現状では英語表記となっているので、日本語表記に変更します。次の画像で赤枠で囲んだ部分を選択してください。

すると次の画像のようなページに移ります。こちらは拡張機能を検索・インストールするページです。赤枠で囲んだ部分が検索窓なので、ここに「Japanese Language Pack for Visual Studio Code」と入力します。(実際には「Japanese」と入力したあたりで目的のものは一番上に候補があがるはずです)。

検索したら、次の画像と同じものを選択し、赤矢印で示した場所からインストールを行いましょう。

インストールが完了すると、右下に「日本語化には再起動が必要です」というポップアップが出るので、「Restart」を選択しましょう。

自動的に再起動が行われた後、VSCodeが日本語表記に変わります。

  1. HTMLファイルを1つ作ってみる。

では最後に、コーディングを行うHTMLファイルを1つ作成してみましょう。ファイルの作成方法はいくつかありますが、今回は「Webページの名を冠したフォルダを作成」→「そのフォルダにHTMLファイルを格納」という手順で進めていきます。

フォルダを作成しておけば、これから作るHTMLファイルだけでなく、CSSファイルや画像データなども一緒に格納できるため、実際の開発に近い形になります。

では次の画像の「フォルダーを開く」を選択してください。

「フォルダーを開く」を選択した後はWindowsとMacで多少挙動が異なるかもしれません。いずれにしても、新規フォルダー(名前は何でもよいです)を作成して、そのフォルダーを開きましょう。すると、以下の画像のようになります。(今回はとりあえず「VSCode」というフォルダを作成しました)。

そして、次の画像の赤枠で囲んだ部分にカーソルを乗せましょう。

すると赤枠のエリア上部に、次の画像のようなマークが表示されます。そのうち左から1番目のマークを選択しましょう。

そして、入力画面が表示されたら、そこのファイルの名前を付けましょう。今回はindex.htmlという名前にしましょう。ファイル名の最後に「.html」と付けることで、そのファイルはhtmlファイルになります。

画像のように、入力を完了してEnterを押すと、右側に編集エリアが自動生成されます。

便利な機能

では次に、VSCodeでよく用いられる便利な機能を紹介します。、VSCodeには数多くのショートカットや拡張機能が用意されていますが、次の3つを積極的に活用するだけでも開発スピードが通常の何倍も早くなります。慣れてきたら、どんどん新しい機能も探して見てください。

インテリセンス

インテリセンスとは、VSCodeがファイルの言語を判別し、途中まで入力すると、候補を表示する機能です。たとえば、HTMLにはimgタグという画像を挿入するためのタグがありますが、このタグには基本的にsrc属性とalt属性という2つの属性を記述しなければなりません。

VSCodeもそのことを理解しているので、「img」ぐらいまで記入するといくつか候補が表示され、適当なものを選択すると2つの属性を記述した状態のimgタグを生成してくれます。

EMMET

EMMETとは、HTMLやCSSをコーディングする際に、特定の記述で雛形を生成してくれる機能です。たとえば、HTML5を使用する場合に必ず必要な記述があるのですが、「! + タブキー」だけでその記述の雛形が生成されます。

マルチカーソル

マルチカーソルとは、任意の場所に複数のカーソルを置いて、一括で編集が行える機能です。次の画像内では、「option + クリック」でカーソルを増やしています。(windowsの場合は「Alt + クリック」)。

まとめ

本記事ではVSCodeのインストール方法から便利な機能の紹介を行いました。本記事の内容だけでも、使い勝手の良さと高い機能性を体感できたと思いますが、それでもまだ氷山の一角です。

コーディングに慣れてくると、「あれができたら便利だな」と思うこともあるでしょう。VSCodeならばその思いに応える機能が用意されている可能性が高いので、ダメ元で調べてみてください。そうする内に、自分にとって最高の開発環境が整ってくるはずです。