08 Visual Studio Code Extensions that speed up your workflow — 2021
Everyone uses Visual Studio Code these days for their day-to-day coding because it is fast, super light, reliable and an Open-Source IDE maintained by Microsoft Cooperation. But to make an IDE more useful and convenient, there are external services we can add as plug-ins. VS Code supports tons of plugins and there’s a huge community around these open-source plugins. They get updated daily and also improves the coding experience. 💻
How to install plugins for VS Code :
You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X).
This will show you a list of the most popular VS Code extensions on the VS Code Marketplace. From there, you can search for the plugin and install it.
Alright! Lets get to the list of plugins.! 🧑
I have listed out some of the most important and very useful plugins that I found recently and these plugins have saved me tons of time in debugging.
01. Bracket Pair Colorizer
Publisher: CoenraadS
This plugin makes your debugging life easy by gives a different color for each bracket pair of your code so you will never have a trouble finding that irritating missing bracket in your code. 😎
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
02. Error Lens
Publisher: Alexander
The error lens not only shows you the errors in very professional manner, it also gives you the descriptive and colorized view of how that error caused.
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
03. Material Icon Theme
Publisher: Philipp Kief
Yes, Little things matter! this plugin adds beautiful and informative icon theme for your typical VS Code icons on the left-hand side File explorer panel. Once you start using it, you will feel how easy to find the exact files from your Laravel or React or any other project which has hundreds of folders.
This icon pack identifies what type of data you use in the folders and shows you with a very definitive icon! 😍
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
04. Live Server
Publisher: Ritwick Dey
This is a useful local server for your web projects. No need to hit reload on your browser after each line of coding. Just click the go live button once and your site will be live reloaded every time you hit save. Or just enable autosave function in VS Code (File > Auto save).
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
05. Prettier — Code Formatter
Publisher: Prettier
Just like the name itself, it makes your code prettier than it ever before! Everyone likes to work with a beautifully aligned code lines, indentations. It’s hard to select and reformat every time when you finish writing a function. So why not let your IDE handle it? 😉
This plugin beautifully reformats your code every time you type a line. It also supports the Linter integration and disable default prettier formatting on specific languages you chose.
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
06. Icon Fonts
Publisher: idleberg
Extension lets provides you set of icon snippets from font awesome, ionicons, glyphicons, Octicons, Material Design Icons and many more.
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
07. Font Awesome Gallery
Publisher: tomasvergara
This plugin also gives you icon snippets but it has a icons gallery on the left panel of VS Code which shows you a number of icons with icon preview and their code snippet. This is pretty useful when comes to designing a website so you don’t have to open the font awesome website to search for the icons. 🤗
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=tomasvergara.vscode-fontawesome-gallery
08. Git Lens
Publisher: Eric Amodio
If you are a developer, you must already know the github.com. and this is the extension for the git lovers. Super fast, and easily track changes of the project, see the author, message and the date of the recent commits within the code, Customizable git blame annotations and many more. Give it a try and find out how it ease out your coding life.
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Hope these extensions will improve your overall coding experience.
However, installing many extensions might end up taking loads of your RAM and CPU usage so always install only necessary and important extensions to your IDE.
If you have any other valuable extensions, please mention below in the comments and if you found this valuable,
share the link to help others ! 👦💻
