Top VS code extensions for Front-end developers

Listing most VS code extensions.

vscode

11-September-2020

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

Flutter Files

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.

Flutter

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.

Flutter Widget Snippets

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.

Dart

Another official extension for Dart language support. for flutter and dart developer this extension is required.

Javascript & Typescript Developer

Babel ES6/ES7

Nobody likes to write old code.Babel makes compiling to new javascript version faster and easier. That's why this extension add features to vscode make it understand the latest javascript version also add functionality to write less code by providing snippets.

Auto Rename Tag

Extension for html and xml that will rename closed tag depends to open tag.

Hightlight Matching tag

This extension makes it easy by finding the close tag of a html tag or even in React.

Change String Case

Between all the extensions the one of them I like. You just need to select word in camelcase to convert it ot UPPERCASE.

Color Info

In your css files this extension shows information about color and highlight it also shows what the color conversion will be like Hex, RGB.

CSS Peek

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.

ESLint

Integrates ESLint with VSCode.

React-snippets

As the name implies this snippets created by me, provides more easier way to create components, containers, redux template, and even Webpack config. With support of Typescript, Javascript, React(Native).

Angular Snippets

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.

Angular Language Service

This is the official one from Angular to support the framework in vscode(Highly recommended).

Git

Git Graph

Checking your team git history and easily perform git action from the graph.

Git History

This extension has almost everything related to git.I cannot go through them. You can simply read the doc's.

GitLens

This has official support from vscode Community as best git integrated Git controll system with vscode(Highly recommended).

Common

Auto import

If the file exists in your project this will make sure to import by referring the name.

Better Comments

Visualizing comments in another way depends on the way of how you prioritize them.

Bootstrap Snippets

This will add Bootstrap v4 support for your html

Bracket Pair colorizer

This add a feature to follow the brackets that with different colors, this makes it always easy to read.

Browser Preview

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.

Code Spell Checker

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).

Code Snap

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.

File Size

This extension adds the file size to bottom navigation of vscode.

Import Cost

This extension adds next to import syntax the size of the package the imported one. Note: I think it works for only Javascript and Typescript.

Indent rainbow

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.

Live Server

Between the most extensions this extension gains popularity by hosting locally your html file and live update will be applied.

Paste JSON as Code

As the name implies, this extension so powerful when it comes to use JSON and paste it as code.It supports very various langauges.

Path Intellisense

This one of highly recommended extension. it adds features too show the path between files on project.

Prettier

For me vscode with Prettier is much powerful.This one of reasons I still using vscode.

Settings Sync

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.

Themes

I move always between these themes if I feel bored.

Bear Theme

Community Material Theme

Material Theme

Monokai Pro

One Dark Pro

One Monokai Theme

Shades of Purple

SynthWave'84

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