Tools & Setup

Essential VS Code Extensions for Rails Development

Christopher Lim
• 8 min read • 1453 words
Share:

When I started Rails development, I spent more time fighting with my editor than writing code. Syntax highlighting was inconsistent, I couldn't jump to method definitions, and debugging was a nightmare of puts statements.

Then I discovered the right VS Code extensions, and everything changed. In this post, I'll share the extensions that transformed my Rails development workflow.

Must-Have Extensions

1. Ruby (by Peng Lv)

What it does: Essential Ruby language support including syntax highlighting, snippets, and basic IntelliSense.

Why you need it: Without this, VS Code treats Ruby files as plain text. This extension provides:
- Syntax highlighting for .rb, .erb, .rake files
- Code snippets for common Ruby patterns
- Basic auto-completion
- Bracket matching and indentation

Settings to configure:

{
  "ruby.intellisense": "rubyLocate",
  "ruby.codeCompletion": "rcodetools",
  "ruby.format": "standard"
}

2. Ruby LSP (by Shopify)

What it does: Advanced Ruby language server providing intelligent code completion, go-to-definition, and error detection.

Why it's amazing: This newer extension (released by Shopify) provides much better IntelliSense than the basic Ruby extension:
- Jump to method definitions across your entire codebase
- Smart auto-completion that understands Rails methods
- Real-time error detection
- Hover documentation for methods

Setup:

# Add to Gemfile
gem "ruby-lsp", group: :development

bundle install

Key features:
- Cmd+Click to jump to method definitions
- Intelligent auto-completion for Rails methods
- Inline error reporting
- Symbol search across project

3. Rails (by Hridoy)

What it does: Rails-specific features including view helpers, route navigation, and Rails commands.

Essential features:
- Go to View: Cmd+Shift+P → "Rails: Go to View" jumps from controller to view
- Go to Model: Quick navigation between related MVC files
- Rails commands: Run rails generate, rails console, etc. from command palette
- Route helpers: Auto-completion for route helpers like posts_path

How I use it:
- Navigate between controller and view files instantly
- Generate models, controllers, and migrations without leaving the editor
- Quick access to Rails console

4. ERB Helper Tags (by rayhanw)

What it does: Makes working with ERB templates much easier.

Features:
- Auto-completion for ERB tags (<%, <%=, <%#)
- Syntax highlighting inside ERB blocks
- Tag auto-closing
- Snippets for common Rails helpers

Time-savers:
- Type er + Tab → <%= %>
- Type eif + Tab → <% if %> <% end %>
- Auto-completes Rails helpers like link_to, form_with

5. Endwise (by kaiwood)

What it does: Automatically adds end keywords in Ruby.

Example:

# Type this:
def hello

# Endwise automatically adds:
def hello

end

Works with:
- Method definitions (def/end)
- Classes and modules (class/end)
- Conditionals (if/end)
- Loops (while/end)
- Blocks (do/end)

6. Ruby Solargraph (by castwide)

What it does: Advanced Ruby language server with excellent Rails support.

Setup:

gem install solargraph

Features:
- Comprehensive code completion
- Method signature help
- Workspace symbol search
- Documentation on hover
- Code formatting

Configuration:

{
  "solargraph.diagnostics": true,
  "solargraph.completion": true,
  "solargraph.hover": true,
  "solargraph.definitions": true,
  "solargraph.references": true,
  "solargraph.symbols": true
}

Productivity Boosters

7. GitLens (by GitKraken)

What it does: Supercharges Git capabilities in VS Code.

Rails-specific benefits:
- See who last modified each line (blame annotations)
- Compare file changes across branches
- Navigate Git history visually
- Understand code changes in context

Essential for:
- Reviewing code changes before commits
- Understanding why code was changed
- Tracking down when bugs were introduced

8. Thunder Client (by rangav)

What it does: REST API client built into VS Code.

Why Rails developers need it:
- Test your Rails API endpoints without leaving the editor
- Save common requests for different environments
- Inspect JSON responses with syntax highlighting
- Environment variables for different configs (development, staging, production)

Workflow:
1. Build a Rails API endpoint
2. Test it immediately in Thunder Client
3. Save the request for future testing
4. Share collections with team members

9. Auto Rename Tag (by Jun Han)

What it does: Automatically renames paired HTML/ERB tags.

Example:

<!-- Change opening tag -->
<div class="container">
  Content here
</div>

<!-- Extension automatically updates closing tag -->
<section class="container">
  Content here
</section>

10. Bracket Pair Colorizer 2 (or built-in bracket colorization)

What it does: Colors matching brackets, parentheses, and braces.

Rails benefit: With nested ERB blocks and Ruby hashes, this makes code much more readable:

<%= form_with(model: [@project, @task], local: true, data: { turbo_frame: "task_form" }) do |form| %>
  <% if task.errors.any? %>
    <!-- Colored brackets help track nesting -->
  <% end %>
<% end %>

VS Code setting (newer versions):

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

Testing and Debugging

11. Ruby Test Explorer (by connorshea)

What it does: Provides a visual interface for running Ruby tests.

Features:
- Run individual tests or test files
- See test results in sidebar
- Navigate to failing tests quickly
- Integration with RSpec and Minitest

12. Rails DB Schema (by aki77)

What it does: Provides intelligent auto-completion based on your database schema.

Benefits:
- Auto-completion for model attributes
- Validation of column names
- Quick reference to database structure
- Works with schema.rb file

Code Quality

13. Ruby Rubocop (by misogi)

What it does: Integrates RuboCop linting into VS Code.

Setup:

# Add to Gemfile
gem 'rubocop', require: false
gem 'rubocop-rails', require: false

# Create .rubocop.yml
inherit_gem:
  rubocop-rails: .rubocop.yml

AllCops:
  NewCops: enable

Features:
- Real-time code quality feedback
- Auto-fix many issues
- Consistent code formatting
- Rails-specific cops for best practices

14. Prettier (by Prettier)

What it does: Code formatter for JavaScript, CSS, HTML, and more.

Rails integration: Formats your frontend assets and ERB files consistently.

Configuration (.prettierrc):

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

File Management

15. Rails Partial (by aki77)

What it does: Easy creation and navigation of Rails partials.

Workflow:
1. Select ERB code you want to extract
2. Cmd+Shift+P → "Extract to Partial"
3. Extension creates partial file and updates original template

16. File Utils (by sleistner)

What it does: Advanced file operations in sidebar.

Rails benefits:
- Duplicate files and update imports
- Move files and automatically update references
- Create new files in current directory
- Rename files with reference updates

My VS Code Settings for Rails

Here's my complete settings.json for Rails development:

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.rulers": [80, 120],
  "editor.bracketPairColorization.enabled": true,
  "files.associations": {
    "*.html.erb": "erb",
    "*.text.erb": "erb",
    "*.json.jbuilder": "ruby",
    "Gemfile": "ruby",
    "Rakefile": "ruby",
    "config.ru": "ruby"
  },
  "emmet.includeLanguages": {
    "erb": "html"
  },
  "ruby.intellisense": "rubyLocate",
  "ruby.codeCompletion": "rcodetools",
  "solargraph.diagnostics": true,
  "solargraph.completion": true,
  "files.exclude": {
    "**/tmp/": true,
    "**/log/": true,
    "**/node_modules/": true,
    "**/.git/": true
  },
  "search.exclude": {
    "**/tmp/": true,
    "**/log/": true,
    "**/node_modules/": true
  }
}

Keyboard Shortcuts I Use Daily

Add these to your keybindings.json:

[
  {
    "key": "cmd+shift+r",
    "command": "workbench.action.showCommands"
  },
  {
    "key": "cmd+t",
    "command": "workbench.action.quickOpen"
  },
  {
    "key": "cmd+shift+o",
    "command": "workbench.action.gotoSymbol"
  },
  {
    "key": "cmd+shift+f",
    "command": "workbench.action.findInFiles"
  }
]

Workspace Configuration

Create a .vscode/settings.json in your Rails project:

{
  "ruby.useLanguageServer": true,
  "solargraph.diagnostics": true,
  "files.watcherExclude": {
    "**/tmp/**": true,
    "**/log/**": true,
    "**/node_modules/**": true
  },
  "search.exclude": {
    "tmp/": true,
    "log/": true,
    "node_modules/": true,
    "coverage/": true
  }
}

Extension Loading Performance

To keep VS Code fast with many extensions:

{
  "extensions.autoUpdate": false,
  "ruby.intellisense": false,  // If using Ruby LSP
  "files.watcherExclude": {
    "**/tmp/**": true,
    "**/log/**": true,
    "**/coverage/**": true
  }
}

Debugging Setup

For Rails debugging with VS Code:

.vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": ["server"]
    },
    {
      "name": "Run tests",
      "type": "Ruby",
      "request": "launch",
      "program": "${workspaceRoot}/bin/rails",
      "args": ["test"]
    }
  ]
}

Recommended Extension Combinations

For beginners:
- Ruby (Peng Lv)
- Rails (Hridoy)
- ERB Helper Tags
- GitLens
- Auto Rename Tag

For intermediate developers:
- Ruby LSP (Shopify)
- Solargraph
- Thunder Client
- Ruby Rubocop
- Rails Partial

For advanced workflows:
- Add debugging configurations
- Custom snippets
- Workspace-specific settings
- Integration with CI/CD tools

Common Issues and Solutions

"Go to Definition" not working

  1. Install Ruby LSP or Solargraph
  2. Make sure bundle install is run
  3. Restart VS Code language server

Slow performance with large Rails apps

  1. Exclude tmp/, log/, node_modules/ from file watcher
  2. Disable unused extensions
  3. Use workspace-specific settings

ERB syntax highlighting broken

  1. Check file associations in settings
  2. Install ERB Helper Tags extension
  3. Reload window after configuration changes

These extensions have transformed my Rails development experience. Start with the must-have extensions, then gradually add others based on your workflow needs.

Key takeaways:
- Ruby LSP or Solargraph for intelligent code completion
- Rails extension for MVC navigation
- ERB Helper Tags for template development
- GitLens for version control integration
- Configure file exclusions for performance

Try installing these extensions one by one and see which ones improve your workflow the most. Everyone's development style is different, so customize based on what makes you most productive!

Next up: "Git Workflow for Solo Rails Projects" - We'll explore branching strategies and deployment workflows for individual developers.

Christopher Lim

Christopher Lim

Rails developer and Unity explorer. Family man, lifelong learner, and builder turning ideas into polished applications. Passionate about quality software development and continuous improvement.

Follow on X View Code Connect
Back to All Posts
Reading time: 8 min read

Enjoyed this tools & setup post?

Follow me for more insights on tools & setup, Rails development, and software engineering excellence.

Read More Posts Follow on X