5 Visual Studio Code Extensions Developers Need in 2020
Visual Studio Code is a popular IDE that makes life easier for any type of developer backend or frontend. It was developed by Microsoft and can be used on Windows, Mac, and Linux. There are many uses for this IDE including: debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, embedded Git, and more. All of these features contribute to making a Visual Studio Code an ultimate IDE.
In order to maximize your productivity using VS Code, you need to download these 5 extensions. Downloading these 5 extensions will not only make you feel like a 10x developer, but you will be one. Let’s get to it!
1. ES7 React/Redux/GraphQL/React-Native Snippets
This extension is needed by many web and mobile app developers these days. It gives you the ability to write annoying boilerplate code with shortcuts. You type only a few letters and hit enter, and boilerplate code appears. In order to download this awesome extension, open VS Code and click on the icon circled below.
After that, type “es7” in the search bar and it should be the first one there. If it’s not, I attached a picture below to show how the extension looks. Notice that it was written by dsznajder and has over 1.8M installs.
In order to create a functional component in React, all you have to type is rfce and it creates the boilerplate code for you, even naming the function. However, there are several other snippets you can use by downloading this extension. To view them, scroll down and you can see other snippets for this extension.
2. Live Share
Live share is another handy dandy extension that you can install in VS Code. This extension gives a user the ability to edit code and run commands on another person’s computer. It also helps with pair programming during the pandemic.
You can thank Microsoft for creating this amazing extension. Pair programming is one of the most powerful things you can do if you want to learn programming fast. Your skill can quickly advance with Live Share.
To install this amazing extension, click on the icon in the sidebar that I showed above and in the search bar type “Live Share”. The creator should be Microsoft and look something like this.
3. Bracket Pair Colorizer
Bracket Pair Colorizer is used to help you when you’re debugging your code. If you’re on a big project, this will help you a lot. Trust me. You can thank me later for saving you so much time. It colors the bracket pair with a certain color and if that same type of bracket repeats, it’s a different color. View the code below to see how it works.
To install this amazing extension, go to the extensions tab and type “bracket pair” and it should be the first one you see. It was created by CoenraadS and I also attached an image below to show you how it looks.
4. Live Server
Live Server allows you to do hot reloading when you’re developing with a normal HTML file. Normally, when using HTML, CSS and JavaScript you don’t have the hot reloading feature which ReactJS has. Although you could code easily this feature by hand, it is much easier to use this extension on your static projects. It launches a local development server with a live reload feature for static and dynamic pages.
To install it, type “Live Server” and it should be by Ritwick Dey. There will be a “Go Live” button below once you’ve installed it. When you click it, the extension will automatically open a new tab with the website on a live server. Note that by default, this will only show the static page.
5. Prettier — Code formatter
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. It supports many file types such as HTML, JavaScript, TypeScript, Angular, GraphQL, and the list goes on. It saves your life when you’re developing code for production by creating clean and semantic code.
You can install it by typing “Prettier — Code Formatter” and it should be created by Prettier.
What else?
There are way more extensions that can help you when developing your code such as Auto Close Tag, GitLens, and so many more. Check out some more blogs by Clever Programmer on how to become a better developer. Share this with people that you think might benefit from this.
Well that’s it for this one, folks! See you in the next one!
