DEV Community

Cover image for Best VS Code extensions for Front End Dev
Asif
Asif

Posted on

Best VS Code extensions for Front End Dev

VsCode extensions are the backbone on the text editor. You can add language, keymaps, plugins, debuggers and many other tools by the help of extension. Here are some useful or "Must have" extensions for front end dev like me :)

Javascript Code Snippet

JS SNIPPET
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Polacode

Need asthetic screenshots of your code like this one ?

Polacode sample

Polacode is here for you.

Polacode GIf

All Autocomplete

All autocomplete GIF

The best autocomplete to save your time !

Better Comments

Better comments

Make more human friendly and readable comments.

Auto Import - ES6, TS, JSX, TSX

Auto import GIF

Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript (ES6) and TypeScript (TS)

Auto Rename Tag

auto rename tags

Automatically rename HTML tags.

Bracket Pair Colorizer 2

Bracket colorizor

This indetifies the matching brackets and colorizing to identify easily.

Code Runner

Code runner
Runs any code !

Code Spell Checker

Spell checker gif

check your english spellings in the code

ES7 React/Redux/GraphQL/React-Native snippets

React snippet

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.

Google Fonts

Google fonts gif
Browse google fonts from VSCode and also get the CSS import instantly.

Live Server

Live Server GIF

This browser add-on is an extension for a developer tool in VS Code editor (Live Server). With this add-on installed, along with the VS Code extension, it gives you a functionality to automatically update your website on save; for other files than just .htm and .html.

Import Cost

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size

Tokyo night (theme)

Tokyo nights

My favourite syntax theme in vscode. :3 :3

🎶🎶 THE END 🎶🎶

Discussion (6)

Collapse
stuffsuggested profile image
niksin
Collapse
labib profile image
Asif Author

Woo, you got a nice list 👏👏

Collapse
wkylin profile image
WKYLIN

nice !

Collapse
mayannaoliveira profile image
Mayanna Oliveira

I like these extensions too ❤️

Collapse
aatmaj profile image
Aatmaj

That was neat👌

Collapse
obaino82 profile image
Obaino82

Nice one👏