特集
» 2017年09月08日 05時00分 公開

特集:Visual Studio Code早分かりガイド:Visual Studio Codeの使い方、基本の「キ」 (1/6)

Microsoft発のクロスプラットフォームなテキストエディタ、「Visual Studio Code」。本稿ではその概要と、使い方の基本をまとめる(バージョン1.15対応)。

[かわさきしんじ,Insider.NET編集部]
「特集:Visual Studio Code早分かりガイド」のインデックス

連載目次

* 本稿は2015年7月10日に公開、2016年4月19日/2016年5月12日/2016年7月28日/2016年12月16日/2017年4月14日に改訂した『Visual Studio Codeの使い方、基本の「キ」』をバージョン1.15のリリースに合わせて再改訂したものです。


 本稿ではMicrosoftが提供するクロスプラットフォームな高機能エディタ「Visual Studio Code」(以下、VS Code)でできること、操作の基本についてまとめることにする。

VS Code 1.15までに追加された新機能

 VS Code 1.15に合わせた改訂を行うまでの間に、VS Codeに追加された機能の中を幾つか紹介しておこう。

  • ワークベンチのテーマ設定: VS Codeのワークベンチ(ウィンドウ各部)の配色を自由に設定できるようになった(VS Code 1.11でプレビュー機能として登場し、VS Code 1.12/1.13で改善が行われた)
  • SCM(Source Code Management) APIの追加: VS Code自体はGit向けのSCM拡張機能を内蔵しているが、VS Team Services用の拡張機能など、独自のSCM拡張機能を他者が作成できるようになった(VS Code 1.12/1.13)
  • VS Codeに組み込みのGit機能の改善(VS Code 1.12/1.13/1.14)
  • IntelliSenseによる候補のそのドキュメントのサイドバイサイド表示(VS Code 1.13)
  • VS Codeの更新があった際の通知方法の変更(VS Code 1.14)
  • コマンドパレットの機能改善: MRUリストの追加、VS Codeウィンドウ間の切り替えの簡略化など(VS Code 1.14)
  • [拡張機能]バーへの[インストール済み]拡張機能と[推奨]拡張機能の表示(VS Code 1.14)
  • 統合ターミナルの機能追加: ターミナル内の文字列検索、範囲選択/コピー機能の改善など(VS Code 1.14)
  • メニューバーへの[タスク]項目の追加(VS Code 1.14)
  • 64ビットWindows版の登場(VS Code 1.15)
  • 構文ハイライトのカスタマイズ(VS Code 1.15)
  • 統合ターミナルで使用する環境変数の事前設定(VS Code 1.15)
  • [エクスプローラー]ビュー、[デバッグ]ビュー、[拡張機能]ビューに表示する項目のカスタマイズ(VS Code 1.15)
  • カラーピッカーの追加(VS Code 1.15)

 この他にもさまざまな面でVS Codeは進化を遂げているが、それら全てを本稿で取り上げるのは無理なので、詳しいことを知りたい方は各バージョンのリリースノートを参照されたい。


VS Codeとは何か

 VS CodeはElectronと呼ばれる、Web技術を使用してクロスプラットフォームなデスクトップアプリを開発するためのフレームワーク上に構築されている。VS Codeの特徴としては次のようなことが挙げられる。

  • クロスプラットフォーム
  • 軽量/高速
  • デバッグ機能を内蔵
  • 標準で多数の言語をサポート
  • IntelliSenseサポート
  • Git機能サポート
  • 拡張機能によるVS Code自体の機能や操作性の向上
  • タスク機能

 VS Codeの大きな特徴の1つは、多種多様なプログラミング言語(やマークアップ)をサポートしていることだ(標準でサポートされている言語については、公式サイトの「Languages」ページ(英語)を参照)。つまり、多くの言語で構文ハイライトが行われたり、IntelliSenseによる入力補完機構を使用して快適なコード入力ができたりする。

 標準でサポートされていない言語であっても、[拡張機能]ビュー(後述)やVisual Studio Marketplaceで検索すると、その言語用の拡張機能が見つかるかもしれない(ただし、サポートの度合いは言語により異なる。標準では構文ハイライトしかサポートされていない言語も多い。こうした言語では、より高度な機能を提供する拡張機能を探してみるとよいだろう)。

 なお、VS Codeはあくまでもエディタであり、IDEではない。とはいえ、デバッグ機能やGitサポート、タスク(頻繁に行う作業の自動化)が組み込まれているので、「コード編集→何らかのコンパイル/ビルド処理→デバッグ実行→コード編集→……→Gitリポジトリへのコミット/プッシュ」といったプログラマーが日常的に行っている作業を1つのエディタの中で完結させることができる(最近のバージョンではVS Codeのウィンドウ内で統合ターミナルを開くことも可能となっているので、VS Code内でコマンドライン操作も行えるようになっている)。本家VSほど多種多様な機能を提供するものではないが、手軽な環境で快適に開発作業を行うことを目的としたものといえる。

VS Code VS Code

 以下ではWindows版のVS Code 1.15.1(64ビット版)を基本として、必要に応じてmacOS/Linux版(本稿ではUbuntu 16.10を使用。他のバージョンでは本稿とは設定などが違っている可能性もあるので留意されたい)のVS Codeについても記述していくことにする。

VS Codeのインストール

 VS CodeのバイナリはVisual Studio Code公式サイトのトップページまたはダウンロードページからダウンロード可能だ(Stable版)。Windows版、macOS版、Linux版(Debian/Ubuntu/Red Hat/Fedra/CentOS)がある。これらについて、Stable版(安定版)とInsiders版の2種類が提供されている(Insiders版のダウンロードはこちらから)。

VS Code公式サイトのトップページ。[Download for 〜]ボタンの隣にあるドロップダウンから各種バージョンを選択できる VS Code公式サイトのトップページ。[Download for 〜]ボタンの隣にあるドロップダウンから各種バージョンを選択できる

 Insiders版は、新機能やバグフィックスを先取りしたバージョンだが、Stable版よりも動作が不安定だったり、試験的に搭載された機能の仕様が最終的には変更されたりする可能性もある(これらはサイドバイサイドにインストールできるとのことだが、筆者は常用していない)。最新機能をいち早く使いたい人はInsiders版を、そうでなければ月に一度のペースでリリースされているStable版を利用するのがよいだろう。本稿ではStable版をインストールしている。

 Windows版はインストーラーをダウンロードしたら、それを実行するだけだ。起動にはスタートメニューやスタート画面でアイコンを選択する。インストーラーのオプションでパスにVS Codeを追加した場合には、コマンドプロンプトで「code」と入力してもVS Codeを起動できる。

 macOS版はZIP形式のファイルになっているので、これを展開して、.appファイルを[アプリケーション]フォルダに移動する。後はDockに追加すれば、いつでもワンクリックでVS Codeを起動できるようになる。ターミナルから起動したい場合には、VS Codeの「コマンドパレット」(詳しくは後述)を使用する。

 VS Codeの起動後に[Command]+[Shift]+[P]キーを入力して、「コマンドパレット」を表示したら、「shell」などと入力して、パレットに[シェル コマンド: PATH 内に 'code' コマンドをインストールします](Shell Command: Install 'code' command in PATH)が表示されたら、これを選択する。これによりPATH変数にVS Codeを起動するためのコマンド「code」が追加され、ターミナルで「code」と入力するだけでVS Codeを起動できるようになる。

PATH変数にcodeコマンドを追加 PATH変数にcodeコマンドを追加

 Linux版についてはUbuntuへのインストールを例に取ろう。上記のダウンロードページから.debファイルをダウンロードして、Ubuntu Softwareアプリを使ってインストールする(Firefoxを使っている場合には、ダウンロードしたファイルの処理方法を問い合わせるダイアログが表示されるので、[ソフトウェアのインストール]を選べばよい)。

 次にVS Codeの画面構成について見ていこう。

       1|2|3|4|5|6 次のページへ

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。