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
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.
Commenting Code Segment
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.
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:
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.
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.
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:
<strong>ext install vscode-icons</strong>
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.
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.