In the past few days, I’ve spent most of my time designing web pages and templates for a project I work on. Recently, I discovered some things which have increased my productivity and speed in VSCode. I’ve used VSCode mostly in the past few months for most of my front-end development. Among them is an extension and the others are shortcuts. They are tools I added to my arsenal of web development. Stay tuned! 😊
1. Live Server Extension
This VSCode extension provides automatic live reloading for the localhost when designing websites in VSCode. It was nicely built by Ritwick Dey.
You may search for it in the Extensions tab. Now, I can quickly check the changes I made in VSCode on my browser without having to refresh the page. Isn’t that wonderful? 😄
2. Split screens
I found it easier to write CSS styles for respective HTML elements when I split the screen into two, so HTML on one side and CSS on the other. Once I missed a
id, I simply look to the other side without having to switch tabs as I would have done if I was using a single screen. For me, that’s less stress and more speed.
3. Shortcut for Tab Toggling
With ease, I toggle between several tabs using
Ctrl+P on my keyboard. It is essential for my daily web design as I love things that happen with ease, such as moving between 5–10 tabs after coding for long hours.
4. Easy Commenting
I can’t do without commenting code. It’s a habit that has saved me from trouble a lot of times. In VSCode, simply highlighting a word, line or block of code and pressing
Ctrl+/ on my keyboard does the wonder of commenting and ‘un-commenting’ code as the case may be. If you didn’t know, try it out.
5. Typing elements without the less-than sign
Ordinarily, to start an HTML element, one would begin the opening tag with the less-than sign,
< before writing the element name and finish off with the greater-than sign
>. After which one will write the closing tag.
But now, when I want to start an element on a line, I just type the element name directly without the less-than sign, then the VSCode intelli-sense feature suggests the element in a drop-down format and I would just click. In less than a split-second, VSCode lays out the entire opening tag and closing tag.
If I need to include a class for an element, I just type out the
element.classname such as
div.card and I would press enter. Then, VSCode would generate the code element including the class name I specified like the following:
This makes me lay out my elements with incredible speed.
Well, we’ve reached the end of the article. I’ve tried to show you some hacks I found out unintentionally in VSCode. I hope to find new ones as I use VSCode more and publish my findings. Thank you! Guys, mention the shortcuts and hacks you use in your coding on VSCode in the comment section. I’d be glad you did. Thanks!
Don’t forget to clap👏 for this article if you found it helpful! 😉 You may also share.
You can tweet to me on Twitter @jkayLight. Let’s connect and get the conversation going.