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

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

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