My Top 5 VS Code Extensions that I found very useful as a Front End React Developer
Let's talk about Visual Studio Code extensions. Visual Studio Code (VScode) is one of the most popular text editors with over 14 million users worldwide. I have fallen in love with VScode since I started using it.
.png)
VScode has a lot of extensions and features that developers can install and use to make their day-to-day life easier. However, today, I will be focusing on the top 5 extensions that I found very useful as a front-end React developer. These extensions are not only useful but they also aid my productivity.
Without any further ado, let's get right into it. My top 5 extensions will have to be:
1. Git Lens - This is one of the most powerful VScode extensions. With this extension, you can easily explore and gain useful insights via comparison commands of a repository such as who last changed a currently selected line within your editor or the history of a specific file based on commits without breaking the development flow. In summary, it supercharges the Git capabilities built into your IDE. With over 10 million installs, I think you have to agree with me that it is one of the most popular indeed. If you are interested in trying it out or reading more about it, you can check it out here
2. ES Lint - This is an extension that analyzes your code and helps you to find errors or bugs. It doesn't only point out errors and bugs but sometimes, it provides suggestions on ways to fix those errors. With over 20 million installs, this is another great one to try out especially if you looking at writing better code and being a better developer. You can check it out here
3. ES7 React/Redux/GraphQL/React-Native Snippets - This is one of the most popular extensions for React developers. It allows you to generate syntax and snippets for React, Redux, Javascript, React-Native, and GraphQL. It also supports file extensions like Javascript, TypeScript, Javascript XML, HTML, and Vue. If you like shortcuts or looking for a way to speed up your development process, you should give this a try. It has over 5 million installs and you can check it out here
 |
| Image from Codevoweb |
4. Prettier - This is one of the most popular extensions used by developers in VScode. As the name suggests, it makes your code look pretty. It formats your code by enforcing a consistent style by parsing your code and reprinting it with it own rules. It wraps your code where necessary and also takes maximum length into account. To make this extension work seamlessly for you, you need to toggle on Format On Save in your VScode settings. This will make Prettier apply the necessary format on your code anytime you save. This extension has over 22 million installs and is one of my favourites too. You can check it out here
5. Auto Rename Tag - This extension automatically renames paired HTML and XML tags with support for JSX. As a React developer, I always work with tags & this extension has been very useful for me in avoiding unnecessary mistakes and fastening my coding process. This extension has over 9 million installs and you can check it out here
All these extensions will be very useful if you want to speed up your development process, write better codes, or generally develop React apps more efficiently. There are still many more useful extensions that I didn't mention here such as Path Intellisense (useful for autocompleting path names and files), TODO Highlight (useful for highlighting certain keywords such as
TODO: or FIXME: with nice colours), Code Spell Checker (useful for avoiding spelling errors), and Live Share (useful for pair programming) amongst others. All these extensions are also very useful & you can check them out. This article is only limited to my top 5 at this time.That being said, that will be all from me today. Thank you for reading this piece & I hope you found it useful. Until next time, ❤️ & 💡
HAPPY CODING!!! ❤️
.png)