10 Useful VS Code Extensions for Developers
The article covers 10 VS Code Extensions that are useful for developers. If you haven't tried these 10 extensions, Have a try.
Without any further ado, let’s quickly dive into those ten extensions.
Live Server
The first and one of the most useful extensions is Live Server by Ritwick Dey. With this VS Code extension, you can launch a development local server and this facilitates dynamic reload. Loading the output page every single time after changing/writing the code is a hefty task. I’d just say one line to summarize this extension: Live Server is there for you !
Prettier - Code formatter
The second extension that I’d recommend is Prettier - Code formatter by Prettier. And most probably, it’s the extension that you’re already using if you’re a developer or development enthusiast. Once you start scaling and coding new functions, components, etc. in your project, the code gets messier and unaligned. This extension formats your code that brings readability and solves the problem of unaligned messy code in your project.
ES7 React/Redux/GraphQL/React-Native snippets
If you’re a Javascript developer and you code on React/Redux/GraphQL/React-Native, then this extension by dsznajder is most probably the most useful and time saving extension you’d come across. This extension has various shortcuts for writing component definitions, functions, etc. For eg- you can just write “imr” instead of writing
import React from ‘react’Auto Close Tag
If you code HTML/XML then you’d have probably been irritated by closing every single tag manually. Don’t worry ! Auto Close Tag by Jun Han is for bringing someone like you to the rescue. This extension auto closes the tag and now you need not to worry about closing all the tags manually and in correct order. This extension is a time saver for HTML/XML coders.
Auto Rename Tag
The next most useful extension is Auto Rename Tag by Jun Han. If you’ve coded some HTML/XML in your project and you want to change the tag name- Suppose you wanna change <p> tag to <div> tag. The steps you need to follow is manually replace “p” with “div” for both the opening and closing tags. “Auto Rename Tag” extension automatically renames the paired HTML/XML tag for you. Now, you need to just change “p” to “div” for opening tag and it’d be automatically renamed in the closing tag. It’s so much helpful, isn’t it?
Live Share
Live Share by Microsoft is the one of the most useful extensions of VS Code. If you and your teammates are working on the same project and you all want to work on the same file/ code on the same file, then this extension is so much useful. Live Share allows you to work with your teammates on the same file/project from VS Code itself. Not only that, you can also allow/deny permissions(read/write) on files, terminals, etc.
vscode-icons
The next extension is vscode-icons by VSCode Icons Team. This extension assigns tiny little logo for the files and folders. Eg. it assigns js logo for the .js files, assigns git logo for the git related files, etc. Not only that, it assigns logo to the folders too based on the files contained inside that folder. So, this extension is mostly useful if you create a huge project and you wanna quickly dive into some of the folders/files. The tiny little icon assigned for folders and files also makes the directory structure attractive.
One Dark Pro
The next extension is One Dark Pro by binarify. This extension provides you three different color themes(as of now) for VS Code. If you wanna change the default VS Code theme and try a new one, you can try this extension. I’m personally loving One Dark Pro theme for my VS Code :)
Bracket Pair Colorizer
Bracket Pair Colorizer by CoenraadS is an extension for coloring the brackets of the code. This extension facilitates you with a function of coloring the brackets used in your code- different colors for different levels of brackets. Nested functions/code blocks implementations makes your code more confusing. Especially, you get confused between the opening and closing brackets pairs. This extension colorizes your brackets and makes your code easily readable.
CodeSnap
The final and most beautiful extension that I have came across is CodeSnap by adpyke. This extension helps you take beautiful screenshots of your code. If you have ever wondered how to take snap of your code in more elegant way, this extension is for you. Or are you still taking snap of your code by capturing from mobile device (or) using snipping tool? Then you should definitely try this. You’re gonna love it !!!
This is all about the ten VS Code extensions that I’d recommend anyone. I hope you liked the post and most importantly, I hope you like the extensions !!!
This article is a life saver!