Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 30, 2021 02:14 pm GMT

10 VS Code Extensions for Ruby on Rails Developers

Orginally published at Medium on Sep 9th 2020.

Powerful extensions for Rails developers.

Ruby is built with developer happiness in mind. However, if your editor is not correctly set up, youre in for a painful ride. Finding the right extensions on VS Code can take you down a long trial-and-error path.

Heres a list of powerful extensions for Ruby on Rails developers.

Ruby

  1. Ruby
  2. Ruby Solargraph
  3. Endwise
  4. ERB Helper tags
  5. Rails DB Schema
  6. Rubocop
  7. ERB Formatter
  8. Emmet in ERB

General

  1. Atom Dark Theme
  2. VSCode-icons
  3. DotENV
  4. Output Colorizer
  5. Auto Rename Tag
  6. Highlight Matching Tag
  7. Bracket Pair Colorizer 2

Ruby

1. Ruby

This speaks for itself. Ruby syntax highlighting.
Ruby

2. Ruby Solargraph

Intelligent code completion and documentation while youre writing code.
solargraph png
solargraph gif

3. Endwise

Be wise and never forget to close the end immediately.
Endwise png
Endwise gif

4. ERB Helper Tags

Useful shortcuts to save you time.
erb 1
erb 2

5. Rails DB Schema

Get quick insight on the defined database schema while youre typing.
schema png
schema gif

6. Rubocop

Code formatter for writing Ruby.

rubocop

If youre running into the following error, follow this guide to link the right execution path:

rubocop is not excutable execute path is empty!

7. ERB Formatter/Beautify

Not being able to indent your html.erb files in VS Code can be a real pain. ERB Formatter depends on the htmlbeautifier gem, so we need to install that dependency too: gem install htmlbeautifier.

Erb formatter

"files.associations": {  "*.erb": "erb"},"[erb]": {  "editor.defaultFormatter":"aliariff.vscode-erb-beautify" ,},"[html]": {  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",},"files.associations": {  "*.erb": "erb"}

8. Emmet in ERB

Its not an extension, yet its something you really want. If youre writing html.erb files, you want to have access to the available emmet in HTML. It requires this setup:

"emmet.includeLanguages": {        "erb": "html"      },"emmet.showAbbreviationSuggestions": true,"emmet.showSuggestionsAsSnippets": true

General

1. Atom One Dark Theme

atom png

The theme of your editor is a personal choice. Choose whats pleasant to your eyes and provides useful syntax highlighting. Alternatively, check Material Theme.

2. VS Code Icons

Beautiful icons make it easy to distinguish between folder and file types.
icons
icon example

3. DotENV

Syntax highlighting for your .env file.
Env
Env example

4. Output Colorizer

Make it easy to read through the logs with colorised log files.
output
output example

5. Auto Rename Tag

Save yourself 50% of the time spent selecting closing tags.
Rename
Rename gif

6. Highlight Matching Tag

Spot opening and closing tags immediately. Ive also added some optional custom config to highlight both the left and right chevron (< . >) when selecting a tag.

matching
matching example

"highlight-matching-tag.enabled": true,"highlight-matching-tag.styles": {   "opening": {     "left": {       "custom": {         "borderWidth": "0 0 0 1px",         "borderStyle": "solid",         "borderColor": "yellow",         "overviewRulerColor": "white"       }     },     "right": {       "custom": {         "borderWidth": "0 1px 0 0",         "borderStyle": "solid",         "borderColor": "yellow",         "overviewRulerColor": "white"       }     },     "name": {       "underline": "yellow"     }   } }

7. Bracket Pair Colorizer 2

JavaScript syntax highlighting and formatting are extensively covered in VS Code. Depending on the framework you use, you might want to add other extensions too.

pair
pair 2

Thanks for reading!

*Photo by @sejadisruptivo on Unsplash.


Original Link: https://dev.to/thomasvanholder/10-vs-code-extensions-for-ruby-on-rails-developers-89a

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To