目次

1: はじめに
2: 入力補助でコーディングを省力化！ Emmetスニペット
3: 一括処理でらくらく修正！ マルチカーソル
4: 拡張機能とは？
5: 入力の手間が半分に　Auto Close Tag
6: タグの名前を間違えずに一括変換　Auto Rename Tag
7: 修正箇所を即座にプレビュー Live Server

はじめに

Visual Studio Codeは、Microsoftが中心となってオープンソースで開発されているクロスプラットフォーム（Windows／Linux／macOS）対応のコードエディタ―です。エンジニアの方ならVisual Studio Codeを聞いたことすらないという方はまずいない、というぐらい、もはや定番のエディタですね。
ここでは、『プログラマーのためのVisual Studio Codeの教科書』から、Visual Studio Codeを使いこなすために必須のテクニックをいくつかご紹介します。

意外と知らなかった？ 標準機能だけでできるVS Codeの便利な活用方法！

まずはVisual Studio Codeの標準機能だけでできる便利な機能をいくつか紹介します。
これはVisual Studio Codeをインストールするだけで使えるワザなのでとても簡単です！
まだインストールしていないという方はこちらからインストールしてください。

Emmetスニペット

HTMLファイルを最初に作る時に必ず書くものがいくつかありますよね。
CSSやOGPなどの基本設定を書き込むheadタグや画面に表示される要素を書き込むbodyタグなど、やることは毎回決まっています。
毎回決まっているのに新しく作るたびに同じことを書くのは面倒ですよね。そこで、作ったばかりの空のHTMLファイルにVisual Studio Codeで次のように記述してみてください。

!

  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>

  ul>li.item$*5

マルチカーソル

開発をしていると、途中でクラス名を変更する必要があったり、あるいは途中で誤字に気づくということがあるかもしれません。
もちろん、VS Codeには文字列検索機能（Ctrl+F）があるので、これを使って置換するのもいいですが、ここでは別の方法を紹介します。
たとえば、先ほど作成したbody要素を再掲します。

  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>

  <ul>
    <li class="contents1"></li>
    <li class="contents2"></li>
    <li class="contents3"></li>
    <li class="contents4"></li>
    <li class="contents5"></li>
  </ul>

基本機能では物足りない！ 便利な拡張機能を紹介

ここまでの紹介で、Visual Studio Codeの基本機能だけでもとても便利に開発ができることは少しでも伝わったでしょうか？　Visual Studio Codeにはさきほど紹介したもの以外にもたくさんの便利な機能が備わっています。是非とも、使いながら覚えてみてください。
ここからは、基本機能だけでは足りない部分を補うための拡張機能について説明します。

拡張機能とは？

ユーザーの必要に応じて追加できるのが拡張機能です。拡張機能はMarketplaceというサイトにまとめられているので、こちらからダウンロードすることができます。
今回はVS Codeから直接インストールする方法で紹介します。次の図のように、VS Codeの左側にある四角形が４つのアイコンをクリックしてください。


すると左上に検索窓が表示されるので、ここから必要な拡張機能を検索して「install」をクリックすれば完了します。
今回は豊富にある拡張機能の中から、HTML開発に特に便利な機能をいくつかご紹介します。

Auto Close Tag

HTMLを書いたことがある方は、終了タグを書き忘れたことはないでしょうか。HTMLタグの多くは開始タグと終了タグがセットになっているものが多いですが、階層が深くなってくるとついつい忘れてしまうこともあるかと思います。
毎回書くものなのに、毎回手動で入力するのは少し面倒に感じるかもしれません。
そこで、拡張機能の『Auto Close Tag』を使ってみましょう。まずは検索窓に「Auto Close Tag」と入力して、一番上に表示される機能をインストールしてみてください。
完了したら早速HTMLタグを書いてみましょう。すると……



このように、開始タグを閉じると自動的に終了タグが補完されました。このように、Auto Close Tagを使うと入力の手間が半分で済んでしまいます。
 

Auto Rename Tag

HTMLを書いている途中で、タグを別のものに変更したくなったとします。すると当然、開始タグと終了タグを両方とも書き換える必要がありますね。
数が少ないうちはいいですが、HTMLが大規模になってきて対応する終了タグを見つけるのも一苦労……なんてこともあるかもしれません。
そんなときに便利な拡張機能が『Auto Rename Tag』です。先ほどと同様に、「Auto Rename Tag」で検索してインストールしてみてください。
それでは、試しにdivタグをspanタグに書き換えてみましょう。



このように、対応する終了タグも一緒に書き換わりました。対応するタグが自動で書き換わるので手間を省略するだけではなく、間違いも防ぐことができます。
 

Live Server

HTMLは表示を確認しながら開発することが多い言語です。たとえばちょっと文字サイズを変えたり、色を変えたりしながらブラウザで表示を確認したりします。
このとき、エディタで記述を修正して保存→ブラウザの更新という手順を踏む必要がありますが、これを何度も行うのは少し面倒ですね。
そんなときに便利な拡張機能が『Live Server』です。検索してインストールしましょう。
完了したらまずはHTMLファイルを作成して、カーソルを合わせた状態でAlt+L, Alt+Oと入力してみてください。すると、次のようにブラウザにHTMLの内容が表示されます。



もちろんこれで終わりではありません。HTMLファイルを書き換えて保存してみてください。すると、次のように保存した瞬間に変更が反映されます。



このように、Live Serverを使うとファイルを保存したタイミングで変更を反映する、ホットリロード機能が使えるようになります。
もちろんこれはHTMLファイルに読み込んでいるCSSやJavaScriptを変更しても同様に反映されるのでぜひ開発に役立ててみてください。
 

まとめ

少しでもVS Codeの素晴らしさは伝わったでしょうか？　もちろん、ここで紹介したものはほんの一例で、便利な機能はまだまだあります。
拡張機能でも足りない！　という方は自分でオリジナルの拡張機能を開発することもできるので是非とも挑戦してみてください。
VS Codeの基本機能、拡張機能、そしてオリジナルの拡張機能開発手法を豊富に取り扱って丁寧に解説している一冊が『プログラマーのためのVisual Studio Codeの教科書』です。すでにVS Codeを使っているという方でも、今まで使ったことがないという方でもためになる内容になっています。

サンプル