I am testing some front-end code and saw several youtube videos using VS code as the IDE. As a Python developer, it can be overwhelming at the first glance to see SO many lines of code just in general. However, it is like a magic to see how fluent front end developers leverage tools like VS Code and its extensions to pretty much auto generate the code they want with only a few key strokes. This is a post to show some the shortcuts that I came through today.

I do have to admit that VSCode’s default dark theme make it look simple and tidy. However, as you spend more time on it, you also realize that it has most of the features that you require out of a heavy duty IDE like Eclipse or PyCharm, at the same time, as extensible as sublime.

Like any IDE, VS Code comes with several shortcuts. Here is a printable cheatsheet which you can refer to on a constant basis, including quick comment, open, close and many others.

The most useful one for me is to use Cmd+K, Cmd+S open the shortcut cheatsheet within VSCode. (maybe there are so many key bindings that we have to get to what we need using two key strokes, many of the shortcuts within VS Code starts with Cmd+K)

Many of the tricks were straightly picked up from MS VS Code website, which includes basic features like auto complete, auto closing (as HTML has lots of <whatever> and </whatever> which is easy to miss).

Can you imagine that you only need 15 characters to generate 107 worth of HTML block? it not only thanks to Intellisense within VSCode, but most importantly, the Emmet Abbreviations which frontend developers like a lot.

In this case, each character is the short abbreviation for certain syntax:

• dot (.) as default is referring to the class of a div tag
• greater sign (>) is moving down the DOM tree
• sharp sign (#) refers to the tag id
• dollar sign ($) refers to auto numbering
• asterisk (*) refers to the code block multiplication

You can refer to the Emmet’s website for more information

“Sharpening the axe will not interfere with the cutting of firewood.” Finding a good editor before you start spending lots of time coding is probably time well spent.