マナティ

Visual Studio Code がより便利になる使い方5選

Visual Studio Codeは、Microsoftが中心となってオープンソースで開発されているコードエディタ―です。エンジニアの方ならVisual Studio Codeを聞いたことすらないという方はまずいない、というぐらい、もはや定番のエディタですね。
ここでは、Visual Studio Codeを使いこなすために必須のテクニックをいくつかご紹介します。

目次

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で次のように記述してみてください。

!
そのまま改行します。すると……



HTMLのひな形が完成しました!
このように、HTMLなどの記述を簡略化して書けるツールがEmmetです。EmmetはVS Codeに標準で搭載されているのでインストールした時点ですぐに使い始められます。
ちなみに、CSSの読み込みはheadタグ内でlinkと記述して、表示される候補(これもIntelliSenseというVS Codeの標準機能です)の中からlink:cssを選択すると簡単に追加できます。



次に、body要素を書いてみましょう。以下のようなリストを作ってみます。
  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>
これを毎回全部書くのって面倒ですよね。 HTMLを書いているとこのような記述は何度も登場します。
こんなときにも使えるのがEmmetです。これを使って書くと、上記のようなHTMLはファイルに次の一行を書いてエンターキーを押すだけで生成されてしまいます。
  ul>li.item$*5
どういうこと? と思ったかもしれませんが、よく見てみるとulタグの下(>)にliタグが5つ(li.item$*5)、というルールの記述になっています。
ドットでつなぐことでクラスを指定できます。$は連番をつけるときに使う記述です。
これなら、たとえばliタグが10個必要になっても同様に*10と記述してやるだけでまとめて生成できるのでコーディングが非常に簡略化します。



divタグが10個必要になった場合も簡単で、div*10と記述するだけで作成できます。一つ書いてコピペするよりも圧倒的に速いうえに間違いにくいことが実感できるでしょう。
ちなみに、loremというEmmetを使うとダミーテキストを生成してくれるのでとりあえず適当に文字を表示して画面の見え方を確認したいときに便利です。行数や単語数も指定できるのでいろいろと試してみてください。
EmmetはHTML以外にも様々な言語に対応しているので、気になる方は是非、VS Codeを使って調べてみてください。いくつかよく使うものを覚えておくだけで驚くほど開発が速くなりますよ!

 

マルチカーソル

開発をしていると、途中でクラス名を変更する必要があったり、あるいは途中で誤字に気づくということがあるかもしれません。
もちろん、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>
開発の途中で、itemの部分をcontentsに変更することになったとします。
  <ul>
    <li class="contents1"></li>
    <li class="contents2"></li>
    <li class="contents3"></li>
    <li class="contents4"></li>
    <li class="contents5"></li>
  </ul>
こんな時に役に立つのがマルチカーソル機能です。
まずはマウスドラッグでitemの部分を選択します。次に、ショートカットキーでCtrl+Shitf+Lを押下すると、itemと書かれた部分が一括で選択されます。この状態になったら、あとは好きな文字列に書き換えるだけですべて同じように変更されます。変更が終わったらEscキーでマルチカーソルを解除できます。



今回はitemの部分だけを変更したかったので必要部分を選択しましたが、マルチカーソル機能はカーソルが選択している部分の単語をドットやスペースで区切られる直前の範囲まで自動で選択してくれるのでこちらも試してみてください。

 

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

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

拡張機能とは?

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


すると左上に検索窓が表示されるので、ここから必要な拡張機能を検索して「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を使っているという方でも、今まで使ったことがないという方でもためになる内容になっています。

サンプル

著者プロフィール