Visual Studio Code — Tips and Tricks

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

Visual Studio Code has a built in integration with Git. It provides simple operations such as branch switching, branch creation and track of changed files. Some of the less obvious things are quick addition to .gitignore(right click on the file when in source control view), and side by side comparison of changes (same contextual menu while in source control view).

Debugger

Visual Studio Code has built in debugger capabilities that can very easily be configured (through the use of extensions) to work with many languages like Ruby, Golang and PHP.

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

Visual studio has great built in support for markdown. When you create a new file with the .md extension hit “⌘ \“ to split the page followed by Shift+⌘+V. This will provide you with a live preview of the markdown page. Visual studio by default synchronizes the location of the cursor on both sides, so even when the page you work on is long, you can easily follow on the preview.

Intellisense (Auto Complete)

Visual Studio Code IntelliSense is provided for JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass out of the box. VS Code supports word based completions for any programming language but can also be configured to have richer IntelliSense by installing a language extension.

So far I used the following language extensions:

Ruby
Go
PHP IntelliSense

Search and Replace

Visual Studio Code provides plain search and regular expression matching capabilities for one file or across the whole project with the ability to easily exclude certain files.

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

Visual Studio Code allows you to change your keyboard bindings for any of the built in functionality as well as any functionality that is introduced by installed extensions. It also allows you to quickly setup keyboard bindings for popular IDEs (code preferences Keymap extensions).

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

Multiline Cursors

You can use multiline cursors within Visual Studio Code. Either above or below from where your cursor is by using ⌥ + ⌘ + ↑ OR ⌥ + ⌘ +↓ respectfully. This allows you to edit multiple lines at the same time. Hit escape to get back to one cursor.

Visual Studio Extensions That I Find Useful

This is a list of the extensions I find useful with Visual Studio Code:

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

There are many great IDEs to choose from. Visual Studio allows you to use it in a very minimalistic manner if you choose or you can add lots of functionality using the many extensions created by the community. I hope that you find this blog an inspiration to give it a try or that you found good tips if you are already using it.