VSCode is the #1 IDE for coding as it has a lot of awesome features that make your development experience 10x better. What if I told you there was a way to add awesome extensions to the IDE that make your experience even better and more fitting for you as a developer! Here are my 10 favourite extensions to use in VSCode (not in order).
Auto Rename Tag
Auto Rename Tag is an awesome extension that speeds up your development experience a lot. If you ever spell an HTML tag name wrong or you use the wrong tag, all you have to do is change the name of the starting tag and the closing tag will change too!
ENV
Environment files always look really boring and can sometimes be hard to navigate through. This extension adds syntax highlighting to your environment files to make it easier to distinguish the name of the variable from the value, as well as add some colour to your file!
CodeSnap
CodeSnap is the cleanest and easiest way to take screenshots of your code. Maybe you have a bug that you can't figure out and you need to show someone your code so they can help you or maybe you have to show your code to a client. With this extension, all you have to do is press Ctrl/Cmd+Shift+P and select CodeSnap, then just select the code you want to take a screenshot of!
GitLens - Git supercharged
GitLens is a great extension to keep track of commits in Git. When you hover over a line of code, it will show you who committed that code, when they did it as well as the commit message.
htmltagwrap
htmltagwrap is another great extension to use. A lot of times you will have to wrap a piece of code inside of another tag and it is a bit of a hassle to do that. With this extension, all you have to do is select a piece of code and press Alt/Option+W and it will wrap that piece of code in a tag.
Color Highlight
Color Highlight is an extension that will help you well styling your code. Anytime you enter a HEX or RGB value, it will highlight that value with the colour that you entered.
Material Icon Theme
Material Icon Theme is an extension that changes the icons for your files and folders in the VSCode Explorer. By default, they are very basic, but this extension makes them easier to distinguish and makes them look better.
Thunder Client
If you have ever worked with something like Postman or Insomnia this extension will look familiar to you. Thunder Client is a way to test API endpoints inside of VSCode without any external application required.
Now to the absolute best ones.
Github Copilot
Github Copilot is an AI pair programmer made by Github that will make your development experience 1000x faster. This is the smartest tool I've ever worked with. It will be able to guess the code you are about to write and give you amazing and clean suggestions just based on comments and previous code!
ES7+ React/Redux/React-Native snippets
This is the best extension to use when working with React. It has hundreds of amazing snippets to make your coding experience faster including rfce (React Functional Component), rxslice (Redux Slice), rnfe (React Native Functional Component), and much much more!
In my opinion, those are the 10 best extensions to use as a React developer and I strongly recommend that you install them and start using them to your advantage today.