VSCodeの拡張機能でRailsと仲良くなる

# はじめに
こちらは [Classi Advent Calendar](https://qiita.com/advent-calendar/2019/classi) 19日目の記事です。
こんにちは、Classi Webエンジニアの@hakshuです。

皆さんはRailsを書く時エディタは何を使っていますか？
RubyMine？Vim？Emacs？VSCode？Atom？さくらエディタ？

自分はフロント/サーバー関わらず、JavaScriptやTypeScriptなどを書くことが多かったので、Visual Studio Code、いわゆるVSCodeを愛用しています。

現在のプロジェクトでは、フロントエンド(Angular)/サーバーサイド(Rails)のどちらも書いており、いちいちエディタを切り替えるのも面倒で、使い慣れていることもあるので、VSCodeを使っています。

TypeScriptもVSCodeもMicrosoft製ということもありますし、静的型付けのため、補完はとても効くので、サクサク書いていくことができます。

ただ、Rubyについては、動的型付けのため、補完をいい感じに効かせるには拡張機能などでカバーが必要です。

なので、今回は自分がMacのVSCodeに入れている拡張機能やその設定の紹介をしていこうと思います。

## 拡張機能

### Ruby・Rails

[Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)
Ruby言語サポートです。Rubyのコードを書き始める前にこれを入れましょう。
文法の最低限のインテリセンスが有効になります。
他にもrbenvやasdfなどでのrubyバージョン切り替えにVSCodeを対応させたり、RubyCopなどでのLint,Formatに対応したりしています。

<details>
<summary>Settings.json 設定例</summary>
<div>

```javascript

"ruby.useBundler": true, // VSCodeが実行するgem関連のコマンドをbundle execで実行するかどうか
"ruby.lint": {
  "rubocop": { // RuboCop, Standard or Reek
    "useBundler": true // bundlerでインストールしているgemを使うか否か
  },
},
"ruby.format": "rubocop" // formatに使うgemを指定(RuboCop, Standard, Rufo or RubyFMT)。bundlerでインストールしたgemを使うかどうかは、ruby.useBundler依存
```

</div>
</details>

[VSCode Ruby](https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby)
上記拡張機能「Ruby」を入れると自動でインストールされます。ruby・erbのシンタックスハイライトが有効になります。
![シンタックスハイライト例](https://raw.githubusercontent.com/rubyide/vscode-ruby/master/images/syntax_after.png)

[Rails](https://marketplace.visualstudio.com/items?itemName=bung87.rails)
その名の通りRailsサポートの拡張機能です。
assetやタグのsnippetを提供しています。
![スニペット例](https://raw.githubusercontent.com/bung87/vscode-rails/master/images/vscode-rails.gif)

また、`Opt + .`で関連ファイルにナビゲーションしてくれます。
![ナビゲーション例](https://raw.githubusercontent.com/bung87/vscode-rails/master/images/rails-nav.png)

他にもRailsのビルトインオブジェクトにフォーカスを当てて、Opt + F1でRailsのドキュメントを確認することや、自作クラスの定義元に飛ぶことが可能になります。

[Ruby Solargraph](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph)
上記Rails拡張機能を入れるとインストールされます。Rubyのインテリセンスを強化できます。
![例](https://raw.githubusercontent.com/castwide/vscode-solargraph/master/vscode-solargraph-0.34.1.gif)

<details>
<summary>設定例</summary>
<div>
Solargraphを使えるようにするには主に3つの方法があります。

1. gemをglobal installする
2. Gemfileに追加し、bundlerでinstallする
3. docker containerなど外部サーバーとして動かす

**1. gemをglobal installする場合**

solargraphをインストールします。

```bash
$ gem install solargraph

# グローバルなgemのdocumentを生成します。
$ yard gems
```

settings.jsonは以下のように設定しましょう。

```javascript
"solargraph.useBundler": false
```

**2. bundlerでinstallする場合**

Gemfileにsolargraphを追加してインストールします。

```Gemfile
gem 'solargraph', group: :development
```

```bash
$ bundle install

# プロジェクトにインストールしているgemのdocumentを生成します
$ bundle exec yard gems
```

settings.jsonは以下のように設定しましょう。

```javascript
"solargraph.useBundler": true
```

**1と2の共通設定**

solargraphの設定ファイルを作成します。
設定内容については以下に解説があるので、プロジェクトに合わせて設定しましょう。
[Configuration](https://solargraph.org/guides/configuration)

```bash
$ solargraph config .
```

Solargraph0.34.0以降で、Railsの補完を効かせるには、以下コマンドをRailsプロジェクトのルートディレクトリで実行しましょう。
ActiveRecordなど、Railsのコア部分のgemはSolargraphが使用しているYARDではなく、RDocを使用しているため、このコマンドでRDocからYARDへの変換をしています。

```bash
$ solargraph bundle
```

その後[こちらのファイル](https://gist.github.com/castwide/28b349566a223dfb439a337aea29713e)をプロジェクトに追加しましょう。
Solargraphが静的解析でRailsアプリを解析しきれない部分とのギャップを埋めるために必要となります。
[参考ドキュメント](https://solargraph.org/guides/rails)

※Solargraph0.34.0以前の場合は`.solargraph.yml`のrequireに以下を追加する必要があります。

```.solargraph.yml
require:
- actioncable
- actionmailer
- actionpack
- actionview
- activejob
- activemodel
- activerecord
- activestorage
- activesupport
```


**3. Dockerコンテナなど外部サーバーとして立ち上げる場合**

まずは以下のようなSolargraphを起動するためのDockerfileをプロジェクトのルートに追加しましょう。

```Dockerfile
FROM ruby:2.6.4-alpine3.10

RUN apk update \
    && apk add --update make gcc g++

# Install gems
WORKDIR /home/solargraph
COPY Gemfile Gemfile.lock ./
RUN gem install bundler
RUN bundle install --jobs=4
RUN gem install solargraph yard

# Generate gem documentation
RUN yard gems

# Convert rails documentation
RUN solargraph bundle

# Solargraph server port
EXPOSE 7658

# Run Solargraph
CMD [ "solargraph", "socket", "--host=0.0.0.0", "--port=7658" ]
```

このDockerfileでimageを作成し、containerを起動します。

```bash
# build image
$ docker build -t vscode-solargraph:latest .

# run container
$ docker run -d --rm -p 8091:7658 --name solargraph vscode-solargraph
```

こちらのcontainerを使うようsettings.jsonを次のように設定します。
設定後、VSCodeを再起動すると、solargraphが使えるようになります。

```javascript
"solargraph.transport": "external",
"solargraph.externalServer": {
  "host": "localhost",
  "port": 8091
}
```

</div>
</details>

[Ruby on Rails](https://marketplace.visualstudio.com/items?itemName=hridoy.rails-snippets)
Railsのスニペットを提供してくれます。
solargraphのインテリセンスだけでは、RailsのAPI補完が不十分なので、こちらで補っています。
![スニペット例](https://raw.githubusercontent.com/hridoy/media/master/rails-preview.gif)

[Rails DB Schema](https://marketplace.visualstudio.com/items?itemName=aki77.rails-db-schema)
DB Schemaに沿って、モデルのカラム名を補完してくれます。
![補完例](https://i.gyazo.com/b096d87941300203e0d09f854862f9d8.gif)

カラムの定義元を参照することもできます。
![定義元ジャンプ例](https://i.gyazo.com/daa3e4f20fb4621b7037b87a292a588b.gif)

[Rails Go to Spec](https://marketplace.visualstudio.com/items?itemName=sporto.rails-go-to-spec)
Cmd + shift + yで実装ファイルとテストファイルを行き来できます。

[endwise](https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise)
endを自動挿入してくれます。
![end挿入例](https://raw.githubusercontent.com/kaiwood/vscode-endwise/master/images/endwise.gif)

[Rainbow End](https://marketplace.visualstudio.com/items?itemName=jduponchelle.rainbow-end)
endを色分けする拡張機能です。
do~endがネストする時に見分けにくかったので、入れています。
![画面例](https://raw.githubusercontent.com/noplay/vscode-rainbow-end/master/images/1.png)

### その他Ruby・Railsに限らない拡張機能

[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
インデントに応じて色分けしてくれます。
![色分け例](https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png)

[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
エクスプローラー内のフォルダやファイルアイコンなどが見やすくなるテーマです。
<img width="481" alt="スクリーンショット 2019-12-18 19.52.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194498/57b206c6-2e89-5302-95f3-e14c06c083ee.png">


[Swagger Viewer](https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer)
VSCode上でSwaggerファイルのプレビューが可能になります。

# 最後に
以上、拡張機能とその設定でした。
ぜひ気になったものがあったら使ってみてください。

明日は @yosuke_ohara さんです。お楽しみに！