VS Code Extensions and Common Shortcuts for Web Designers

JavaScript (ES6) Code Snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor. It supports both JavaScript and TypeScript.

Auto Close Tag

After opening a tag in HTML and XML it’s a hectic job to close it. So here is a nice solution. This extension closes the HTML and XML tag automatically.

Prettier — Code formatter

This extension will help us to format the JavaScript, HTML, CSS code. We can configure it as per our need.

Auto Rename Tag

This extension renames html tags automatically. So we can keep our code consistent and easy to maintain, even when working on bigger projects with lots of elements deep in the HTML structure.

Live Server

At the last the one extension every web designer/developer must use. This extension helps us in launching a local development server with live reload feature for both static & dynamic pages. So the next time you guys don't have to refresh the page again to see the output.

Cool Shortcuts

I have found useful cool shortcuts that allows you to start typing and if you hit tab it will complete your text or the cod you are trying to write. In react this can be useful when importing as you just need to start the import component and hit tab and it completes it.

when in your terminal there are a few tricks to speed up the process if you made a mistake or need to run a command again you can simply push the up arrow. And it will show the last command you typed and you can push up as many times as you feel the need to.

there are some good to know things we should be typing in our terminal a few I think we should always know.

• Ctrl c – copy
• Ctrl v – paste
• Ctrl / - comment out the line of code
• Ctrl b – hides your side column
• Ctrl P -This shortcut will bring up the dropdown menu with all your files so that you can quickly navigate to a new one.
• Ctrl Shift F -This is a great one that I just recently learned. If you have a load of files and folders in VS Code and you are looking for something specific you can use this shortcut to quickly find it.