Visual Studio Code Features Part 2

WRITTEN BY GARETH DUNNE @JSDIARIES

Rich Features 

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 +. 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.

http://donovanbrown.com/post/visual-studio-code-keyboard-shortcut-cheat-sheet

Custom Settings

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
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:

https://www.youtube.com/watch?v=fkM9jCRBwSs

Extensions

Chrome Debug

https://github.com/Microsoft/vscode-chrome-debug

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.

CSS Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

 ext install vscode-css-peek

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.

Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Another useful extension to install after you’ve initialized your git repository. You can view all your previous commits in a detailed window. In VSC press F1 followed by the command

 Git: View History (git log)

This will give an overview like so:

GIT-History Extension
Zen Mode

As of version 1.8 Microsoft introduced Zen Mode. This hides all of the UI for a more focused experience. To enable Zen mode press Ctrl + K + Z

If the full screen inhibits your ability to channel your inner Zen you can also turn that off by setting window.fullScreenZenMode like so:

VSC Zen-Mode
VSCode-Icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Icons Extension
ext install vscode-icons

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.

Color Theme

https://code.visualstudio.com/Docs/customization/themes

Color Theme Example

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
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.

Proudly published with Gatsby