【コラム】

イマドキのIDE事情

174 Microsoftのプログラミング向けエディタ「Visual Studio Code」に注目!

 
  • >
  • >>

174/174

Visual Studio Code(以下、VS Code)はMicrosoftが無償で提供しているプログラミング向けのテキストエディタだ。今年11月、ベータ版がリリースされ、オープンソース化が発表された。ソースコードはGitHubで公開されている

名前こそVisual Studioの名を冠しているものの、Atom(本連載第169回~171回参照)と同様、マルチプラットフォーム対応のGUIツールキット「Electron」で開発されている。まだベータ版ではあるものの、Windows、Mac、Linuxで利用でき、実用にも十分な機能を備えている。今回はこのVS Codeの実力を探ってみたい。

Visual Studio CodeのWebサイト

プログラミング向けの基本機能

VS Codeはさまざまなプログラミング言語のシンタックスハイライトに対応している。また、CTRL+SPACEでコードアシスト機能を利用できる。通常はファイル内のキーワードを用いた単純な補完だが、HTMLファイルであればHTMLタグ、CSSであればセレクタやスタイルの指定などファイルの種類によってはコンテキストに応じた補完候補が提供される。

コードアシスト機能

HTMLの場合はコードアシストに加えてEmmetの展開もサポートされており、例えば「li*5」と入力してTABキーを押すと「<li></li>」5個分に展開してくれる。

また、HTMLやCSS、JavaScriptなどに関しては自動的にソースコードの構文エラーや警告をチェックしてくれる。エラー箇所にマウスを合わせると内容がツールチップで表示される。構文チェックの結果はステータスバーにも表示され、ここをクリックするとエラーの一覧からエラー箇所にジャンプできる。

コードチェック

JavaScriptのサポートが充実

VS Codeが特に威力を発揮するのは、なんといってもJavaScriptの開発だ。TypeScriptやECMAScript6、CommonJSなどもサポートされており、特にTypeScriptやECMAScript6利用時は型情報を生かした強力な補完機能やナビゲーション機能、リファクタリング機能などを利用できる。

JavaScriptのコードアシスト

なお、ECMAScript6を使用したい場合は作業ディレクトリに以下の内容でjsconfig.jsonというファイルを作成しておく必要がある。


{
  "compilerOptions": {
    "target": "ES6"
  }
}

また、VS Codeのタスク実行機能を使用してGulpやGruntを実行したり、サイドバーのデバッグビューではJavaScriptのデバッグを行ったりすることも可能だ。

:JavaScriptのデバッグ

標準でGitもサポート

Gitも標準サポートされている。サイドバーをGitビューに切り替えることでファイルのステージング、コミット、リモートリポジトリへのプッシュやプルといった操作ができる。また、ウィンドウ左下にはブランチ名が表示されており、ここからブランチの作成や切り替えを行うことが可能だ。

サイドバーからGitの操作が可能

スタータスバーのブランチ名をクリックするとブランチ操作が可能

最近のソフトウェア開発ではGitHubやBitBucketといったサービスの普及もあり、Gitの利用が一般的になりつつある。標準でGitがサポートされているのはプログラミング向けのテキストエディタとしてはありがたいところだ。

Markdown編集環境としてのVisual Studio Code

プログラミング言語向けの機能だけでなく、Markdownのサポートも充実している。

Markdownのシンタックスハイライトはもちろんのこと、プレビューにも対応している。ウィンドウを分割することでプレビューしながらMarkdownの編集を行うことも可能だ。編集内容は即座にプレビューに反映され、動作も軽快だ。また、一部のMarkdown対応エディタのプレビュー機能のように、編集時にスクロール位置がずれてしまうといったこともないため、使いやすい。

Markdownプレビュー

VS Codeはデフォルトではテキストの折り返しに対応していないが、「Code」メニューの「Preferences」→「User Settings」で表示されるsettings.jsonに以下の設定を追記することで、ウィンドウ幅に合わせて折り返しできるようになる。ただし、折り返しの挙動が英文向けなのでいずれにしても日本語文書の編集にはあまり向いていないかもしれない。


{
  "editor.wrappingColumn": 0
}

プラグインによる拡張も可能

VS Codeはプラグイン機構も備えており、例えばデフォルトでサポートされていないプログラミング言語向けのシンタックスハイライト、コードチェック、デバッグといった機能をプラグインとして追加することが可能だ。プラグインはVisual Studioファミリー向けのマーケットプレイスで探すことができる。

Visual Studioマーケットプレイス

また、VS Code上からはF1で表示されるコマンドパレットからInstall Extensionコマンドを実行するとプラグインを選択してインストールすることができる。

プラグインのインストール

VS Codeはまだ登場してから日が浅いということもあってプラグインの数は少ないが、今後の充実に期待したい。

まとめ

VS Codeは非常に強力なプログラミング向けのエディタだ。特にJavaScript関連の機能が充実していることに加え、マルチプラットフォームに対応しているということもあり、Web開発向けテキストエディタの決定版となるかもしれない。利用にあたってはVS CodeのWebサイトで提供されているドキュメントにも目を通しておくといいだろう。

今後もVS Codeの進化に要注目だ。

  • >
  • >>

174/174

インデックス

連載目次
第174回 Microsoftのプログラミング向けエディタ「Visual Studio Code」に注目!
第173回 Mac用Gitフロントエンドの老舗「Tower2」の実力は?
第172回 GitHub Desktopとは?
第171回 Github製の次世代テキストエディタAtomをチェック!(3)
第170回 Github製の次世代テキストエディタAtomをチェック!(2)
第169回 Github製の次世代テキストエディタAtomをチェック!(1)
第168回 IDEで試すJava8、Eclipse/NetBeans/IntelliJ主要IDEの対応状況
第167回 手軽に導入!JS Test DriverでJavaScriptをテストしてみよう
第166回 Firefox OSアプリを簡単に開発できる「AppMaker」とは?
第165回 GoogleからHTML5オーサリングツールが登場!「Google Web Designer」
第164回 OSS化されたPython IDE、JetBrainsのPyCharmを使ってみよう
第163回 「MarkdownPad」Windowsで使える高機能Markdownエディタ
第162回 手軽に設置できるGithubクローン「GitBucket」を使ってみよう
第161回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(4)
第160回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(3)
第159回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(2)
第158回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(1)
第157回 SeleniumでWebアプリケーションのテストを自動化しよう
第156回 新たなAndroid用IDE、IntelliJベースの「Android Studio」登場!
第155回 様々な言語、PaaSに対応! 注目を集めるWeb IDE「Codenvy」とは?
第154回 簡単デプロイ!「Gitblit」で共有Gitサーバを手軽に構築
第153回 Groovyベースのビルドツール「Gradle」をEclipseで使ってみる
第152回 最強のGitクライアントがWindowsにやってきた!「Atlassian SourceTree」
第151回 メモからプログラミングまで!? Android上で動作するテキストエディタたち
第150回 HTML5にも対応! Web開発環境としてのNetBeans 7.3
第149回 スマートフォン向けの新OS! Firefox OSアプリを作ってみよう
第148回 EclipseのJavaScriptエディタでjQueryを使用する
第147回 グラフィカルなログビューアでログを手軽に分析してみよう
第146回 JavaScriptの問題点を解決できるか? Chromeで試すCoffeeScript
第145回 タッチでWebアプリ開発!「TouchDevelop」が見せるタッチデバイスの可能性
第144回 VMwareがOSSで公開したJavaScriptエディタ「Scripted」を試してみよう
第143回 今話題の高機能テキストエディタ「Sublime Text 2」その人気の理由は?
第142回 「Github for Windows」でGithubをはじめてみよう!
第141回 次世代JavaScript? Microsoft発の新言語TypeScriptをIDEで試してみる
第140回 Bootstrapを使ったUIを簡単に作成できる「Jetstrap」
第139回 ブラウザ上で動作するreStructredTextエディタ「NoTex」
第138回 JavaScriptを最適化! Closure Compilerを活用しよう
第137回 Travis CIとBuildHive、オンラインCIサービスを活用しよう
第136回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(3)
第135回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(2)
第134回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(1)
第133回 e(fx)clipseでJavaFX 2を試してみよう!
第132回 CSSの作成を効率化! EclipseでLESSを編集するためのプラグイン
第131回 Adobe製のオープンソースHTMLエディタ「Brackets」を試してみよう
第130回 「Initializr」でHTML5サイトのテンプレートを作成しよう
第129回 リポジトリ管理ツール「Nexus」でMavenをさらに活用しよう!
第128回 「Codiqa」でjQuery MobileのデザインをWYSIWYG編集!
第127回 JetBrainsの新言語「Kotlin」をWebブラウザで試してみよう!
第126回 ついに登場! Android上で動作する開発環境「AIDE」
第125回 周辺ツールでGitHubをさらに活用しよう
第124回 HTML5/CSS3対応エディタ「BlueGriffon」を試してみる
第123回 WebアプリからEclipseプラグインまで、様々なMongoDBフロントエンド
第122回 「Ceylon IDE」でJavaベースの新言語Ceylonを試してみる
第121回 Scala開発はEclipseに決まり? 「Scala IDE for Eclipse 2.0」登場
第120回 EmacsライクなWindows用テキストエディタ「xyzzy」
第119回 Eclipseベースの帳票作成ツール「JasperWave」
第118回 Eclipse発の新言語「Xtend」を試してみよう!
第117回 HTML5/CSS3アニメーションをグラフィカルに作成できる「Sencha Animator」
第116回 高機能なWindows用SQL開発環境「A5:SQL Mk-2」
第115回 高機能なプログラマ向けテキストエディタ「Notepad++」
第114回 Padre - Perlで書かれたPerl開発者向け軽量IDE
第113回 デスクトップ&Webで動作するR言語の統合開発環境「RStudio」
第112回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(5)
第111回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(4)
第110回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(3)
第109回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(2)
第108回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(1)
第107回 eBay Open Sourceの「VJET JavaScript IDE」を試してみる
第106回 ユニットテストを支援するEclipseプラグイン
第105回 Spring Frameworkを強力サポート! 「SpringSource Tool Suite」
第104回 JavaSE 7対応! NetBeans 7.0の新機能を試してみる
第103回 Scalaプログラミングなら「IntelliJ IDEA Community Edition」
第102回 Google ChromeのDeveloper Toolsを使いこなそう
第101回 App InventorでAndroidアプリをビジュアル開発!
第100回 GWTもビジュアル開発! 無償化されたGWT Designerを使ってみよう
第99回 Web IDEの本命か? Eclipse Orionを試してみる
第98回 HTMLを高速コーディング! Zen CodingをEclipseで使ってみる
第97回 JavaScriptライブラリClosure Libraryを手軽に試せる"Closure Kitchen"
第96回 Cloud9 IDE - node.jsで動作するWebベースのIDE
第95回 Rubyで開発された多機能テキストエディタ「Radcar」
第94回 最強のJavaScript IDE「WebStorm」を試してみる
第93回 分散バージョン管理システムMercurialを使ってみよう
第92回 これが定番! ソフトウェア開発に便利な小物ツール集
第91回 Eclipseベースの統合翻訳環境「Benten」を使ってみよう
第90回 かんばんアプリ「JAM Circle」でタスク管理!
第89回 FlexdPMDでActionScriptのコードをチェックしてみよう!
第88回 e4とEclipse 4.0、次世代のEclipseに触れてみる
第87回 今年もEclipseの季節がやってきた! Heliosの新機能(3)
第86回 今年もEclipseの季節がやってきた! Heliosの新機能(2)
第85回 今年もEclipseの季節がやってきた! Heliosの新機能(1)
第84回 JavaScriptもユニットテスト! JsUnitを使ってみよう
第83回 HTTPモニタでHTTP通信を覗いてみよう!
第82回 NetBeans 6.9 betaで次期NetBeansの新機能に触れる
第81回 EclipseでClojureプログラミング! Counterclockwiseを試してみる
第80回 .NET/PHP対応! オンラインIDE CodeRun Studio
第79回 Java VMの監視/障害解析に役立つツール
第78回 Small Basicで簡単BASICプログラミング!
第77回 携帯Webアプリ向け開発ツールのまとめ
第76回 NetBeansでJavaFX Composerを使ってみよう!
第75回 オープンソースのHTMLエディタKompoZerでWebオーサリング!
第74回 高機能なGroovy開発環境「Groovy-Eclipse 2.0」リリース!
第73回 高機能ERモデリングツール「ER Master」でデータベース設計!
第72回 EclipseでAndroidアプリケーション開発!
第71回 JavaEE 6対応! 最新IDE NetBeans 6.8の新機能
第70回 Webサービスのテストツール「SOAP UI」をEclipseで使ってみよう
第69回 ついにオープンソース化されたIntelliJ IDEAを使ってみよう!
第68回 マルチブラウザ対応Webサイト制作ツール「Pirka'r」を試してみる
第67回 オープンソースのFlashデバッガ「De MonsterDebugger」を試してみる
第66回 分散バージョン管理システムGitのGUIフロントエンド
第65回 MicrosoftのAjax高速化ツールDolotoを試してみよう!
第64回 Eclipseのキーバインドをvi/Emacs風にカスタマイズしよう
第63回 マルチブラウザ対応のJavaScriptデバッガ「JSDT」を試してみよう!
第62回 Flex MonkeyでFlexのUIテストを自動化しよう
第61回 Maven、Kenai、Hudsonをサポート! NetBeans 6.7の新機能
第60回 Swing用Eclipseプラグインの決定版! Visual Swing for Eclipse
第59回 Eclipse 3.5 Galileoリリース! 新機能をチェック
第58回 Rails向けのWindows用軽量IDE「RoRED」を試してみる
第57回 PyScripter - 軽快動作のWindows向けPython開発環境
第56回 Bespin - Webベースの統合開発環境の可能性を探る
第55回 デバッグも可能なビジュアルAIR開発環境「AIR GEAR」を使ってみよう
第54回 Google App EngineがJava対応! Google Plugin for Eclipseで開発
第53回 WebLogic対応! Oracle Enterprise Pack for Eclipse 11gを探る
第52回 EclipseでGitを使おう! EGitを試してみる
第51回 無償ではじめるSilverlight開発環境
第50回 Soyatec eFace - JavaでXAMLを使おう
第49回 グラフィカルなデータベースフロントエンド
第48回 KodersとKrugleでOSSのソースコードを検索!
第47回 XMindでマインドマップを描いてみよう!
第46回 JetBrainsのRuby IDE「RubyMine」を試してみる
第45回 IntelliJ IDEA 8.0が登場! Groovy/Flex等のサポートが強力に
第44回 クラウドサービスとも連携! Aptana Studio最新版を試してみよう
第43回 CIツールとIDEの連携 - EclipseからHudsonを利用する
第42回 EclipseでMavenを使おう
第41回 Eclipseの編集機能を強化するプラグイン
第40回 Groovy/Grailsもサポート! NetBeans 6.5ベータ版を試してみる
第39回 Wicket、Grails、Click - IDEでみる軽量Javaフレームワーク
第38回 待望のバージョンアップ! Eclipse 3.4 Ganymede(4)
第37回 待望のバージョンアップ! Eclipse 3.4 Ganymede(3)
第36回 待望のバージョンアップ! Eclipse 3.4 Ganymede(2)
第35回 待望のバージョンアップ! Eclipse 3.4 Ganymede(1)
第34回 Eclipseのショートカットを使いこなそう
第33回 これが定番! オープンソースのEclipseプラグインリスト
第32回 NetBeansでPHP開発! 6.1のEA版を試す
第31回 退屈な作業を自動化! Eclipse Monkeyを使ってみる
第30回 ついに登場! NetBeans 6.1の新機能
第29回 EclipseでScalaプログラミング!
第28回 IEで利用可能なJavaScriptデバッグツール
第27回 Eclipse 3.4 Ganymedeの新機能
第26回 JBoss ToolsでSeam開発!(2) - Seam開発をサポートする機能
第25回 JBoss ToolsでSeam開発!(1) - 便利なオールインワンインストーラが登場
第24回 ちょっと便利なEclipseプラグイン
第23回 Windowsで利用可能なテキストエディタ
第22回 LinuxのIDE事情 - Linuxで利用可能なオープンソースIDE
第21回 Eclipseをオンデマンドで利用するためのサービス
第20回 無償で利用可能な.NET統合開発環境
第19回 Silverlightにも対応したSpket IDE
第18回 オープンソースのFlash開発環境
第17回 軽量Java IDE "JCreator"を試してみる
第16回 Java製高機能テキストエディタ"jEdit"を使ってみよう
第15回 EclipseのGUIアプリケーション開発事情
第14回 進化するMylyn - Mylyn 2.0の新機能
第13回 Adobe AIRにも対応! Flex Builder 3
第12回 JBoss Tools - Exadel Studioがオープンソース化
第11回 Seasar2をサポートするEclipseプラグイン
第10回 Spring 2.0にも対応! "SpringIDE 2.0"
第9回 RailsやAIRもサポート! WebIDE Aptana
第8回 Eclipse/NetBeansでJavaFXスクリプティング!
第7回 さまざまなLLに対応した軽量IDE"KomodoEdit"
第6回 EclipseでPHP開発! PHP Development Tools
第5回 もうひとつの無償IDE - "Oracle JDeveloper"を試してみる
第4回 Eclipseでもオールインワン - さまざまなEclipseディストリビューション
第3回 Eclipseを追い越せ! NetBeans 6.0
第2回 Eclipse 3.3の新機能
第1回 Java IDEの二大巨頭"Eclipse"と"NetBeans"を比較する

もっと見る



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

ネットバンキングを利用している理由1位は?
[13:05 7/29] マネー
2016年上半期書籍売上・出版社ランキング、1位は?
[13:03 7/29] マネー
MRJの7月進捗--最大20で基本合意、50回以上の飛行試験で3・4号機は今夏空へ
[13:02 7/29] 趣味
被買収企業の正社員42%が転職を検討 - 何が不安?
[13:01 7/29] キャリア
【特別企画】海外志向や起業意欲の強い方必見!上場企業の役員クラスとの人脈作りができてグローバルに活躍できる企業があるらしい……
[13:00 7/29] キャリア

求人情報