VS Code Extensions for Ruby on Rails Developers
Tags: rails, ruby, vscode, productivity
Published: 2021-10-30 14:14:46

<small>Orginally published at Medium on Sep 9th 2020.</small>

Powerful extensions for Rails developers.

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

Here’s 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q4lygi5mdfjki0hd8q5.png)

---

### 2. Ruby Solargraph
Intelligent code completion and documentation while you’re writing code.
![solargraph png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8q3rqoq8d68w68j1h45.png)
![solargraph gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv2jtj6g5yprvszj8iq8.gif)

---

### 3. Endwise
Be wise and never forget to close the end immediately.
![Endwise png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wusndxql5s5cw2rhdjcv.png)
![Endwise gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6n67ldilikoocbo0ny2.gif)

---

### 4. ERB Helper Tags
Useful shortcuts to save you time.
![erb 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qifqvtcy9ht9nwkz2a20.png)
![erb 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6jm13xl56xqvusmaw0d.png)

---

### 5. Rails DB Schema
Get quick insight on the defined database schema while you’re typing.
![schema png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3e3cssb2fjtt82bvxkv.png)
![schema gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jctb1v175vjbkg0uc1f4.gif)

---

### 6. Rubocop
Code formatter for writing Ruby.

![rubocop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yy3e1p609satctuy33e.png)

If you’re running into the following error, follow [this guide](https://stackoverflow.com/questions/53367947/rubocop-on-vscode-not-working-error-rubocop-is-not-executable/53367974) to link the right execution path:

```bash
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr1zsa9ww05emwxvhg5h.png)

```json
"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

It’s not an extension, yet it’s something you really want. If you’re writing __html.erb__ files, you want to have access to the available emmet in HTML. It requires this setup:

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

---

## General
### 1. Atom One Dark Theme
![atom png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nu2o65mm8gxa9lpcype.png)


The theme of your editor is a personal choice. Choose what’s 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wnvj3tmt26bmo9yiddo.png)
![icon example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ut5xqgbqalf785soo4ut.png)

---

### 3. DotENV
Syntax highlighting for your `.env` file.
![Env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik9s01l1doys3kgr5cdj.png)
![Env example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afc8rcto8xfxyynxlhqr.png)

---

### 4. Output Colorizer
Make it easy to read through the logs with colorised log files.
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4mbbud4jvak4kskn019.png)
![output example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfr1d7j19o9hekwj8h5f.png)

---

### 5. Auto Rename Tag
Save yourself 50% of the time spent selecting closing tags.
![Rename](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztp7wmawyli9krqruxwg.png)
![Rename gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4a8lo7d2ydggviguxqg.gif)

---

### 6. Highlight Matching Tag

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

![matching](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcgwul288y1pro85rdrj.png)
![matching example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac5smq6e79uyknfu319a.png)

```json
"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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsouq3d9r64wuy0m4r5l.png)
![pair 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hbuy7t7zd61x8ihs2s6.png)

Thanks for reading!


*Photo by @sejadisruptivo on Unsplash.