1. ホーム /
  2. WESEEK Tech Blog /
  3. Ruby on Rails /
  4. VisualStudioCodeでRails開発におすすめ拡張機能
  • 2018.10.17
  • 2023.04.17

VisualStudioCodeでRails開発におすすめ拡張機能

今回は我々が業務で使用しているコードエディタである Visual Studio Code を使って Ruby on Railsを使用した開発をするときの設定やおすすめ拡張機能について取り上げます。

Visual Studio Code (vscode) とは

Microsoft が主体となって開発、提供しているプログラミングコードエディタです。オープンソースであり、無料で利用することができます。vscodeに類似するエディタにGithubが開発しているAtomがありますが、後発のvscodeの方がスピードや利便性が高かったため、WESEEKでは早い段階で使用するエディタをatomからvscodeに移行しました。

vscodeは主要なプログラミング言語の一部に標準で対応していますが、 VS code Marketplace などで公開されている拡張機能(Extension)を追加でインストールすることで、対応するプログラミング言語を増やすことができます。

対応したプログラミング言語で記述されたプログラムソースファイルをvscodeで扱うとき、以下の挙げる便利な機能の恩恵を得られます。

  • Syntax highlight
  • 入力補完 (IntelliSense)
  • Lint と自動訂正
  • コードナビゲーション (methodなどの定義へのジャンプ、 注目しているmethodなどを利用している箇所の表示)
  • デバッグ
  • コードリファクタ

コードを書く人にとっては言うまでもありませんが、これらの機能はプログラミングの効率や正確さに大きく影響するといって過言ではありません。こういった機能がないエディタ、例えばWindowsに標準で付属するメモ帳でプログラミングをするというのは、さながらプロの道具を使わずに仕事をする料理人や機械工場、土木現場の技術者に例えてもよいでしょう。

プロジェクトでのvscodeの設定を統一する

vscodeは400を超える設定項目があり、自分の好みにカスタマイズすることができます。vscodeのメニューから「ファイル」 -> 「基本設定」 -> 「設定」 を選ぶことで設定を編集する画面が表示されます。個人で変更した設定はsettings.jsonというJSONファイルで特定のディレクトリに保存されます。個人の好みに合わせてvscodeの見た目や挙動を変更することで、より使いやすくすることができます。

ただし設定項目によっては、開発プロジェクトのコーディング規則を逸脱してしまう場合もあります。例としてはインデントの扱いが最もわかりやすいでしょう。コードの構造の視認性を維持するためにプロジェクト内でのインデントルールをそろえるのは重要です。ところが、「インデントはスペース2つとする」というコーディング規則になっているのにもかかわらず、ある人のエディタではインデントはタブキーを押すとタブ文字(\t)が挿入される設定になっているが、別の人のエディタではスペースが4つ挿入される設定になっていたとしたら、コーディング規則を遵守するのにも一苦労です。

このように個々人のエディタ設定差がプロジェクトでの問題にならないように、vscodeではプロジェクトでのvscodeの設定を強制することができます。

やり方は簡単で、編集したいプロジェクトのディレクトリをvscodeで開いてから、先ほどの設定画面を開き、「ワークスペースの設定」タブをクリックしてから設定を変更するだけです。変更した設定はそのプロジェクトのディレクトリに「.vscode」というディレクトリが作成され、そのなかの「settings.json」に保存されます。このファイルをプロジェクトのVCSで管理対象にすることで開発者に設定を展開することができるようになります。たとえ各個人で該当する設定がカスタマイズされていたとしてもプロジェクトのvscode設定内容が優先されるようになっています。（逆に各個人で自由に設定できるべき項目(例えばフォントの大きさ)をプロジェクトの設定にしてしまうと、大ブーイングにこと間違いなしです。）

プロジェクトの推奨拡張機能を設定する

プロジェクトの設定と同じような仕組みとして、プロジェクトで導入を推奨する 拡張機能 の指定をすることもできます。

編集するには以下の手順を踏みます。

  1. vscodeのコマンド・パレット(ショートカット: Ctrl + Shift + P)で「extensions: show recommended extensions」を実行する。
  2. 左側に表示されるサイドバーに表示されている「ワークスペースの推奨事項」の行の編集マーク(鉛筆のマーク)をクリックする。

こうすると、 extensions.json の編集画面が表示されます。このファイルはプロジェクトのディレクトリ内の .vscode ディレクトリに作成されます。このファイルの recommendations の value に拡張機能名を列挙して記述します。

プロジェクトの推奨拡張機能を設定することで、 vscode でそのプロジェクトディレクトリを開いたときに「このワークスペースには拡張機能の推奨事項があります」という通知が表示されるようになります。その通知の「すべてインストール」ボタンをクリックすることで、プロジェクトの推奨拡張機能を一括でインストールできるようになります。

extensions.json の定義と合わせて定義した拡張機能の設定をプロジェクトの settings.json に記述することで、拡張機能を特定の設定で利用するようにプロジェクトメンバ全体に展開することもできます。

異なるエディタ間の設定もそろえよう

プロジェクトにおいては全員が同じエディタを使用して開発するのが望ましいと思います。エディタの使い方のサポート、情報共有などにもメリットがあります。しかし、プロジェクトメンバの中には自分の使い慣れたエディタで開発することを譲らない人もいるかもしれません。また、 OSS などのプロジェクトでは不特定多数のコントリビュータ－が参加することになるので、特定のエディタの利用を強制することは極めて難しくなります。

しかし、使用するエディタが異なっていても最低限の共通の設定をプロジェクトに展開したいことがあります。既に触れたインデントなどのコーティング規則にかかわる設定がそれにあたります。このような要求に応える手段として、 EditorConfig があります。

EditorConfig は複数のエディタ間でコーティングスタイルを定義するための仕組みです。プロジェクトのディレクトリに .editorconfig ファイルを配置し、これを仕様通りに記述することで、設定を宣言します。エディタはこのファイルを読み取ることでコーティングスタイルに沿う設定を適用します。主要なエディタは標準で対応しているか、またはプラグインを導入することで対応できます。 vscode では EditorConfig for VS Code を導入することで対応できます。

設定できるのは8項目と少ないですが、エディタを絞ることが難しいプロジェクトでは重宝します。

Ruby on Rails 開発に使える拡張機能と設定

ここまでは、プログラミング言語によらず vscode を使用する場合には共通して使えるテクニックを紹介しました。ここからは vscode で Ruby on Rails のアプリケーションを開発する際に有用な拡張機能と設定をご紹介します。

Ruby

vscode で Rubyを扱う場合にまず必要といってよい拡張機能です。基本的な Syntax Highting やデバッガ、linter、入力補完、コードナビゲーションの機能が提供されています。

私のおすすめする設定は下記の通りです。

{
  // コードナビゲーションの機能を有効にします
  "ruby.intellisense": "rubyLocate",
  // v0.20.0 から搭載された新しいLanguage serverを有効にします。
  // 有効にすると def-end などのブロックを区切り語にカーソルが当たっているときに、対になる区切り語もハイライトされて認識しやすくなります。
  "ruby.useLanguageServer": true
}

一方で下記の機能は有効にしていません。

  • lint

    • rubocop などの lint tool を使用している場合にリアルタイムでlint結果を表示してくれる機能です。しかし、 .rubocop.yml などの設定ファイルで lint 対象外に指定しているソースファイルであっても lint が動く仕様になっており、プロジェクトとして対応不要なはずの警告が出てしまう状態になるため使用していません。(別途 Ruby Solargraph 拡張機能の方で有効にしています。)

  • 入力補完

    • rcodetools gem をインストールした上で、 "ruby.codeCompletion": "rcodetools " という設定にすると強力な入力補完機能が有効になります。しかし、裏で実際にコードを実行することで入力補完を強力にしているため、編集中のコードがruby外部に影響を及ぼす(例えば、ファイルを削除したり)場合に、意図しないタイミングで実行されるなどのトラブルがあり得るため使用しないようにしています。

Ruby Solargraph

IDEやエディタに Ruby の入力補完やドキュメント参照機能を提供するツールである solargraph を vscode で使うための拡張機能です。linterや入力補完、コードナビゲーション、ドキュメント表示の機能が提供されています。

使用するには拡張機能の導入と合わせて solargraph gem のインストールが必要です。また、 solargraph 自体の設定を .solargraph.yml ファイルに記述してプロジェクトのディレクトリに配置する必要があります。(default の設定で問題ない場合は設定ファイルは不要です。)

私のおすすめする .solargraph.yml の設定は下記の通りです。

include:
  - "app/**/*.rb"
  - "config/**/*.rb"
# Ruby on Rails のサポートを強化するための設定
# 完全な入力補完が実現できるわけではないが、設定をしないよりは少し使えるようになる
# 参照: https://github.com/castwide/solargraph/issues/87
require: 
  - actioncable
  - actionmailer
  - actionpack
  - actionview
  - activejob
  - activemodel
  - activerecord
  - activestorage
  - activesupport
# lint の設定
# ここでは rubocop を使用する想定の設定をしている
reporters:
- rubocop

また、併せておすすめする vscode の設定は下記の通りです。

{
  // コードナビゲーションの機能を有効にする設定です。
  "solargraph.definitions": true,
  // コード診断(lint)を有効にする設定です。 .solargraph.yml で reporters に設定した tool が使用されます。
  "solargraph.diagnostics": true,
  // コードの自動修正を有効にする設定です。 rubocop でコードの指摘がある状態で該当ファイルを保存したときに、機械的に修正可能な指摘点を自動で修正した上で保存するようになります。
  "solargraph.formatting": true,
}

Bracket Pair Colorizer

()や{},[]といった Bracket の対が判別しやすくなる拡張機能です。 Ruby 以外の言語でも使用できます。

条件式などの入れ子が複雑だとどの Bracket 対になっているか瞬時に判断できない場合があります。この拡張機能は Bracket 対ごとに別の配色で表示してくれるので、対を取り違える可能性を抑えることができます。

TODO Highlight

ソースファイル中の TODO の記述を反別しやすくなる拡張機能です。 Ruby 以外の言語でも使用できます。

ソースファイル中にコメントで # TODO: や # FIXME: というように将来的に修正すべきコードであることを記述することがあります。 vscode の標準状態ではこういった記述も単なるコメントの一部として扱うので、他のコメントと同様の Syntax Highting になります。この拡張機能を導入すると、コメント中の TODO などの記述部分を別の配色で Syntax Highting する機能が提供されます。こうすることで TODO の記述を見逃す可能性を抑えることができます。

vscode-icons

ファイルアイコンの拡張機能です。Ruby 以外の言語でも使用できます。

vscode の標準状態でもある程度のファイルアイコンは搭載されており、ファイル名や拡張子によって ファイル一覧などに表示されるファイル名の横に適切なアイコンが表示されるようになっています。 例えば、 .rb の拡張子をもつファイルにルビーのアイコンが表示されます。

この拡張機能はより多くのアイコンが搭載されており、標準状態よりも更に適切なアイコンが割り当てられるようになります。たとえば、 rubocop.yml は標準ではただの YAML ファイルとして認識するのでYAMLのアイコンが表示されますが、 vscode-icons を導入すると rubocop の設定ファイルと認識し rubocop のアイコンが表示されるようになります。

拡張機能を有効にするために以下の設定をすることをおすすめします。

{
  // ワークベンチで使用するアイコンのテーマをvscode-iconsに指定します。
  "workbench.iconTheme": "vscode-icons",
}

まとめ

いかがでしたか？
皆さんのRuby on Rails 開発の環境向上に少しでも参考になればと思います。

関連記事

Ralisへ機能フラグ(Feature Flag)を追加し各フラグを制御する

Rails×React×TypeScriptで作るWEBアプリ入門

関連記事

No related photos.