Visual Studio Codeを入れてみた

軽い(NetBeans比)。

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

 

インストール

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

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

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

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

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

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

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

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

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

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

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

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

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

 

いろいろ使ってみる

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

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

 

サイドバー

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

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

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

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

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

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

 

メニュー

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

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

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

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

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

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

 

 設定画面

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

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

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

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

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

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

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

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

残りは3つ。

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

 

使ってみた

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

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

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

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

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

 

まとめ

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