Sublime Text から VScode に以降した場合にやっておくべき設定(Ruby On Railsを書く場合)

Sublime Text から VScode にエディタを移行しました。
そこで、Sublime Textを使っていた人でも、違和感なくVScodeを利用できる設定や拡張機能等をご紹介いたします。

# 前提
- 環境はmacOS
- VScodeはインストール済みとする

# 初期設定
![スクリーンショット 2021-01-04 15.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/61463426-7bc9-4da2-541c-f554f1745765.png)

VScodeを開くとこのような画面になると思いますので、 command + , で settings画面を開きます。
それでは設定していきます。

![スクリーンショット 2021-01-04 16.02.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/3a636127-161c-471d-1665-1f3da0f26275.png)
__・ Files: Auto Save を「afterDelay」に変更__
　こうすると、ファイル編集後に自動保存してくれます。

__・ Editor: Font Size を「13」に変更__
<br>

![スクリーンショット 2021-01-04 16.02.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/d7882f57-3198-7b10-a6b6-e911f1abdadb.png)
__・ Editor: Tab Size を「2」に変更__
<br>

![スクリーンショット 2021-01-04 16.03.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/ad0666f0-bf04-538e-7cb2-4b9d65c10463.png)
__・ Editor: Word Wrap を「on」に変更__
　こうすると、行を折り返して表示してくれます。

# 配色テーマの変更
次に配色テーマをSublime Textと似ているものに変更します。
変更すると、画像のようなテーマになり、限りなくSublime Textに似ていると思います。

![スクリーンショット 2021-01-04 18.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/512ee0b7-2366-6dc1-412b-be41b39dca67.png)

初期設定のテーマのままでOKな方は([次のステップ](#プラグインのインストール))まで飛ばして構いません。
では、変更していきます。

![スクリーンショット 2021-01-04 17.01.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/aaf533fd-873b-f539-ca26-4b276e7c4644.png)
command + shift + P でコマンドパレッドを開き、フォームに color と入力し、Preferences: Color Theme が選択されていることが確認できたら、returnキーを押します。

![スクリーンショット 2021-01-04 17.02.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/f3863843-d933-380d-7682-b5f0c7e333e2.png)
さらに、 monokai と入力し Monokai が選択されていることが確認できたら、returnキーを押します。

これで、配色テーマが変更できたと思います。

# プラグインのインストール

次に、必要なプラグインのインストールを行なっていきます。

![スクリーンショット 2021-01-04 16.45.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/5443483b-c799-6ae9-def0-4ba6738d00b8.png)
左のサイドバーの四角形が４つ並んだようなアイコンをクリックしてください。
するとプラグインを検索するフォームが表示されます。
（※上記写真は、私はすでにプラグインをインストールしているため、INSTALLEDの欄にインストール済のプラグインが並んでいますが、気にしないでください。)

![スクリーンショット 2021-01-04 17.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/79ae884b-9cae-df37-395b-4d99d3fb1705.png)
フォームにインストールしたいプラグインの名前を入力し、選択、インストールしてください。

おすすめのプラグインをご紹介いたします。

####・ __Japanese Language Pack for Visual Studio Code__<br>
日本語化するプラグインです。

####・ __Ruby__<br>
Ruby言語サポートです。Rubyのコードを書くなら必須のプラグインです。

####・ __VSCode Ruby__<br>
上記のプラグイン Ruby をインストールすると自動でインストールされます。
ERBのシンタックスハイライトが有効になります。

####・ __endwise__<br>
自動で end を挿入してくれます。
![https___github.com_kaiwood_vscode-endwise_raw_master_images_endwise.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/4114855a-ba30-5d1c-07da-2aa2bcd7a21b.gif)

# Rubyの設定
最後にRubyの設定を行います。

![スクリーンショット 2021-01-04 17.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/55ef4ee0-5914-d005-deb5-4dd7510bae15.png)

再度、 command + , で settings画面を開き、右上のファイルのようなアイコンをクリックし、settings.json を開きます。

![スクリーンショット 2021-01-04 18.16.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654387/7912a0f4-57a7-5e31-7eb4-a65eeeb09e8b.png)
画像のように、末尾に、下記を追記します。(元の設定項目の末尾と追記する設定の間に , を書くのを忘れないでください。)

```
"files.associations": {
    "*.erb": "erb"
},
"emmet.includeLanguages": {
    "erb": "html"
}
```

以上で設定は終わりです。
VScodeを再起動すれば、全ての設定が反映されます。

# 参考サイト
- https://wemo.tech/1006
- https://qiita.com/sensuikan1973/items/219a843e4654e6c2e10d
- https://teratail.com/questions/163008