Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する!《VSCode実践入門》

VSCodeは初版が2015年リリースの新しいエディタですが、インテリセンス、ユーザースニペット、Emmet、マルチカーソル、拡張機能というコーディングにうれしい機能が充実しています。VSCodeを検討中あるいは使いはじめたばかりの若手エンジニアが、いち早く初心者を脱出するための使いこなし方を解説します。

Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する!《VSCode実践入門》

はじめまして、KC(けーしぃ、@kcpoipoiと申します。技術書典6にサークル参加してたら「キミ、Web執筆に興味ない??」とお声がけいただきました。Web執筆は初めてなので至らない点があるかもしれませんが、何卒よろしくお願いいたします。

───さて、みなさんは普段どのようなソースコードエディタを使用しておりますでしょうか。

Vim? emacs? Atom? サクラエディタ? それとも……、Visual Studio Code(以降、VSCode)でしょうか?

本記事では、無料・軽量・高機能なVSCodeの入門者向け解説を行います。

VSCodeについて

VSCodeは、Microsoft製のソースコードエディタです。Electronフレームワーク上で構築されており、Windows、MacOS、Linuxに対応しています。

初版のリリースは2015年で、比較的新しいエディタです。しかし、ほぼ毎月アップデートが重ねられており、この記事の執筆時点で最新版はバージョン1.35.1となっています。

詳しいリリースの内容については、公式のリリースノートをご参照ください。

本記事で得られること

本記事を読み終える頃には、次の点について基本的な知識が得られていることと思います。

  • ユーザースニペットの定義
  • EmmetによるHTMLおよびCSSの展開
  • マルチカーソルの基本と、初歩的な実践

入門者向け記事としてはややニッチな方面かもしれませんが、ぜひ押さえておきたい機能ばかりです。

また、ショートカットキーも多く使うので、早い段階で体に染み込ませておきたいところですね。

対象読者層と想定環境

本記事では、次のような読者を想定しています。

  • VSCodeを導入しようと思っている方
  • VSCodeを使いはじめたばかりの方
  • マルチカーソルを積極的に使ったことがない・使い道がよく分からない方
  • 標準の編集機能をあまり使いこなせていない方

特に、普段からVSCodeを使用しているけど、マルチカーソルについてあまり調べてこなかったという方には、ぜひ読んでいただければと思います。

VSCodeを使いはじめたばかりの方は、まずはフォルダを開く、コマンドパレットを開く(Ctrl + Shift + P)などの操作を覚えると、読み進めやすいです。

執筆に使用した環境は次の通りです。

  • VSCodeバージョン1.35.1
  • Windows 10 Pro
  • Git for Windows 2.18.0

ショートカットキーはWindowsのキートップCtrlAltで表記しています。Macでは次のキートップに読み替えてください。

Windows Mac
Ctrl command
Alt option

VSCodeのうれしい機能

VSCodeには、インテリセンスユーザースニペットEmmetマルチカーソル、そして拡張機能(エクステンション)という特徴的な機能があります。順番に見ていきましょう。

インテリセンス

インテリセンスは、次のようなコード編集機能の総称です。

  • コード補完の表示
  • パラメータインフォの表示
  • クイックインフォの表示
  • メンバーリストの表示

コードの一部を書くと自動的に候補を表示してくれたり、変数の型やパラメータの情報を表示してくれます。みなさんも普段からお世話になっていることでしょう。

1

2

ユーザースニペット

ユーザースニペットは、オリジナルの定型文を短いキーワードで呼び出せる機能です。

VSCodeでは、fortrycatchのような、よく使う定型文がすでに登録されています。これら以外にもオリジナルの定型文を登録したい場合は、ユーザースニペット機能を使うことができます。

本記事では、Fizzbuzzテスト用のユーザースニペットを定義することにより動作を確認します。

3

Emmet

EmmetはWeb開発者向けのツールで、特定の構文によりHTMLおよびCSSを簡潔に記述することができます。2013年2月にバージョン1.0がリリースされましたが、それ以前はZen-Codingと呼ばれていたようです。

例えば、div+div>p>span+emというワンライナーの構文で、次のHTMLへの展開が可能となります。

<div></div>
<div>
  <p><span></span><em></em></p>
</div>

VSCodeではEmmetが標準で搭載されており、別途ツール等を入れる必要はありません。本記事ではいくつかのEmmet記法の例により、その動作を確認します。

マルチカーソル

マルチカーソルは、複数の箇所にカーソルを置き、同時にテキストを編集する機能です。

単語を全選択して一度に編集したり、少ない操作でJSONからキーを抜き出すなど、使い方次第でコーディング効率を大きく向上させることが可能です。

本記事では、基本的なショートカットキーとそれらを組み合わせたさまざまなマルチカーソル編集を紹介します。

4

無料かつ充実した拡張機能

VSCodeは、標準でJavaScriptおよびTypeScritptの言語サポート、ならびにNode.jsによるデバッグ機能を搭載しています。

さらに、拡張機能をインストールすることで、多種多様な言語サポートやデバッグ機能、ツールを導入できます。拡張機能には、次のようなものがあります。

VSCodeといえば、おすすめの拡張機能を紹介する入門記事をよく見かけますが、本記事ではインテリセンスやマルチカーソルなどエディタとしての機能を使いこなしてもらいたいと考えています。そのため拡張機能の紹介は、最低限入れておきたいGit系のGit LensGit Historyに留めます。

VSCodeとGit for Windowsのインストール

ここではVSCodeとGit for Windowsのインストールについて説明します。すでにインストールされていれば、読み飛ばして差し支えありません。

VSCodeのインストールと日本語化

VSCodeの公式サイトより、インストーラをダウンロードします。

途中で「PATHへの追加(再起動後に使用可能になる)」のチェックを忘れないようにし、画面の指示に従ってインストールしましょう。

5

インストールが終わったら、お好みで次の拡張機能により日本語化もできます。必要に応じて導入してみてください。

6Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

Git for Windowsのインストール

Git for Windowsの公式サイトより、インストーラをダウンロードします。同じく、画面の指示に従ってインストールしましょう。

7
8Git for Windows

PATHの確認

VSCodeとGitをインストール後、PowerShellやターミナルを起動し、PATHが通っているか確認しましょう。次の通りバージョンが返ってくればOKです。

$ code -v
1.35.1
$ git --version
git version 2.18.0

画面構成について

インストールできたところで、簡単に画面構成について説明します。VSCodeは、次のユーザーインターフェースで構成されています。

 

エディタ(エディタグループ)ソースコードファイルを編集するメインエリアサイドバーエクスプローラやデバッグ機能など、さまざまなビューが表示されるエリアステータスバー現在開いているプロジェクトやファイルの情報が表示されるエリアアクティビティバー主にサイドバーのビューを切り替えるためのボタンが表示されるエリアパネルコンパイラの警告、出力、統合ターミナルなどが表示されるエリア

 

9

より細かい要素については、公式サイトの解説をご覧ください。

10Visual Studio Code User Interface

インテリセンス、ユーザースニペットとバージョン管理

VSCodeとGitは無事にインストールできたでしょうか。続いては、インテリセンスの動作の確認、ユーザースニペットの定義、そして簡単にGit系の拡張機能について紹介します。

インテリセンスを体感する

JavaScriptファイルを使って、インテリセンス機能がどのように働くか簡単に見てみましょう。

まず、VSCodeで適当なフォルダを開き、JavaScriptファイルを2つmain.jssub.js生成してください。sub.jsに次の通り、関数とドキュメント(JSDoc)を定義します。

/**
 * サンプルメソッド
 * @param arg1 パラメータ情報の表示
 * @param arg2 
 * @return 返り値情報の表示
 */
export function example(arg1, arg2) {
  console.log('example');
  return 'result: ' + arg1 + arg2;
}

次に、main.jsにおいてsub.jsexampleメソッドをコールします。

import * as sub from './sub'

sub.example('foo', 'bar');

すると、sub.eをタイプした時点で、次のようにホバーウィンドウが表示されたかと思います。

11

インテリセンス機能により、sub.jsで定義したメソッドとそのドキュメントが読み込まれ、ヒントとして適切に表示されることが分かりました。

ユーザースニペットを定義する

ユーザースニペットは、オリジナルの定型文を短いキーワードで呼び出せる機能です。

例えば、次のようなFizzbuzz用の定型文を簡単に書けるようにしてみましょう。

if (i % 15 === 0) return "fizzbuzz";
if (i % 5 === 0) return "buzz";
if (i % 3 === 0) return "fizz";

ファイル > 基本設定 > ユーザースニペットを選択してください。インプットボックスが表示されるので、javascript.jsonを検索し、開きます。

12

このJSONファイルに、次の記述を追加します。

{
  "Fizzbuzz": {
    "prefix": "fizzbuzz",
    "body": [
      "if (${1:arg} % ${2:mod} === 0) return \"${3:value}\";",
      "$0"
    ],
    "description": "Fizzbuzz Snippets"
  }
}

要素はそれぞれ次の通りです。

変数名 記述する値
Fizzbuzz スニペット名
prefix 補完機能で表示される名称
body オリジナルの定型文
description スニペットの説明

これらをjavascript.jsonに記述すると、次のようにprefixに記述した名称fizzbuzzで、bodyに記述したオリジナルの定型文が入力できるようになります。

13

ここで、${1:arg}${2:mod}プレースホルダ(値を持ったタブストップ)と呼ばれ、Tabキーにより連続してパラメータを入力することができます。$0は特殊なタブストップで、最後のカーソル位置を示します。

このように、繰り返し記述するコードをユーザースニペットに定義しておくことにより、コーディングの効率化を図ることができます。

入れておきたいGit系拡張機能

せっかくGitを入れたので、Gitコマンドを操作しやすくする拡張機能「Git Lens」と「Git History」を紹介します。

Git Lensで、誰が・いつ編集したかを表示

Git Lensをインストールすると、エディタ内に常に「誰が・いつ」コミットしたかの内容が表示されるようになります。グレーになっている文字列上にマウスを持ってくると、ホバーウィンドウにてコミットの詳細が表示されます。

14

また、アクティビティバーにGit Lensのアイコンが追加され、コミットログやブランチの一覧などさまざまな情報が表示されるようになります。

Git Historyで、コミットログを見やすく表示

Git Historyは、プロジェクトのコミットログをグラフィカルに表示する拡張機能です。GUIで差分の閲覧やチェリーピックも可能です。

ログの見方に慣れない方にはおすすめです。

15

覚えておきたいショートカットキー

VSCodeに限らず、ソースコードエディタにはコーディングを効率化するためのさまざまなショートカットキーが定義されています。

入門した今だからこそ覚えておきたい、便利なショートカットキーを紹介します。

選択した行を上下に移動する

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く