Top VS code extensions for Front-end developers
Listing most VS code extensions.
When it comes to development we always looking for easier, faster and beautiful environment.
In this list I will take a look the best and top vscode extension that useful for every developer and used a lot on daily basis.
I will divide them as per Developer:
Flutter & Dart Developers
For this extension it makes easier to create bloc pattern on vscode while this is more specific for bloc pattern but it's very powerful.
The official vscode extension for flutter development make it easier to debug your widgets also supports Dart language you could use it actually as Dart language supporter.
Snippets makes it faster development for instance if you work for big projects you don't need to write every time the same template. That's what makes Snippets so powerful, with this extension you'll be able to create widgets Dart instances like variables and constructors etc.
Another official extension for Dart language support. for flutter and dart developer this extension is required.
Extension for html and xml that will rename closed tag depends to open tag.
This extension makes it easy by finding the close tag of a html tag or even in React.
Between all the extensions the one of them I like. You just need to select word in camelcase to convert it ot UPPERCASE.
In your css files this extension shows information about color and highlight it also shows what the color conversion will be like Hex, RGB.
With this extension you could see your css class info inside your template html, also if you click the class name you'll redirect to css files which is it very powerfull. Note: It does not have support for css modules.
Integrates ESLint with VSCode.
This package has a wide support from Angular Community. It's bring almost everything you need if you're working with Angular although, they have full support for all Angular versions.
This is the official one from Angular to support the framework in vscode(Highly recommended).
Checking your team git history and easily perform git action from the graph.
This extension has almost everything related to git.I cannot go through them. You can simply read the doc's.
This has official support from vscode Community as best git integrated Git controll system with vscode(Highly recommended).
If the file exists in your project this will make sure to import by referring the name.
Visualizing comments in another way depends on the way of how you prioritize them.
This will add Bootstrap v4 support for your html
This add a feature to follow the brackets that with different colors, this makes it always easy to read.
If you want your browser next to your code and also focusing by opening just on program than this one for you. It adds browser to vscode so you don't need to move between browser and vscode every time.
I cannot simply use vscode without this extension even I use others laptop, I go directly install it fot them.So it checks your code spelling actually anything inside your vscode for any file(Highly recommended).
If you're intersseted by sharing code by images in beautiful way, this is the best one. It takes pictures or snap code and show it in really nice way with same font, colors support.
This extension adds the file size to bottom navigation of vscode.
Sometimes you want to see visually how many indent the line have been used with this extension you could easily do that while it shows point for how many indents you line has.
Between the most extensions this extension gains popularity by hosting locally your html file and live update will be applied.
As the name implies, this extension so powerful when it comes to use JSON and paste it as code.It supports very various langauges.
This one of highly recommended extension. it adds features too show the path between files on project.
For me vscode with Prettier is much powerful.This one of reasons I still using vscode.
This will add ability to sync your settings of vscode to your git repository, in case you have lost your settings or moved to another laptop will be easy just to sync your settings back.
I move always between these themes if I feel bored.
With that I have to close it here.I just want to say that we all looking for good development environment and these are the syntax sugar to be a better developer.
Please consider sharing this article to support the author.
Thank you for reading, And see you next time.
Published on CodeReview by Mustafa Alroomi on 11-September-2020