Help us understand the problem. What is going on with this article?

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

はじめに

こちらは Classi Advent Calendar 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
Ruby言語サポートです。Rubyのコードを書き始める前にこれを入れましょう。
文法の最低限のインテリセンスが有効になります。
他にもrbenvやasdfなどでのrubyバージョン切り替えにVSCodeを対応させたり、RubyCopなどでのLint,Formatに対応したりしています。


Settings.json 設定例
"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依存


VSCode Ruby
上記拡張機能「Ruby」を入れると自動でインストールされます。ruby・erbのシンタックスハイライトが有効になります。
シンタックスハイライト例

Rails
その名の通りRailsサポートの拡張機能です。
assetやタグのsnippetを提供しています。
スニペット例

また、Opt + .で関連ファイルにナビゲーションしてくれます。
ナビゲーション例

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

Ruby Solargraph
上記Rails拡張機能を入れるとインストールされます。Rubyのインテリセンスを強化できます。
例


設定例

Solargraphを使えるようにするには主に3つの方法があります。
  1. gemをglobal installする
  2. Gemfileに追加し、bundlerでinstallする
  3. docker containerなど外部サーバーとして動かす

1. gemをglobal installする場合

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

$ gem install solargraph

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

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

"solargraph.useBundler": false

2. bundlerでinstallする場合

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

gem 'solargraph', group: :development
$ bundle install

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

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

"solargraph.useBundler": true

1と2の共通設定

solargraphの設定ファイルを作成します。
設定内容については以下に解説があるので、プロジェクトに合わせて設定しましょう。
Configuration

$ solargraph config .

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

$ solargraph bundle

その後こちらのファイルをプロジェクトに追加しましょう。
Solargraphが静的解析でRailsアプリを解析しきれない部分とのギャップを埋めるために必要となります。
参考ドキュメント

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

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

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

まずは以下のようなSolargraphを起動するための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を起動します。

# 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が使えるようになります。

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


Ruby on Rails
Railsのスニペットを提供してくれます。
solargraphのインテリセンスだけでは、RailsのAPI補完が不十分なので、こちらで補っています。
スニペット例

Rails DB Schema
DB Schemaに沿って、モデルのカラム名を補完してくれます。
補完例

カラムの定義元を参照することもできます。
定義元ジャンプ例

Rails Go to Spec
Cmd + shift + yで実装ファイルとテストファイルを行き来できます。

endwise
endを自動挿入してくれます。
end挿入例

Rainbow End
endを色分けする拡張機能です。
do~endがネストする時に見分けにくかったので、入れています。
画面例

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

indent-rainbow
インデントに応じて色分けしてくれます。
色分け例

Material Icon Theme
エクスプローラー内のフォルダやファイルアイコンなどが見やすくなるテーマです。
スクリーンショット 2019-12-18 19.52.51.png

Swagger Viewer
VSCode上でSwaggerファイルのプレビューが可能になります。

最後に

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

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

hakshu
ソフトウェアエンジニア。Web系 メイン言語はJavaScript 最近はAngularとRailsで開発しています。
classi
学校の先生・生徒・保護者向けのB2B2Cの学習支援Webサービス「Classi(クラッシー)」 を開発・運営している会社です。
https://classi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした