いろいろやってみるにっき

てきとーに生きている奴の日記

古いエントリのサムネイル画像がリンク切れになってたりするけど、チマチマ修正中


Visual Studio Codeを入れてみた

軽い(NetBeans比)。

デベロッパーにとってインパクトが大きいと思われるのが、Visual Studio Code 1.3のエディタ機能が「Monaco Editor」として独立したモジュールになったことです。

APIデザインの極意 Java/NetBeansアーキテクト探究ノート

APIデザインの極意 Java/NetBeansアーキテクト探究ノート

 

 

インストール

特に難しいところは無い。インストールをスキップするときは ここをクリック。

歌丸師匠カラーのDownload for Windowsバナーをクリックする。

f:id:shigeo-t:20160711000102p:plain

画面が切り替わるとともにダウンロードがスタートする。

f:id:shigeo-t:20160711000212p:plain

このページでは各OSごとのセットアップや、使い方などを選択できる。

f:id:shigeo-t:20160711000412p:plain

インストーラを起動する。[次へ(N) >]をクリックする。

f:id:shigeo-t:20160711000526p:plain

〇同意する(A)をクリックし、活性化された[次へ(N) >]をクリックする。

f:id:shigeo-t:20160711000705p:plain

インストール先である。今回は特に変える必要が無いので、[次へ(N) >]をクリックする。

f:id:shigeo-t:20160711000747p:plain

スタートメニューのショートカットである。[次へ(N) >]をクリックする。

f:id:shigeo-t:20160711000844p:plain

追加タスクの選択である。[次へ(N) >]をクリックする。

f:id:shigeo-t:20160711000917p:plain

[インストール(I)]をクリックする。

f:id:shigeo-t:20160711001123p:plain

プログレスバーはどんどん進む。

f:id:shigeo-t:20160711001206p:plain

すぐに終わる。[完了(F)]をクリックすると、Visual Studio Codeが起動される。が、EdgeにGetting Startedが表示される。

f:id:shigeo-t:20160711001427p:plain

f:id:shigeo-t:20160711001449p:plain

すげえ、もう本があるんだな。

はじめてのVisual Studio Code (I・O BOOKS)

はじめてのVisual Studio Code (I・O BOOKS)

 

 

いろいろ使ってみる

 起動されたVisual Studio Codeはこんな感じ。

f:id:shigeo-t:20160711002456p:plain

 htmlファイルを開いてみる。きちんと色分けされている。

f:id:shigeo-t:20160711002528p:plain

 

サイドバー

サイドバーを一つずつ見ていく。一番上のアイコンは、マウスオーバーすると「エクスプローラー(Ctrl+Shift+E)」と表示される。

f:id:shigeo-t:20160711003004p:plain

更新されたタブがあると、このようにエクスプローラーアイコンに丸数字が出る。

f:id:shigeo-t:20160711011646p:plain

 二番目のアイコンは、マウスオーバーすると「検索(Ctrl+Shift+F)」と表示される。f:id:shigeo-t:20160711002637p:plain

三番目のアイコンは、マウスオーバーすると「GIT(Ctrl+Shift+G)」と表示される。

f:id:shigeo-t:20160711003129p:plain

四番目のアイコンは、マウスオーバーすると「デバッグ(Ctrl+Shift+D)」と表示される。 

f:id:shigeo-t:20160711003317p:plain

五番目のアイコンは、マウスオーバーすると「Extensions(Ctrl+Shift+X)」と表示される。インストール可能なエクステンションが表示される。

f:id:shigeo-t:20160711003500p:plain

 

メニュー

メニューも見ていく。「ファイル(F)」をクリックするとこんな感じ。

f:id:shigeo-t:20160711003734p:plain

「基本設定(P)」をクリックすると、このように展開される。設定の各項目については後述する。

f:id:shigeo-t:20160711003822p:plain

続いて「編集(E)」はこんな感じ。

f:id:shigeo-t:20160711004057p:plain

「表示(V)」は多様な機能がある。

f:id:shigeo-t:20160711004245p:plain

「ジャンプ(G)」はこのような構成。ジャンプなのにGなんだな。

f:id:shigeo-t:20160711004332p:plain

Jump (2015 Remastered Version)

Jump (2015 Remastered Version)

 

 最後の「ヘルプ(H)」も多機能。

f:id:shigeo-t:20160711004548p:plain

 

 設定画面

もう一度設定メニューを見てみる。

f:id:shigeo-t:20160711003822p:plain

まずは「ユーザ設定(U)」。「既定の設定」タブと「setting.json」が同時に開く。コメントが「既定の設定」のほうは”設定ファイル内に設定を挿入して、設定を上書きします”、「setting.json」のほうは”既定の設定を上書きするには、このファイル内に設定を挿入します。”である。どっちでもいいというように読める。

f:id:shigeo-t:20160711005128p:plain

ワークスペース設定(W)」では下記のようなメッセージ。単にエディタとして使う分には機能しないようだ。

f:id:shigeo-t:20160711005236p:plain

「キーボード ショートカット(K)」では、「既定のキーボード ショートカット」タブと、「keybinding.json」が同時に開く。「ユーザ設定(U)」と同じようにどちらを使ってもよさそうだ。

f:id:shigeo-t:20160711005430p:plain

「ユーザー スニペット(S)」では、言語を選択できる。

f:id:shigeo-t:20160711005622p:plain

スクロールして使えるスニペットを見ていく。GoやGroovyなどが見える。

f:id:shigeo-t:20160711005958p:plain

Lua、Razorって名前さえ知らないぞ。

f:id:shigeo-t:20160711010115p:plain

VisualなんちゃらがVBだけだ。

f:id:shigeo-t:20160711010241p:plain

残りは3つ。

f:id:shigeo-t:20160711010721p:plain

「配色テーマ(C)」はこんな感じ。

f:id:shigeo-t:20160711005823p:plain

 

使ってみた

htmlの編集でcssファイルのうえにマウスオーバーするとこのような表示になる。

f:id:shigeo-t:20160711011008p:plain

タグをクリックすると、セットでタグが明るく表示される。

f:id:shigeo-t:20160711011157p:plain

cssファイルを[Ctrl]+クリックで開いてみた。フォント名が文字化けしている。UTF-8で作成したファイルで、UTF-8で開かれているのにな。

f:id:shigeo-t:20160711011303p:plain

同じファイルをNetBeansで。フォント名が日本語のところだけじゃなく化けていることが分かる。

f:id:shigeo-t:20160711011405p:plain

Visual Studio Codeで新たにタブを開き、NetBeansから当該部分をコピペしてみた。文字化けしない。

f:id:shigeo-t:20160711011533p:plain

 

まとめ

使い込むのはこれからだが、単純にエディタとしても使いやすそう。今回はWindowsだが他OSでも入れてみたい。また、Monaco EditorとしてもNode.js下で単独で動かしてみようと思う。

お時間あったら、他のエントリもクリックして頂ければ幸いです。