How to Use Visual Studio Code Like Your Instructor

5 min readOct 17, 2019

Helpful Extensions and Shortcuts for Coding in Ruby on Rails

source: https://giphy.com/gifs/toXKzaJP3WIgM

At my time in Flatiron School, I have many occasions where I’m watching my instructor code really fast in a lecture and wondering, “How did he just do that???” He used a shortcut or has an extension I don’t understand that just makes coding look like actual magic. I wanted to find out how my instructors were doing it, so I went on a little journey to improve my Visual Studio Code setup.

I used Atom before coming to this program, and it was hard to give it up for the school-recommended VS Code. After I was finished with my research for this blog, I can now say that I like VS Code more than Atom.

There were a few steps to get there. Here’s what I did.

Extensions for Functionality:

Atom Keymap

This one is great if you’re used to Atom shortcuts. It lets you create files and folders easily by just pressing Aor Shift+ A in the directory that you’re in, as well as other cool shortcuts that you’re used to using from Atom

Ruby

This is the extension I would recommend the most for writing Ruby and Ruby on Rails. It gives you a lot of convenient shortcuts when you’re writing Ruby commands. Just start typing the command you want and then press Enter.

Simple Ruby ERB

Once you get into writing Rails, this extension is essential. It gives you all of the commands needed to write Rails fast, including the “ice cream cones” and “squids”, as my instructor likes to call them: <% %> and <%= %>

To access this shortcut, you can use the Control+ Shift + `command. (I personally didn’t like this command so I changed it in keyboard shortcuts. I’ll show you had to do so below.)

The one thing that this extension is missing out of the box is HTML snippet support in ERB files. This is what lets you have your HTML tags autocomplete when you’re in a ERB file. This was an easy enough fix:

While in VS Code, click on the Code button in the top left-hand corner of your screen, then click Preferences and then Settings
While in Settings, find the File icon in the upper right hand corner of the page and click. This will bring you into the settings.json file
Add the following code snippet at the end of your file, before the last curly brace:

"emmet.showSuggestionsAsSnippets":true,

"emmet.includeLanguages”:{

"erb": "html"

}

Make sure when using this fix that you remember to add a comma after the previous line of code. I spent way too much time trying to figure out why my settings were now broken!

Extensions for Aesthetic:

One Dark Pro

There are many themes out there for VS Code that say it makes your editor look like Atom, but this is the only one that fulfills this promise.

Material Icon Theme

This gives you cool icons that help you differentiate between different file types in your Rails project.

Shortcuts for Visual Studio Code

Some of these might be already familiar to you, so bear with me, but for me, these were life-changing. For example, I didn’t know that you don’t have to highlight the entire line when using a command in VS Code. Just put your cursor anywhere on that line and the command will work.

On a Mac:

In order to copy, press Command+ C. To cut, Command+X, and to paste, Command+ V
To erase your previous action, hold down Command+Z. To undo this command, press Command+Shift+Z
Command + F to find, Option + Command + F to replace
To comment out a line: Command + /
To go to the beginning or end of the line, press Command + Left/Right. You can go to the top or bottom of the page by pressing Command + Up/Down
You can move a line up or down by holding down the Option key and then the Up or Down key
You can copy a line up or down by pressing Shift + Option + Up/Down
To extend the cursor up or down multiple lines, press Control + Shift + Up/Down
To put your cursor on multiple lines manually, hold down Command and click where you want your cursor to be
To highlight similar words, press Command + D on the word you want to change. To highlight several words, keep pressing Command + D until all of the words you want to change are highlighted

How to Change Keyboard Shortcuts

What if you still want the functionality of all of these shortcuts, but you’re annoyed by the command itself? That’s easy, you can change your keyboard shortcuts in VS Code!

The first thing you want to do before you change any shortcut is TEST OUT YOUR SHORTCUTS FIRST. I repeat, please test out the command you want to change it to BEFORE you try to change it to make sure it’s not a command you want to overwrite. I ran into a lot of avoidable errors by not doing this. For example, I wanted to change the tags in the ERB file to the command = + Tab, like it is in Atom. That worked! Except, now that I want to type in an equals sign in an ERB file, I can’t!

Once you’re sure that the command you want to change it to hasn’t already been taken, follow the steps below:

While in VS Code, click on the Code menu in the top left-hand corner of your screen, then Preferences, and then Keyboard Shortcuts
Type to search for the command you want to change. (If you want to change the shortcut for the tags in ERB files, like I did, you would type in “erb”)
Click on the pencil icon to the left of the command
Press the desired shortcut and then press enter

Voila! Now you can code like your instructor!