特集
» 2016年12月16日 05時00分 UPDATE

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

マイクロソフト発のクロスプラットフォームなテキストエディターである「Visual Studio Code」の概要と、使い方の基本をまとめる。

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

連載目次

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


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

VS Codeとは何か

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

  • クロスプラットフォーム
  • 軽量/高速
  • デバッグ機能を内蔵
  • 標準で多数の言語をサポート
  • IntelliSenseサポート
  • Git機能サポート
  • エクステンションによる機能拡張
  • タスク機能

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

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

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

VS Code VS Code

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

VS Codeのインストール

 VS CodeのバイナリはVisual Studio Code公式サイトのトップページまたはダウンロードページからダウンロード可能だ(Stable版)。Windows版、Mac版、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を起動できる。

 Mac版は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ソフトウェアセンター」アプリで開き[インストール]ボタンをクリックする。

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

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

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

@IT Special

- PR -

TechTargetジャパン

Touch Barという新UIを得た「MacBook Pro」、プレゼント!

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

RSSについて

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

メールマガジン登録

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