Hi, I am Daksh. I am here to help you improve your productivity. Today, I am gonna tell you some best Visual studio code extensions.
But first, I want you to join my telegram channel because there I share best practices, tutorials, facts, quiz and many more to enhance you Web Development skills. Click Me for joining telegram channel.
What are Visual Studio Code extensions?
Extensions are basically external tools that helps you to implement new features. I hope you understood very easily.
Now, let's get to the topic and see the best extensions of Visual Studio Code for improving your web development properties.
In total, there are 10 extensions that will help you to improve your writing skills, productivity and also save time.
Auto-Save on Window Change
You can predict it's work from it's name. this extension helps you to
to increase you coding efficiency. What exactly it does is when you
switch from Visual Studio Code to any other software or window, it
automatically saves the page.
For example - When you are creating front-end features and want to
check your website in browser every time, so it is irritating to press ctrl+s every time. So this is solution.
Every-time you switch the window, the page will automatically save.
Auto Rename tag
You must be thinking that this extension just auto renames the tags, but what exactly is renaming the tag?
Let's take a example - When you are writing codes, it is obvious that you will make mistakes. One of the mistake is that let's say you want to add a section tag but you placed div tag by mistake.
Then, you will have to delete the tag and add the tag another time,
right? You will say, "What a big deal, I will do it so easily". Yes, it
is easy to do this one time, two times, but you will start getting
irritated the third time.
So, with the help of this extension, when you change the starting
tag, the closing tag will automatically change. If you still can't
understand, I recommend downloading and using the extension.
Better Comments
We have been talking about extensions that are useful for HTML. But
now, let's talk about a helpful extension for programming languages like
JavaScript.
Better comments help you create comments in the right way. This
extension allows you to categorise your comments in different colours.
You can make your code very clear with this extension. You can mark wrong things with red and essential points with blue.
Quokka.js
How can we forget to run/debug JavaScript when talking about
JavaScript? This extension helps you to run JavaScript in your editor.
So, now you don't have to go to the browser every time to watch your
browser console. You can type console.log code and click on the run
button on the top of the screen, and your JavaScript will work.
We've talked about writing codes too much. But what about watching your code live. What if you can see your HTML page while creating them!
Yes, you can do it by live preview extension. Live preview extension creates and splits a window in your Visual Studio Code.
Note - 'This can not compile back-end languages like php'.
This extension will help you watch your pages live. When you save your page, it automatically updates the preview to the updated version of the code.
This extension does the same work as live preview does but differently. Live preview opens live preview in Visual Studio Code.
But this extension does the same work but in the browser. Just create an HTML page. Right-click in your editor, select 'Open with a live server.'
Note - 'This can not compile back-end languages like php'.
I think it's enough about extensions that help you to code. What about the style of your editor?
If your editor style is professional, it is easy to work for hours. Coding is not a work of minutes. It sometimes takes more than 2 hours to complete a single page!
Monokai Pro is a theme that most developers use in their daily coding life. You can choose from up to 5 types of Monokai Pro.
You have already chosen the best theme, but some people want their editor to look more professional, so the best icon theme is here.
This extension changes the icon of your files.
This introduction is so short, but this extension is beneficial. Give this icon theme a try.
That is all!
I hope this will help you a lot.
