Sublime TextからVisual Studio Codeに乗り換えた話

基本的にIDE支援の恩恵を得て楽をしたい派なので、こんな感じでエディタを使い分けていました。

- iOSアプリ開発: Xcode
- Windows開発: Visual Studio (最近はParallels上で)
- その他の開発: IntelliJ
- それ以外ちょっとした編集: Sublime Text

[Visual Studio Code](https://code.visualstudio.com)(以下vscode)は、初期リリース時にちょっと触った程度でしたが、[0.10.1アップデート](http://www.forest.impress.co.jp/docs/news/20151119_731453.html)で改めて触ってみたらとても気に入り、Sublime Text + IntelliJの一部の領域を代替出来そう、と思って乗り換えました。


<blockquote class="twitter-tweet" lang="en"><p lang="ja" dir="ltr">Sublime Textに満足してたから、Visual Studio Codeは試用程度しかしてなかったけど、昨日けっこう触ったらとても気に入ったのでほぼ乗り換えモード(　´･‿･｀)&#10;TypeScriptで拡張書けるのも良い。&#10;&#10;<a href="https://t.co/FPaN1VRrsk">https://t.co/FPaN1VRrsk</a></p>&mdash; M Ono (@_mono) <a href="https://twitter.com/_mono/status/668031114745802752">November 21, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


とりあえず手短に魅力を把握したい場合、[このページの動画](https://code.visualstudio.com)観るのをオススメします(　´･‿･｀)


もうちょっと長めのはこちらのなど:  
[Introducing Visual Studio Code - YouTube](https://www.youtube.com/watch?v=igDBRf6O2Pc)

以下、基本的にOSXで使った時の話ですが、プラットフォーム共通の内容が多いと思います。
vscodeもSublime TextもAtomも、マルチプラットフォームで同じように使えることが気に入っている点の1つでありますし。

以下、主にSublime Textからの乗り換え時に、学んだことなど記していきます。

## 癖に慣れる

Macでは大抵のアプリでは、`cmd + ?`で出るメニューから適当にやりたい操作を入力すると該当メニューが出るので、それで機能探して使ったり、必要に応じてショートカット覚えていました。

![Screen Shot 2015-12-01 at 8.05.15 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/1efa44c5-4089-b58e-6407-9aaafde5769b.png "Screen Shot 2015-12-01 at 8.05.15 PM.png")

~~上のはSublime Textのスクリーンショットですが、vscodeでは以下のようにかなりメニュー・コマンドが少ないです。~~ Version 1.0くらいから豊富になりました。

![Screen Shot 2015-12-01 at 8.06.41 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/dbf7c821-09d1-4fa9-42ff-cf2b9a4c08d3.png "Screen Shot 2015-12-01 at 8.06.41 PM.png")

初めはこれに面食らいましたが、vscodeは、`cmd + shift + P`で出したコマンドパレットからやりたいことを入力する、というのが基本のようだと理解しました。
Sublime Textでも同じメニュー出せますが、基本コマンドもこのコマンドに寄せているかどうかで、けっこう作りが異なるところだと思います。

`select`を打つと、Sublime Textでも多用する`cmd + D`(選択中の文字列を追加選択)など現れました。

![Screen Shot 2015-12-01 at 8.09.14 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/dbcdc3b6-8614-8c5a-e152-da3afa84084c.png "Screen Shot 2015-12-01 at 8.09.14 PM.png")

基本はこのように`cmd + shift + P`でコマンド呼び出しつつ、使用頻度の高いものはショートカットで呼び出す、というのがvscode流の使い方だと理解しました。

vscodeは、テキスト単体の編集ももちろん出来ますが、フォルダをプロジェクトフォルダっぽく開くことが出来て便利です(Sublime Textも同様ですがより高機能)初めはその閉じるボタンが無くて面食らいましたが、これも以下のようにコマンドで選択出来ました。
Visual Studioではけっこうありますが、2回続けてキー入力するショートカットもあって、これもSublime Textユーザーにとっては馴染み薄いのではないでしょうか。
ちなみに、`cmd K F`は`cmd K`のあと`cmd`は離して`F`を押します。

![Screen Shot 2015-12-01 at 8.13.45 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/23fbb5ee-dc92-6ca6-a83d-48d0346ec476.png "Screen Shot 2015-12-01 at 8.13.45 PM.png")

# その他のコマンド

`cmd + P`や`cmd + E`で、フォルダ内の特定のファイルを開けます。
これはSublime Textと同様ですが、

![Screen Shot 2015-12-01 at 8.21.07 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/1ec52f8a-962f-66bf-7180-5c368faa380d.png "Screen Shot 2015-12-01 at 8.21.07 PM.png")

記載の通り`?`を押すと、そこから操作可能なコマンド一覧が出ます。

![Screen Shot 2015-12-01 at 8.21.34 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/21f6313d-0400-6733-6c78-9ad95754fe36.png "Screen Shot 2015-12-01 at 8.21.34 PM.png")

`cmd + shift + P`は、`cmd + P`の後`>`を入力した状態のショートカットということが分かりますね。

# 設定変更

`cmd + ,`で`Default Setting`と`settings.json`が開かれるので、`Default Setting`を参考にしつつ`settings.json`で必要な設定を上書きます。
Sublime Textなどと同様ですね。

例として、自動セーブを有効にする場合、こう設定します(デフォルトは"off")。

```json
{
    "files.autoSave": "afterDelay"
}
```

# Markdownエディターとして

これは、Sublime Textはデフォルトで良い感じのプレビュー対応してなかったりプラグインもしっくり来なかったり、[Atom](https://atom.io/)使ったり、[MacDown](http://macdown.uranusjr.com)使ったり、で決め手に欠けていましたが、vscodeで良いと思えました。

`cmd + ¥`やボタンで分割出来、そこからプレビューに切り替えるとこんな感じになります。

![Screen Shot 2015-12-01 at 8.28.44 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/28e0801b-2f7e-7e63-cc8f-0aef9bcd4dbc.png "Screen Shot 2015-12-01 at 8.28.44 PM.png")

【追記】一発で分割しつつプレビューするショートカット(`cmd + K V`)もありました。

<img width="452" alt="Screen Shot 2015-12-02 at 7.26.54 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/19398/17731870-a313-bb3a-a4dc-0f42ffb946b5.png">


デフォルトでは、横幅を超えたときのテキスト折り返しをしてくれませんが、`cmd + ,`で開いた設定ファイルで、`"editor.wrappingColumn": 0`を指定すれば対応されます。

この記事もvscodeで書いていますが、画像添付はKobitoを経由しています（´・ω・｀）
D&Dで画像アップロード出来る拡張とかあると便利だし、ちょっと作ってみたいと思ったり…。

# 特定ファイル・フォルダをキーボードショートカットでvscode上で開けるように設定

Sublime Textではお馴染みの`subl`コマンド相当のことがしたくなります。

## ターミナルから開けるようにする設定

[Running Visual Studio Code on OS X](https://code.visualstudio.com/docs/setup/osx)に記載のように、`cmd + shift + P`でコマンドパレットを表示し、`shell command`で探すと、`code`コマンドを`PATH`にインストールすることが出来ます。

![>shell command](https://code.visualstudio.com/images/osx_shell-command.png)

ターミナルで`code`で起動したり、`code FILE_NAME`で特定のファイルやフォルダを開けて便利ですʕ ·ᴥ·ʔ

### 古い設定方法

以下は少し前のバージョンのやり方で、今この設定をすると[@ken_657さんからのコメント](http://qiita.com/mono0926/items/fc0b7f69593567f0a456#comment-69aad10b6d5e0d92c573)のように、変更を促され、それに従うと上記の新しいやり方で`code`コマンドが登録されます。

~~以下を`.XXXrc`系ファイルなどに記載すれば、`code 開きたいパス`で開けるようになります。~~現在非推奨

```sh
code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}
```

## Alfredから開けるようにする設定

こちらをインポートしてください。
[Open with Visual Studio Code workflow - Share your Workflows - Alfred App Community Forum](http://www.alfredforum.com/topic/5841-open-with-visual-studio-code-workflow/)

`vscode* 開きたいパス`で開けるようになります。
先ほどの`code`と揺れがあるので、どちらかに揃えた方が良いかもしれません。

![Screen Shot 2015-12-01 at 8.38.18 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/4cb9a8a4-4efa-9880-11bd-249d7d70035a.png "Screen Shot 2015-12-01 at 8.38.18 PM.png")

# 不満点

「癖になれる」で記載したとおり、一般のOSXアプリとちょっと違う操作体系なのが取っつきにくく損している気がしますが、まあこれはすぐ慣れる範囲かと思いますので、それ以外でいくつか。

## 若干起動が遅い

よくある高機能エディタほど遅くなく優秀な方ですが、Sublime Textよりは若干遅いです。
ささっとちょっとしたファイル操作時にSublime Text開きたくなっちゃう(手癖でつい開いちゃう)ことがあります。
ただ、IntelliJなどよりはずっと速いので、重厚なIDE系ではなく、軽快な高機能エディタ系の範疇であると思います。

## 言語syntax切り替えが面倒

`Podfile`や`Fastfile`など(どちらも中身はruby)弄るとき、拡張子が無いので自動判別されず手動で変更したりします。

Sublime Textでは、`cmd + shift + P`のあと`Ruby`で、慣れればすぐ打てますが、

![Screen Shot 2015-12-01 at 8.44.34 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/f4e0575e-7fc1-2084-a0c0-954072e53454.png "Screen Shot 2015-12-01 at 8.44.34 PM.png")

vscodeでは、以下のコマンドか`cmd + K`→`M`とやや打ちにくいショートカット後に言語選ぶ手順で少し面倒です。

![Screen Shot 2015-12-01 at 8.46.01 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/7b69ed21-59fe-c408-879d-03daa3e54867.png "Screen Shot 2015-12-01 at 8.46.01 PM.png")
![Screen Shot 2015-12-01 at 8.46.15 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/b8956625-3031-6e57-ae95-ea07fe420f1a.png "Screen Shot 2015-12-01 at 8.46.15 PM.png")

## 拡張の種類がまだ少ない

~~例えば、JSONをキレイにフォーマットしたい時に、Sublime Textでは[dzhibas/SublimePrettyJson](https://github.com/dzhibas/SublimePrettyJson)などあるのですが、vscodeではまだ無いようで困りました。~~
【追記】→ 出ました: [Prettify JSON](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json)

こんな感じに拡張インストール出来ますが、

![Screen Shot 2015-12-01 at 8.48.13 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/c606b466-0a09-6624-bbad-e9aee5424c32.png "Screen Shot 2015-12-01 at 8.48.13 PM.png")

まだそれっぽいの無さそうです。

![Screen Shot 2015-12-01 at 8.48.34 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/6df68e0f-02e0-a487-9c3b-cc1b8a26d04f.png "Screen Shot 2015-12-01 at 8.48.34 PM.png")

ただ、広く使われる拡張を作りたい人はチャンスなのではと思います（｀・ω・´）

# ここに書き切れていないポテンシャル

もう記事がけっこう長くなってしまいましたし、まだキャッチアップ中なので、ざっくりと。

## IDEぽい機能がある

- [Debugging in Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging)
- [Tasks in visual Studio Code](https://code.visualstudio.com/docs/editor/tasks)

標準でGitも対応していてそのままコミットなど出来て便利ですね。
[Version Control](https://code.visualstudio.com/docs/editor/versioncontrol)

高機能なわりに軽快なのがポイントだと思っています。

今までIntelliJで書いていたGoもそれとほぼ同等の機能のGoプラグインがあり、使ってみたらとても良い感じだったので乗り換えようかなと思っています:
[Microsoft/vscode-go](https://github.com/Microsoft/vscode-go)

こんな感じで色々充実してくると嬉しいです。

## 拡張がTypeScriptで書ける

Sublime TextはPythonで、それもまあまあ好きな言語であるものの、型の強い言語好きな僕としてはTypeScriptは魅力的です。
フロントエンドのWeb開発はほとんどしないので、普段使う機会も無いですし（´・ω・｀）

[Extending Visual Studio Code](https://code.visualstudio.com/docs/extensions/overview)

> Extensions can be written in either TypeScript or JavaScript.

また、以下を実際にやってみると、良い感じのひな形が自動生成されて感動しました(　´･‿･｀)

[Your First Visual Studio Code Extension - Hello World](https://code.visualstudio.com/docs/extensions/example-hello-world)

拡張については、以下など詳しいです。

- [VSCode 0.10.1の新機能・変更点 - SourceChord](http://sourcechord.hatenablog.com/entry/2015/11/21/214311)
- [特集：Visual Studio Code早分かりガイド：Visual Studio Codeのエクステンションを作成する (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1511/30/news030.html)

これら深いところはまだ全然使いこなせていないので、[Documentation for Visual Studio Code](https://code.visualstudio.com/Docs)を読破して使い倒したいなと思っています。
個人的にMS製の本気出した開発ツールは品質がとても良いと思っているので、軽快な高機能エディタ系としてはしばらくこれメインで使っていこうと思っています！