特集
» 2017年04月14日 05時00分 UPDATE

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

マイクロソフト発のクロスプラットフォームなテキストエディター「Visual Studio Code」の基本をまとめる(バージョン1.11対応)。

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

連載目次

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


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

VS Code 1.11までに加えられた便利な機能

 その前に、簡単にバージョン1.11に合わせた改訂を行うまでの間に、VS Codeに追加された機能として、筆者が「おっ!」と思ったものを列挙しておこう。箇条書き直後の要素には本稿で説明している場所へのリンクを、その後の説明にはVS Code公式サイトでの説明へのリンクを付加してあるので、本稿を読み進めるのが面倒という人はリンクを使ってほしい。

 この他にもさまざまな面で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を基本として、必要に応じて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ジャパン

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

Focus

- PR -

RSSについて

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

メールマガジン登録

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