VSCodeでRubyを書く環境を整えた


## はじめに
[Visual Studio Code Advent Calendar 2017 - Qiita](https://qiita.com/advent-calendar/2017/vscode) の21日目の記事。

記事内に出てくるコマンドなどはmacOSが対象。

## VSCodeとは

[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)

マイクロソフト製のフリーのオープンソースエディタ。マルチプラットフォームで展開されている。

## 乗り換えた理由
最近までテキストエディタはAtomを使っていた。コードを書いている時にlinter周りでもっさりしてるなーと感じていた。使っているパッケージの問題もあるかもしれないが、起動時の速度など、他にも時間がかかっていると感じた部分があった。そこで、動作速度が速いという噂を聞いて、VSCodeに乗り換えてみた。

実際にベンチマークを取られてる方もいた。下記記事参照。

[Atom vs Visual Studio Code 速度比較!! Electron系テキストエディタ2大決戦!!](http://ryuta46.com/379)


## 実際どうだったか
どちらもElectron製のエディタなので、そこまで速度に差はないと思っていたが、実際に使ってみて、結構速度差を感じた。複数プロジェクトを開いていても、軽快さがある。快適になった。

あと、Atomでよくやった「Chromeにフォーカスが当たっていると思って `Cmd + Alt + I` を押してデベロッパーツールが開かれて絶望を味わう」ことがなくなった。キーバインドをジャックせずとも、VSCodeではデベロッパーツールは開かれない。

## 乗り換えるためにやったこと

VSCodeのインストールは[ここ](https://code.visualstudio.com/)から。

VSCodeのパッケージも結構揃ってきているので、Atomで使っていたパッケージは、大体VSCodeの方にもある。以降でVSCodeに乗り換えた時にやった作業を示す。
Rubyをメインで書いているので、一般的なエディタの設定からRubyを書く環境を整えたところまで記述する。

### 設定のTL;DR

#### インストールしたパッケージ
- [Advanced New File - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-new-file)
- [Color Highlight - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- [file-icons - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons)
- [One Dark Pro - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
- [Ruby - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)
- [Sass - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)
- [Slim - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sianglim.slim)
- [Sort lines - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)

#### 設定ファイルの内容

```json:user_setting
{
    "workbench.startupEditor": "welcomePage",
    "workbench.iconTheme": "file-icons",
    "workbench.colorTheme": "One Dark Pro",
    "editor.rulers": [80],
    "editor.fontSize": 13,
    "editor.fontFamily": "Ricty Diminished",
    "editor.tabSize": 2,
    "editor.renderWhitespace": "boundary",
    "files.insertFinalNewline": true,
    "ruby.lint": { "rubocop": true },
    "explorer.confirmDragAndDrop": false,
    "extensions.ignoreRecommendations": true,
    "window.zoomLevel": 0
}
```

### カラーテーマの変更
Atomのカラーテーマが気に入っていたので、下記テーマを入れた。 `Code > 基本設定 > 配色テーマ` から設定できる。選択すると設定ファイルに設定が加えられる。

[One Dark Pro - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

Qiitaのカラーテーマもある。

[Qiita - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Increments.qiita)


### アイコンテーマの変更
デフォルトはSetiというテーマが入っている。Rubyのアイコンが毒々しくて、エラーが出ているように見えるので、変更したくなった。`Code > 基本設定 > ファイル アイコンのテーマ` から設定できる。選択すると設定ファイルに設定が加えられる。

[seti-icons - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=qinjia.seti-icons)

#### vscode-icons
多分、一番人気のアイコンテーマだが、少しうるさく感じた。

[vscode-icons - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)

#### file-icons

Atomで使っていたので、結局これに落ち着いた。

[file-icons - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons)


### 設定の変更
Font系とタブスペースとスペース表示を設定。

```
"editor.fontSize": 13,
"editor.fontFamily": "Ricty Diminished",
"editor.tabSize": 2,
"editor.renderWhitespace": "boundary",
```


### 各ファイルのシンタックスハイライト
下記をインストール。

- [Ruby - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)
- [Sass - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)
- [Slim - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sianglim.slim)


### rubocopでlintしたい
下記をインストール。

[Ruby - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)

ユーザ設定に下記を追加。

```
"ruby.lint": { "rubocop": true },
```

`Cmd + Shft + M` で問題ウィンドウの表示非表示を切り替えられる。この問題ウィンドウ内でrubocopの結果を確認できる。


### ターミナルからVSCodeを開きたい
VSCode内で、 `Cmd + Shift + P` でコマンドパレットを開いて

```command_palette:command_palette
Shell
```

と打って、codeコマンドをインストール。

ターミナル内で、

```console:console
$ code .
```

と打つとアプリケーションカレントディレクトリを開いてくれるようになる。


### ガイドを表示したい
下記の設定を追加。下記は80文字目にガイドを入れる例。

```
"editor.rulers": [80],
```


### ファイルの最後に改行を加えたい
下記の設定を追加。

```
"files.insertFinalNewline": true,
```

### エクスプローラー内で新規ファイル作成をしたい
下記をインストール。

[Advanced New File - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-new-file)

`Cmd + Alt + N` でパスとファイル名を入力できて、ファイルを追加できるようになる。

エクスプローラー内でフォーカスが当たっているファイルのパスがデフォルトで入っている。

### 選択行をソートしたい
下記をインストール。

[Sort lines - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)

デフォルトの設定だと、 `F9` を押すとソートされる。

### 16進数のカラーコードを色で表示したい
下記をインストール。

[Color Highlight - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)


### よく使うショートカット
基本的にはAtomと同じ。

- ファイルの移動: `Cmd + P`
- 検索: `Cmd + F`
- 置換: `Cmd + Alt + F`
- ファイル内検索: `Cmd + Shift + F`
- 複数のファイルで置換: `Cmd + Shift + H`
- エクスプローラーを開く: `Cmd + Shift + E`
- コマンドパレットを開く: `Cmd + Shift + P`
- 問題を開く: `Cmd + Shft + M`
- ターミナルを開く: ``Ctrl + ` ``
- 拡張機能を開く: `Cmd + Shift + X`

## おわりに
おすすめのパッケージなどがあれば、ぜひコメントを。

## 参考
- [Check! Mac のターミナルから Visual Studio Code を呼ぼう - Qiita](https://qiita.com/dz_/items/5a6e3813cf42b8d17fbf)
- [Visual Studio Code 入門～オススメ設定と拡張機能編～ - 雀巽の日記帳](http://necojackarc.hatenablog.com/entry/2017/03/16/090000)