2. 方法1: 設定画面から. 環境 今回はMacの環境を想定した解説です。 項目 バージョン OS Mac 10.15.6 VSCode 1.48.2 手順 1. 選択 VSCodeは初版が2015年リリースの新しいエディタですが、インテリセンス、ユーザースニペット、Emmet、マルチカーソル、拡張機能というコーディングにうれしい機能が充実しています。VSCodeを検討中あるいは使いはじめたばかりの若手エンジニアが、いち早く初心者を脱出するための使いこなし方を解説します。, はじめまして、KC(けーしぃ、@kcpoipoi)と申します。技術書典6にサークル参加してたら「キミ、Web執筆に興味ない??」とお声がけいただきました。Web執筆は初めてなので至らない点があるかもしれませんが、何卒よろしくお願いいたします。, ───さて、みなさんは普段どのようなソースコードエディタを使用しておりますでしょうか。, Vim? emacs? Atom? サクラエディタ? それとも……、Visual Studio Code(以降、VSCode)でしょうか?, VSCodeは、Microsoft製のソースコードエディタです。Electronフレームワーク上で構築されており、Windows、MacOS、Linuxに対応しています。, 初版のリリースは2015年で、比較的新しいエディタです。しかし、ほぼ毎月アップデートが重ねられており、この記事の執筆時点で最新版はバージョン1.35.1となっています。, 本記事を読み終える頃には、次の点について基本的な知識が得られていることと思います。, 入門者向け記事としてはややニッチな方面かもしれませんが、ぜひ押さえておきたい機能ばかりです。, また、ショートカットキーも多く使うので、早い段階で体に染み込ませておきたいところですね。, 特に、普段からVSCodeを使用しているけど、マルチカーソルについてあまり調べてこなかったという方には、ぜひ読んでいただければと思います。, VSCodeを使いはじめたばかりの方は、まずはフォルダを開く、コマンドパレットを開く(Ctrl + Shift + P)などの操作を覚えると、読み進めやすいです。, ショートカットキーはWindowsのキートップ(CtrlやAlt)で表記しています。Macでは次のキートップに読み替えてください。, VSCodeには、インテリセンス、ユーザースニペット、Emmet、マルチカーソル、そして拡張機能(エクステンション)という特徴的な機能があります。順番に見ていきましょう。, コードの一部を書くと自動的に候補を表示してくれたり、変数の型やパラメータの情報を表示してくれます。みなさんも普段からお世話になっていることでしょう。, VSCodeでは、forやtrycatchのような、よく使う定型文がすでに登録されています。これら以外にもオリジナルの定型文を登録したい場合は、ユーザースニペット機能を使うことができます。, 本記事では、Fizzbuzzテスト用のユーザースニペットを定義することにより動作を確認します。, EmmetはWeb開発者向けのツールで、特定の構文によりHTMLおよびCSSを簡潔に記述することができます。2013年2月にバージョン1.0がリリースされましたが、それ以前はZen-Codingと呼ばれていたようです。, 例えば、div+div>p>span+emというワンライナーの構文で、次のHTMLへの展開が可能となります。, VSCodeではEmmetが標準で搭載されており、別途ツール等を入れる必要はありません。本記事ではいくつかのEmmet記法の例により、その動作を確認します。, 単語を全選択して一度に編集したり、少ない操作でJSONからキーを抜き出すなど、使い方次第でコーディング効率を大きく向上させることが可能です。, 本記事では、基本的なショートカットキーとそれらを組み合わせたさまざまなマルチカーソル編集を紹介します。, VSCodeは、標準でJavaScriptおよびTypeScritptの言語サポート、ならびにNode.jsによるデバッグ機能を搭載しています。, さらに、拡張機能をインストールすることで、多種多様な言語サポートやデバッグ機能、ツールを導入できます。拡張機能には、次のようなものがあります。, VSCodeといえば、おすすめの拡張機能を紹介する入門記事をよく見かけますが、本記事ではインテリセンスやマルチカーソルなどエディタとしての機能を使いこなしてもらいたいと考えています。そのため拡張機能の紹介は、最低限入れておきたいGit系のGit LensとGit Historyに留めます。, ここではVSCodeとGit for Windowsのインストールについて説明します。すでにインストールされていれば、読み飛ばして差し支えありません。, 途中で「PATHへの追加(再起動後に使用可能になる)」のチェックを忘れないようにし、画面の指示に従ってインストールしましょう。, インストールが終わったら、お好みで次の拡張機能により日本語化もできます。必要に応じて導入してみてください。, Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace, Git for Windowsの公式サイトより、インストーラをダウンロードします。同じく、画面の指示に従ってインストールしましょう。, VSCodeとGitをインストール後、PowerShellやターミナルを起動し、PATHが通っているか確認しましょう。次の通りバージョンが返ってくればOKです。, インストールできたところで、簡単に画面構成について説明します。VSCodeは、次のユーザーインターフェースで構成されています。, エディタ(エディタグループ)ソースコードファイルを編集するメインエリアサイドバーエクスプローラやデバッグ機能など、さまざまなビューが表示されるエリアステータスバー現在開いているプロジェクトやファイルの情報が表示されるエリアアクティビティバー主にサイドバーのビューを切り替えるためのボタンが表示されるエリアパネルコンパイラの警告、出力、統合ターミナルなどが表示されるエリア, VSCodeとGitは無事にインストールできたでしょうか。続いては、インテリセンスの動作の確認、ユーザースニペットの定義、そして簡単にGit系の拡張機能について紹介します。, JavaScriptファイルを使って、インテリセンス機能がどのように働くか簡単に見てみましょう。, まず、VSCodeで適当なフォルダを開き、JavaScriptファイルを2つ(main.jsとsub.js)生成してください。sub.jsに次の通り、関数とドキュメント(JSDoc)を定義します。, すると、sub.eをタイプした時点で、次のようにホバーウィンドウが表示されたかと思います。, インテリセンス機能により、sub.jsで定義したメソッドとそのドキュメントが読み込まれ、ヒントとして適切に表示されることが分かりました。, ファイル > 基本設定 > ユーザースニペットを選択してください。インプットボックスが表示されるので、javascript.jsonを検索し、開きます。, これらをjavascript.jsonに記述すると、次のようにprefixに記述した名称(fizzbuzz)で、bodyに記述したオリジナルの定型文が入力できるようになります。, ここで、${1:arg}や${2:mod}はプレースホルダ(値を持ったタブストップ)と呼ばれ、Tabキーにより連続してパラメータを入力することができます。$0は特殊なタブストップで、最後のカーソル位置を示します。, このように、繰り返し記述するコードをユーザースニペットに定義しておくことにより、コーディングの効率化を図ることができます。, せっかくGitを入れたので、Gitコマンドを操作しやすくする拡張機能「Git Lens」と「Git History」を紹介します。, Git Lensをインストールすると、エディタ内に常に「誰が・いつ」コミットしたかの内容が表示されるようになります。グレーになっている文字列上にマウスを持ってくると、ホバーウィンドウにてコミットの詳細が表示されます。, また、アクティビティバーにGit Lensのアイコンが追加され、コミットログやブランチの一覧などさまざまな情報が表示されるようになります。, Git Historyは、プロジェクトのコミットログをグラフィカルに表示する拡張機能です。GUIで差分の閲覧やチェリーピックも可能です。, VSCodeに限らず、ソースコードエディタにはコーディングを効率化するためのさまざまなショートカットキーが定義されています。, Alt + 上下矢印キーで、選択中の行を上下に移動できます。複数行選択にも対応しています。近い行ならコピペの手間をなくすことができますね。, また、インデントがある行への移動でも自動的にインデントを施してくれるため、非常に使い勝手がよくなっています。, 通常の検索(Ctrl + Shift + F)では、現在エクスプローラに展開している全てのファイルに対し、一致する文字列の検索を行います。, さらに、検索のサイドバーを表示した状態でCtrl + Shift + Jを押すと、対象とするファイルを絞り込んで検索をかけることが可能となります。, 次の例では、最初はTypeScriptファイル(hoge.ts)にconsoleが含まれるため、通常の検索でhoge.tsも検索結果一覧に表示されていますが、含めるファイルを.jsに限定することで、検索結果一覧に表示されるファイルがJavaScriptファイルのみになっていることが分かります。, 先ほどの検索機能は、展開中のフォルダ全体を検索するものでしたが、今度はファイル単位での検索を見ていきます。適当なファイルを開きCtrl + Fを押すと、右上に検索用のインプットボックスが表示されます。, ここで、Alt + Rにより正規表現検索を有効にしてみましょう。.