Visual Studio Code Features Part 2

WRITTEN BY GARETH DUNNE @JSDIARIES

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.

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.

Ctrl + K + C 

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

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

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.

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

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.

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.

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:

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:

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

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.

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

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.

 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.

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.