DEV Community

Cover image for Complete Guide to setup VS Code for Ruby on Rails (Debugger, Linter, Completion, Formatting)
Eugene Kozlov
Eugene Kozlov

Posted on • Updated on

Complete Guide to setup VS Code for Ruby on Rails (Debugger, Linter, Completion, Formatting)

This article explains how configure Visual Studio Code debugger and language server for your Ruby or Ruby on Rails project. After setup you will be able to debug and navigate through Ruby code like an in RubyMine but for free :).

Motivation

When I tried to configure Ruby debugger for the first time, I read many articles and tutorials but don't found how get things done when Ruby installed through asdf / rbenv or another version manager. Problems with relative paths, terminal environments, conflicts with existed ruby and gems versions.
Lets try to fix that and build isolated environment for our project.

Requirements

  1. VS Code with plugins #1, #2
  2. Ruby installed through rbenv or asdf, Bundler.

Project setup

Dependencies

Add to your Gemfile:

group :development, :test do
  gem "ruby-debug-ide", require: false
  gem "debase", require: false
  gem 'solargraph', require: false
end
Enter fullscreen mode Exit fullscreen mode

and run

$ bundle install
Enter fullscreen mode Exit fullscreen mode

Ruby version

Create .ruby-version file in root of project if it not already exists.

$ echo "3.0.2" > .ruby-version
Enter fullscreen mode Exit fullscreen mode

Binstubs

Generate bintubs for gems which will be very useful later:

$ bundle binstubs bundler ruby-debug-ide solargraph
Enter fullscreen mode Exit fullscreen mode

Binstub for test library (rspec for example):

$ bundle binstubs rspec-core
Enter fullscreen mode Exit fullscreen mode

After all in bin folder you will see 4 new files: rdebug-ide, gdb_wrapper, bundle, rspec, which will be used in VS Code configuration files.

Launch and Settings

Copy to .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Start rails server",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/bin/rails",
      "useBundler": true,
      "pathToBundler": "${workspaceFolder}/bin/bundle",
      "showDebuggerOutput": true,
      "pathToRDebugIDE": "/${workspaceFolder}/bin/rdebug-ide",
      "args": ["s"]
    },
    {
      "name": "Run tests",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/bin/rspec",
      "useBundler": true,
      "pathToBundler": "${workspaceFolder}/bin/bundle",
      "showDebuggerOutput": true,
      "pathToRDebugIDE": "/${workspaceFolder}/bin/rdebug-ide",
      "args": []
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Copy to settings.json

{
    "solargraph.commandPath": "bin/solargraph",
    "solargraph.formatting": true,
    "editor.formatOnSave": true,
    "solargraph.diagnostics": true,
}
Enter fullscreen mode Exit fullscreen mode

Result

We configure debugger,language server for completion, linting & formatting. Our config depends only on project binstubs, works as expected, and don't conflicts with other environments, because all stuff stores in project folder.
In the future, the config can be easily transferred to another project.

If this article be helpful for you,i will be happy if you add reaction and post link to your favourite social media, thanks!

Discussion (4)

Collapse
cindrmon profile image
Cindr Mon • Edited on

There's something wrong when i bundle install with debase. it always gives me this error: Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

Collapse
kaipmdh profile image
Kai

Are you not worried about the failing builds and low test coverage in the rebornix.ruby VSCode extension? I've held off on installing it for that reason.

Collapse
abstractart profile image
Eugene Kozlov Author • Edited on

VS Code Marketplace has a lack of alterntives for it. I know only one alternative for rebornix.ruby debugger but it very young and maybe has bugs - ruby/debug. I think in future this gem and extension for it wil replace rebornix.ruby

Collapse
coolprobn profile image
Prabin Poudel

I haven't read this yet but exactly the article I was looking for so I can use VSCode for both JS and Ruby

Thanks for writing 🙌