AtomからVisualStudioCodeに乗り換えた感想と設定メモ

# 背景
今まではAtomを使っていましたが、重いため（メモリが食いすぎで3時間くらい使ってると7GBくらいいってる時がある。。。）乗り換えを検討していました。

いずれはVimmerになりたいなーと思いつつも、キャッチアップに掛ける時間があまり取れなかったため、なかなか乗り換えられずにいました。

そんな中、「VisualStudioCodeがいいよー」と知人から聞いたため、試しにやってみたら思いの外良かったので、乗り換えてみました。
その感想と、入れた拡張機能＋設定をメモします。
(今更ですが。。。)

# 特徴
## 公式の特徴
### Mac OS X、Linux、および Windows、あらゆる OS、言語で動く
> Mac OS X、Linux、および Windows 、あらゆるプラットフォームで使用可能です。さらに、30 種類以上のプログラミング言語をサポートします。

Microsoft製なのにMac,Linuxでも動くということ。ありがたいです。
対応言語も多く良いですね。

### 最新 テクノロジーへの豊富なサポート、最新 Web とモバイル アプリ開発
>ASP.NET Core や Node.js といった最新 Web テクノロジーの豊富なサポート。Node.js、TypeScript 用の統合デバッグ ツールも利用可能。また、Cordova のサポートによりモバイル アプリの開発も可能です。

Reactで開発をしている僕としては、ここが非常にありがたいですね。
GoogleがAngularによる開発でVisualStudioCode使ってるらしいです。
モダンなフロントエンジニアでVimmerじゃない人はとても良いのではないでしょうか。

### あなた好みのエディタに進化、あなたのコーディングをより速く
>
オートコンプリート機能などの高度なコード入力支援（Intelisense）や複数カーソルや自動保存の機能で、煩わしいマウス操作不要でコード編集のみに集中。 Visual Stuido Marketplace から探した機能を組み込めば、あなた好みの軽量、高速なエディターに進化します。

ここら辺はAtomとかSublimeと一緒ですね。拡張機能とかショートカットが優れているという点です。
Atomにあるプラグインは大体VisualStduoCodeにもありそうな感じでした。
現在Atom、Sublimeの人は比較的スムーズに乗り換えられる気がします。

## 個人的に思う特徴
### 標準装備が豊富
インストールしてカスタマイズせずとも、すぐに使えるので非常に良いですね。
標準で入ってるので安定して使えそうというのが良いです。

- 日本語対応
- Terminal利用可能
- Debug対応
- Git対応
- React,JSX対応
- 補完が優秀

### Atomに比べて軽い
これが実は一番気に入ってる点ですね。
Atomに比べてめっちゃ軽い、今見てみたら1Gいかないくらい(Atom時代は7Gとかだった。。。)



# インストール
[公式サイト](https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx)からいつも通りダウンロードしてインストールします。
Linux、Macも同様

# カスタマイズ
以下の拡張機能と設定を行いました。

## ユーザー設定
標準機能のあるオプションを設定する部分。拡張機能と違っても標準装備の機能をオプションをいじるときに使う
(拡張機能のオプション変更も同様に行います。)

```js:基本設定/設定/ユーザ設定
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"workbench.colorTheme": "Monokai",
```
`editor.formatOn***`はコード自動整形です。それをタイプ時、ペースト時、保存時にやるかというものです。
何かと便利なので全てオンにしました。

`"workbench.colorTheme": "Monokai"`はSublimeのテーマカラーと同じにするという点です。
なんとなくみやすいので。。。


![スクリーンショット 2017-06-05 1.05.05.png](https://qiita-image-store.s3.amazonaws.com/0/173309/f38196a6-c80f-40b3-1e7b-cd4c296fad2a.png)

## 拡張機能 
標準でもかなり使い勝手良いのですが、最低限さらに使い勝手良くするために一旦以下のを入れました。

### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#review-details)
javascriptの構文チェッカーです。
React使いとしては必須のものなので入れました。

```js:基本設定/設定
"eslint.enable": true,
"eslint.autoFixOnSave": true,
```
`"eslint.autoFixOnSave": true,` とすることで保存時にeslintが効くようになります。
`⌘+s`をするだけで綺麗に書き直してくれるのは非常に嬉しい。

### [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

worksspace上にあるファイル名を補完してくれるもの。
importが多いReactではとても助かる。
![iaHeUiDeTUZuo.gif](https://qiita-image-store.s3.amazonaws.com/0/173309/a40dd026-bda3-526b-b29b-1081dd3561a7.gif)

### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
標準だとフォルダとファイルがどれか見分けがつき辛く、かつ僕のような一つのプロジェクトにRubyとjsが混じっている場合は一目でわかるようにしたいので入れました。(地味におしゃれで気に入っている)
![lang-icons.png](https://qiita-image-store.s3.amazonaws.com/0/173309/ca8491be-67c9-53c3-cdc8-7548bdf5f6f3.png)


# 感想
 VisualStudioCodeですが、動作が軽いというが個人的には一番満足です。
また、標準装備が豊富なため、Atomからの乗り換えは非常にスムーズでした。
拡張機能は全然入れられてないです。一旦今のままで仕事はできそうです。

React+Railsでもっとこういう拡張機能おすすめだよー！　という意見あれば是非是非コメントお願い致します。
もっと開発スピードあげたい！

Sublime2→Atom→VisualStudioCodeとエディタを変遷としてます。
次は変わりようのないVimになるのでしょうかね。
（やっぱりVimでドヤ顔したい！笑）