loader image

Essential VS Code Extensions For A Developer

If you are a programmer, you would spend a lot of time on a text editor. These extensions will boost your speed and productivity a lot more than normal. Most of these extensions are only published in the VS Code Marketplace, so if you are using a different editor this post is not for you.

1. Live Server

This extension improves your development speed as it spins up a little server that has hot reloading ( when the file is saved the server automatically reloads ). Most web frameworks like React and Angular already provide this functionality, but with this extension, you can have the same functionality in any web development project

2. Prettier

Prettier is an opinionated code formatter. What it does is as simple as formatting your code, and it is beneficial to have a code formatter at your fingertips as it saves a lot of your time. It can also format your code automatically on save.

3. Better Comments

Better comments help you write more readable comments. This extension helps to visually organize your comments, so it will be much easier to understand. You can categorize your edit your comments to have highlighted text, errors and warnings, questions and strikethrough. With these formatted comments being visually separated you won’t miss out on any must-read comments.

4. Polacode

This extension is highly recommended for people who work with a team and constantly need to share code. This extension allows you to take beautiful screenshots of code to share with other people instead of a boring old screenshot!

5. Quokka.js

This extension is like a Chrome Console in VS Code. You can run JavaScript and TypeScript files with this extension without opening the browser or creating a server. It is a very popular JavaScript/TypeScript Playground in Visual Studio Code

6. ES7 React/Redux/GraphQL/React-Native snippets

This extension is very useful for React.js programmers as it provides a lot of snippets to create class components, components, imports, states and many more. It also provides a few basic snippets for JavaScript like anonymous functions, loops, for each etc.

7. Bootstrap 5 and jQuery CDN Snippets

What this extension does is it gives you the Bootstrap 5 and jQuery CDN Snippets. It helps you speed up the time you spend on a project as instead of searching google for the CDN you have access to this in your editor.

8. Auto rename tag

What this extension does is if you change the name of the element at the start it will change it at the end and vice versa. This extension is not only helpful in HTML but in React as well due to the type of components.

9. Code Spell Checker

If you make a lot of spelling mistakes this extension is a must-have for you. It underlines the spelling mistakes so that you can correct them and it also gives you a few suggestions of what the incorrect word should be.

10. Color Picker

This extension is for all the fellow CSS developers out there. This extension can convert a color to a different color format and it can also open the color picker in any file format.

Conclusion

There are a lot more extensions than this so if you want to check them out click me. These extensions are my top 10 so if you would like to recommend some more extensions, please leave a comment below. Hope you liked this post.

Leave a Comment

Your email address will not be published. Required fields are marked *