【2025年版】VSCode で Rails 開発を効率化！おすすめ設定・拡張機能・settings.json 完全ガイド

Visual Studio Code (VSCode) は、その高いカスタマイズ性と豊富な拡張機能により、多くの Ruby on Rails (Rails) 開発者に選ばれています。しかし、初期設定のままでは Rails 開発のポテンシャルを最大限に引き出せているとは言えません。

「コード補完がもっと効けばいいのに」「保存時に自動でコード整形したい」「ファイルが多くて見づらい」…そんな悩みを抱えていませんか？

この記事では、2025年現在のベストプラクティスに基づき、VSCode での Rails 開発を劇的に効率化するためのおすすめ設定と必須拡張機能、そしてコピー＆ペーストで使える settings.json の設定例を徹底的に解説します。初心者から中級者まで、すべての Rails 開発者必見の内容です！

なぜ Rails 開発に VSCode なのか？

VSCode が Rails 開発者に支持される理由はいくつかあります。

豊富な拡張機能

Rails や Ruby に特化した拡張機能が多く、開発効率を飛躍的に向上させます。

高いカスタマイズ性

settings.json でエディタの挙動を細かく調整できます。

統合ターミナル

VSCode 内で直接 rails コマンド（rails s, rails c など）を実行でき、画面切り替えの手間が省けます。

強力な Git 連携

標準機能でも十分強力ですが、GitLens を使えばさらに便利になります。

軽量さとパフォーマンス

大規模なプロジェクトでも比較的軽快に動作します。

基本のキ！必須 VSCode 拡張機能 4選

まずは、Rails 開発環境を整える上で欠かせない基本的な拡張機能を紹介します。VSCode の拡張機能タブから検索してインストールしましょう。

1. Ruby LSP (Shopify.ruby-lsp)

Ruby LSP をインストールする
Shopify が開発を主導する、現在の Ruby/Rails 開発におけるデファクトスタンダードとなりつつある Language Server Protocol (LSP) 実装です。
コード補完、定義ジャンプ、リアルタイム診断、RuboCop連携など、開発体験を大きく向上させます。

2. ERB Formatter/Beautify (aliariff.vscode-erb-beautify)

ERB Formatter をインストールする
HTML と Ruby が混在する ERB (.erb) ファイルの整形を自動で行います。保存時に自動整形されるため、常に綺麗なコードを保てます。

3. Prettier – Code formatter (esbenp.prettier-vscode)

Prettier をインストールする
JavaScript (Stimulus, Turbo Streams など) や CSS (SCSS) のコードフォーマッターとして非常に人気があります。コードスタイルを統一してくれます。

4. GitLens — Git supercharged (GitKraken.gitlens)

GitLens をインストールする
VSCode の標準 Git 機能を大幅に強化します。コードの変更履歴やコミット情報をエディタ上で視覚的に確認できます。

コピーして使える！settings.json おすすめ設定例

次に、これらの拡張機能を活かし、開発効率を高めるための settings.json の設定例を示します。

settings.jsonの編集方法

1. VSCodeを開き、Ctrl+Shift+P（Macの場合はCmd+Shift+P）を押します。
2. 表示された入力欄に「Preferences: Open User Settings (JSON)」と入力し、選択します。
3. 開いたsettings.jsonファイルに、以下の設定をコピー＆ペーストして保存します。（既存の設定がある場合は、適切にマージしてください）

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "editor.rulers": [80, 120],
  "editor.formatOnSave": true,
  "[ruby]": {
    "editor.defaultFormatter": "Shopify.ruby-lsp"
  },
  "[erb]": {
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "files.exclude": {
    "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true,
    "**/tmp": true, "**/log": true, "**/vendor/bundle": true, "**/vendor/cache": true,
    "**/node_modules": true, "**/public/assets": true, "**/storage": true
  },
  "search.exclude": {
    "**/node_modules": true, "**/bower_components": true, "**/tmp": true, "**/log": true,
    "**/vendor": true, "**/public/assets": true, "**/storage": true, "**/*.lock": true
  },
  "rubyLsp.formatter": "rubocop",
  "gitlens.codeLens.enabled": true
}

settings.json のポイント解説

上記の settings.json の中でも特に重要な設定項目について解説します。

フォーマッターの指定方法

editor.formatOnSave: true と [言語].editor.defaultFormatter の組み合わせがキモです。

editor.formatOnSave: true

ファイル保存時に自動でフォーマットを実行します。

"[ruby].editor.defaultFormatter": "Shopify.ruby-lsp"

Ruby ファイル (.rb) を保存する際に、Ruby LSP 拡張機能を使ってフォーマットすることを指定します。

"[erb].editor.defaultFormatter": "aliariff.vscode-erb-beautify"

ERB ファイル (.erb) を保存する際に、ERB Formatter/Beautify を使ってフォーマットします。

重要

ここで指定する ID (Shopify.ruby-lsp など) は、実際にインストールした拡張機能の ID と一致させる必要があります。
もし Ruby LSP ではなく RuboCop 拡張機能 (misogi.ruby-rubocop) を直接使いたい場合は、ID を書き換えてください。

files.exclude と search.exclude の重要性

Rails プロジェクトは多くの自動生成ファイルや一時ファイル（log, tmp, node_modules, vendor/bundle など）を含みます。これらをエクスプローラーの表示 (files.exclude) や検索対象 (search.exclude) から除外することで、以下のメリットがあり、開発に集中しやすくなります。

• ファイルツリーがすっきりして目的のファイルを見つけやすくなる
• ファイル検索が高速化され、不要な結果（ノイズ）が減る

拡張機能と設定を連携させるには？

基本的には、settings.json で正しい拡張機能 ID を editor.defaultFormatter に指定すれば連携は完了です。
Ruby LSP のように、拡張機能自体の設定項目（例: rubyLsp.formatter）がある場合は、それも適切に設定することで、より細かな制御が可能になります。
拡張機能のドキュメント（VSCode マーケットプレイスのページなど）も確認し、利用可能な設定を把握しておくと良いでしょう。

統合ターミナルの活用

VSCode の統合ターミナル (Ctrl+@ or Cmd+J で開閉) から rails s (サーバー起動), rails c (コンソール), rails g (ジェネレーター), bundle install, git コマンドなどを直接実行できます。
アプリケーションとターミナルを行き来する手間がなくなり、非常にスムーズです。

まとめ

今回は、VSCode を使った Rails 開発を効率化するための必須拡張機能と settings.json の設定例を紹介しました。

• 必須拡張機能 (Ruby LSP, ERB Formatter, Prettier, GitLens) を導入する
• settings.json で自動フォーマットやファイル除外を設定する
• (おまけ) デバッグ環境を整える

これらを行うだけで、コーディングのスピード、コードの品質、開発の快適さが格段に向上するはずです。特に editor.formatOnSave と適切なフォーマッターの設定は、一度体験すると手放せなくなるでしょう。

今回紹介した設定はあくまで一例です。ぜひこれをベースに、ご自身の好みやプロジェクトに合わせてカスタマイズし、最強の Rails 開発環境を構築してください！