Visual Studio Code — Tips and Tricks

Alon Sabi
Alon Sabi
Feb 6, 2018 · 5 min read

Visual Studio Code for Windows was first released in April 2015 (Visual Studio vs Visual Studio Code). It was released a year later for the Mac. Many developers are always on the lookout for a lightweight yet fully featured IDE. I believe that Visual Studio has the perfect balance between those things.

Visual Studio Code has many great features out of the box yet at the same time it does not use many resources. Another great feature is the fact that it has over 5400 extensions.

The keyboard shortcuts for this blog are for the Mac operating system. The equivalent shortcuts on Windows are as follows:

⌘ -Control
⌥ - Alt

Useful Built in Features

Git Integration

Debugger

The debugger provides everything that you would expect in a fully featured IDE. You can easily set breakpoints (left click to the left of the line number or hit ⌥ - F9 to add a breakpoint to the line of code). Once the debugger is active, visual studio provides step over, step in and run commands. You can also specify variables to watch and very easily enable and disable breakpoints at a page or line level from the breakpoints view.

Markdown

Intellisense (Auto Complete)

So far I used the following language extensions:

Ruby
Go
PHP IntelliSense

Search and Replace

When using search and replace, you can use regex groups in the search term, and use the groups when replacing.

A simple example for adding a prefix to all functions on a page:

Search for: “(function) (.*)\(“
Replace with: “$1 prefix_$2(“

The above will replace:

function firstfn()
function secondfn()

With:

function prefix_firstfn()
function prefix_secondfn()

Keyboard Shortcut Settings

The list includes Vim emulation, Sublime text, IntelliJ, Atom, Visual Studio, Eclipse, Emacs, Notepad++ etc.

Multiline Cursors

Visual Studio Extensions That I Find Useful

Settings Sync -If you use Visual Studio on multiple computers, this extension allows you to sync the settings between them easily. It also makes it easy to restore your settings if you need to re-install / replace your computer.

Contextual Duplicate -This extension allows you to duplicate a block of text with one keyboard shortcut (you get the same functionality if you install the IntelliJ IDEA keybindings so this is completely optional).

Docker -Provides auto completion and templates for creating Docker files and docker-compose files.

highlight-matching-tag -Provides HTML tag matching

Run on Save -Allows you to execute an arbitrary command when saving (you can specify pattern matching for different commands). This can be useful when coding on a compiled language such as Golang.

vscode-icons -This extension simply adds useful icons to the project browser. It makes looking at the project browser easier.

Path Autocomplete -Provides auto completion for the file structure when requiring files.

Partial Diff - This extension provides a great way to quickly compare between two areas of the code that look similar. Copy one to the clipboard, and highlight the other one. Right click and choose “compare text with clipboard”. There are other ways to use this diff tool without loosing your clipboard content.

Code Outline - Provides easy navigation between code blocks on the page.

Local History - This extension can save you when you do stupid things :-) It keeps track of all file changes (whenever you save), so you can retrieve file changes even if you did not commit them to your source control.

Last Words of Wisdom

Build Galvanize

A window to the product, design, and engineering teams at…