すごいぞ!! Visual Studio Code!!

Visual Studio Code がなかなかいいと聞いて使ってみたら全然「なかなか」じゃなくて「かなり」良かったのでメモ。
ちなみに私はMacを使っていて、普段Sublime Textを使ってるので、それとの比較が多くなるかもしれません。

Visual Studio Code - Code Editing. Redefined

Visual Studio Codeとは？

Visual Studio Code はオープンソースのソースコードエディタである。 マイクロソフトにより開発され、Windows, Linux, OS X 上で動作する。 デバッグ、gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持つ。
Visual Studio Code

ここがすごいよ Visual Studio Code！！

シンプルなデザイン

今までMicrosoftというと、(私の中で)どうもごちゃごちゃした印象で正直あまり好きではなかったのですが、これはとてもシンプルです。
普段使い慣れているSublime Textの方がごちゃごちゃしてるってくらいすっきりとしています。

日本語対応！

「英語くらい読めよww」を言われそうですが、やっぱり日本語で書かれていると嬉しいです。
全てでは無いですが、ほぼ日本語対応できています。

Sublime Textと同じキーバインドが使える

例えば、cmd + enter で次の行に改行、cmd + shift + enterで前の行に改行だったりといったSublime Textでよく使っていたキーバインドがそのまま使えます。

設定が簡単

基本的なエディタの設定は左上の「Code > 基本設定」から行います。
なかには、基本的なユーザー設定からキーボードショートカット、テーマの配色など設定できます。

設定はJsonで書かれていて、規定の設定を上書きする形で変更していきます。
例えば、ユーザー設定を選ぶと左ペインに
表示されている設定の中で、変更したい設定を右ペインに開かれた空のJsonファイルに追加して変更していくことになります。
この規定の設定ファイルと上書きファイルが一緒に開かれることにまずびっくりしました・・・。

Emmetがデフォルトで使用できる！

これ、びっくりしました。追加でパッケージを入れることなく、デフォルトで使うことができるんです。
詳細はここで紹介されているので割愛します。
Visual Studio Code for Mac ユーザー独自のスニペット定義(Emmet編)

Gitが標準で使用できる

左メニューに標準でGitのタブが置いてあり、Gitで管理しているフォルダであれば、前回のコミットからの差分や、ステージング、コミットなどを行うことが出来ます。

Visual Studio Code内でターミナルが開ける

上部メニューの「表示 ＞統合ターミナル」からターミナルが開けます。ターミナルの種類もユーザー設定で指定できるので、使い慣れたターミナルで作業できます。サーバーと行き来して開発している人はうれしい！！

などなど、他にもいいところはありますが、あとは実際に使いながら体感していただければと思います。

インストール

Homebrewにあったので、そこからインストールします。

$ brew cask search visual
==> Partial matches
dbvisualizer                  visual-paradigm-ce            visualvm
sonic-visualiser              visual-studio-code
visual-paradigm               visual-studio-code-insiders

$ brew cask install visual-studio-code
==> Downloading https://az764295.vo.msecnd.net/stable/6276dcb0ae497766056b4c09ea75be1d76
######################################################################## 100.0%
==> Verifying checksum for Cask visual-studio-code
==> Moving App 'Visual Studio Code.app' to '/Applications/Visual Studio Code.app'
==> Symlinking Binary 'code' to '/usr/local/bin/code'
🍺  visual-studio-code was successfully installed!

visual-studio-codeとvisual-studio-code-insidersが見つかりました。visual-studio-code-insidersの方は新機能を搭載したモデルのようです。バグもあると思うので、とりあえずはノーマルをダウンロードします。

ダウンロードしたら設定を自分ごのみに変更します。

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    // フォント ファミリを制御します。
    "editor.fontFamily": "Ricty Diminished",
    
    // フォント サイズを制御します。
    "editor.fontSize": 16,

    // タブ 1 つに相当するスペースの数。
    "editor.tabSize": 2,

    // エディターで最後の行を越えてスクロールするかどうかを制御します
    "editor.scrollBeyondLastLine": false,

    // エディターで次の行に折り返される文字数を制御します。これを 0 に設定すると、ビューポートの幅での折り返しがオンになります (ワード ラップ)。これを -1 に設定するとエディターによる折り返しが禁止されます。
    "editor.wrappingColumn": 0,

    // 有効にすると、ファイルの保存時に末尾の空白をトリミングします。
    "files.trimTrailingWhitespace": true,

    // どのターミナル アプリケーションを OS X で実行するかをカスタマイズします。
    "terminal.external.osxExec": "iTerm.app",

}

あとは配色をMonokai Dimmedにしたらひとまず完成。
使っていくなかで設定を変えたり、拡張を入れたりしていって自分ごのみのエディターにしていきましょう。

これやりたいなぁ。・・・

• ウィンドウを透過させたい。
  普段使っているiTermでウィンドウを透過させてて、それが心地いいので、Visual Studio Codeでもできたらいいのですが、どこで変更するのやら・・・（というかできるのか？）

日本語の扱いなど、微妙なところはまだありますが、十分満足できるエディターだと思います。
見なおしたよMicrosoft!(上から目線)

追記

はてブに複数台のMacで設定を同期する方法について書きました。
Visual Studio Code で設定を同期してみる