Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Visual Studio Code の機能と Sublime Text2 の機能を 7 つだけ比較してみる

f:id:tbpg:20150430232154j:plain

概要

Visual Studio Code の機能と Sublime Text2 の機能を比較してみます

前提

普段の開発について

私は、普段 Sublime Text2 で Ruby を利用して開発を行っています。
Sublime Text3 はまだ利用に踏み切っていないため、 Sublime Text3 独自の新機能は把握していません。

IDE の知識について

Java + Eclipese については過去数年の経験はあるので、ある程度どんなことができるか把握しています。
しかし、ここ 2・3 年の新しい機能については把握しておりません。

.NET の知識について

ほんの少し触ったことがある程度。
C# .Net の言語を利用する際に便利な機能があるかもしれませんが、そういった機能については触れません。

便宜上

Ruby 開発者の視点から Visual Studio Code と Sublime Text2 を比較した場合、
Visual Studio Code の良さを伝える点ではよくないかもしれません。
また、Visual Studio Code はまだ発表されたばかりなので、今後どんどん良くなっていくでしょう。

このような点を踏まえた上で、

  • 自分の用途以上のことについて調べるコストを節約する
  • 比較対象があると機能について説明しやすい

という 2 点から、今回の形式での機能紹介にしました。

Visual Studio Code のみの機能

チラ見機能( Peek )

Peek - Visual Studio Code Doc

例えばスクロールしないと確認できないような大きなソースコードがあり、
最下部から最上部のメソッド( 関数 )を呼び出しているような場合、 メソッド呼び出し部で Alt + F12
チラ見機能 ( Peek ) を利用すると便利です。

この View から直接定義元のメソッド( 関数 )を編集することもできます。

f:id:tbpg:20150430232202g:plain

アニメーションGIFのオペレーション

  • ファイルの最下部に移動
  • hoge('msg') をマウスでクリック
  • Alt + F12 で Peek を実行
  • Peek で表示されたメソッドの定義内容を編集
    • ※ちょっと分かりにくいですが、 hoge('msg') の次の行に Peek の内容が表示されています
  • メソッドの定義元まで移動して、 Peek の内容が編集されていることを確認

デフォルトで Emmet に対応

Sublime Text も Plugin によって Emmet に対応することができますが、
Visual Studio Code はデフォルトで対応している。

f:id:tbpg:20150430232229g:plain

アニメーションGIFのオペレーション

  • !>table>(tr>td{hoge$}*3)*3 をペースト
  • タブ

Emmet って何?

HTML, CSS などを素早く入力するためのツールです。
詳しくは下記ページ参照。

Emmet

どちらのエディタにもある機能

括弧のマッチング強調表示機能

Bracket matching - Visual Studio Code Doc

括弧のマッチング強調表示機能。
公式ドキュメントでは Bracket matching と記載されているが、
Bracket ( [, ] ) だけではなく、
Parenthesis( (, ) ),
Brace( {, } )
も含む。

f:id:tbpg:20150430232245g:plain

コード補完

Ctrl + Space でファイル内のキーワードに対するコード補完。
※言語によっては、メソッドの補完なども可能

f:id:tbpg:20150430232255g:plain

Multi-cursor

Selection & Multi-cursor - Visual Studio Code Doc

ここ最近のエディタでは一般的になっている複数行選択+編集。
Ctrl + Shift + up or downAlt + クリックで複数選択可能。

f:id:tbpg:20150430232310g:plain

Sublime Text にしかない機能

ファイルジャンプ + メソッド宣言への移動を一気に行う

Sublime Text2 だと Ctrl + r から ファイル名 + "@" + メソッド名 を入力することで
ファイルジャンプ + メソッド定義への移動を一気に行うことができます。

Visual Studio Code の場合、ファイルジャンプとメソッド定義への移動はそれぞれ独立した機能がありますが、
一気に行うことはできないようです。

行結合

Sublime Text2 だと Ctrl + j複数行のテキストを 1 行に結合することができます。
この機能と複数行一括編集を利用すると便利なのですが、Visual Studio Code には無いようです。

以下は、 Sublime Text2 の操作例です。

f:id:tbpg:20150430232322g:plain

アニメーションGIFのオペレーション

  • テキストの全選択
  • Ctrl + L複数行選択へ
  • シングルクォートを入力すると、自動的に文字列を囲む
  • End で行末へ
  • Ctrl + j で行結合

外部資料