Menu

Visual Studio Code Features Part 2

WRITTEN BY GARETH DUNNE @JSDIARIES

We will continue to look at more features of this wonderful text editor that is Visual Studio Code. If you missed part 1, for any god forsaken reason you can catch up here.

We will focus on some more of the nooks and crannies hidden in this source code editor

Keyboard Shortcuts

You may want have identical keybinds for indenting code as well as commenting and uncommenting etc. On Windows highlighting the desired code block to be formatted and holding the keys Shift + Alt + F will format your code by default.

Format Code Segment

However, if you have previous experience working in the Visual Studio IDE you may wish to change this to Ctrl + K + D . In order to do this, we can navigate to File – > Preferences -> Keyboard Shortcuts from here we can create a custom keybinding to override the default settings.

JSON Keybindings

Commenting Code Segment

Ctrl + K + C

Uncommenting Code Segment

Ctrl + K + U

These are just some of the most common ones that I use most often. Here is a detailed cheat sheet by Donovan Brown for many more useful shortcuts.

VSC allows us to change the default settings by navigating to File – > Preferences -> User Settings. This will give us a window like so:

VSC JSON Settings

Any changes we make in the right Window will override the default settings in the left. If we use the command Ctrl + Space we get a full list of possible properties we can edit. This is extremely useful as this one key command provides a full list of customisable options for our text editor.

For example a useful change would be to change the property files.autoSave to “on” so that all our files are saved automatically. Simply apply this in the right window in the split editor and your files will no longer have to be manually saved.

File Auto Save

You can siphon through the intellisense options to get a feel of what you would like to change. For some handy tricks and tips there is a nice tech talk that covers all this here:

The breakpoints will be used in VS Code and you won’t have to switch back to chrome to debug. This proves quite useful as you don’t have to switch environment/context when initializes a debugging session.

In order to utilise this extension, start Chrome with remote debugging enabled.

An absolutely invaluable extension for your VSC environment. It basically allows you to go to definitions of your CSS classes from the ID’s in your HTML and vice versa. For example, if I hover over a class in my HTML file, it will display all the css that pertains to that class in a popup window.

More of an aesthetic extension then anything else, this extension assigns each file an relevant icons beside it the file directory and in the editor top bar. It is frequently updated and the icons are of high quality. Definitely worth your while if you wanted to add some more visual fidelity to your work space.

Not so much of an extension but its still nice to see that VSC has a live theme view enabled with some nicely polished themes already integrated.

Snippets

VSC comes with a fully supported snippet implementation system. This will appear in the Intellisense as your typing or you can you type F1 followed by Insert Snippet. VSC will then display various snippets relevant to language of this file that you currently have open.

Inserting Snippet

I hope this highlighted some of the more attractive aspects of VSC as a text editor, practically and aesthetically. It is robust with options and tweaks that you can fine-tune to your own personal taste. Never have I used a text editor that had so much going for it, even without any extensions, by a country mile, it is still my text editor of choice.