Best VS Code extensions for Front End Dev
Tags: webdev, vscode, beginners
Published: 2021-08-25 10:57:17

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](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
![JS SNIPPET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fish276qkuv7zes1093r.png)
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

#[Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
Need asthetic screenshots of your code like this one ? 

![Polacode sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v43gfw1hfp0wgcivkbe.png)


Polacode is here for you.

![Polacode GIf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbvfhbd6oz7jxv59ud93.gif) 


#[All Autocomplete](https://marketplace.visualstudio.com/items?itemName=Atishay-Jain.All-Autocomplete)

![All autocomplete GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo6bt6wlbm28trvjv78b.gif)

The best autocomplete to save your time ! 

#[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

![Better comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h69fjioomsgccsktvn1.jpg)

Make more human friendly and readable comments.

#[Auto Import - ES6, TS, JSX, TSX](https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import)
![Auto import GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxekhfk43s7mjogv26k5.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](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
![auto rename tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl65z9dcun6ygplnkl3f.png)

Automatically rename HTML tags. 
 
#[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?)
![Bracket colorizor ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bx4o2r1gks8c09ltk18.png)

This indetifies the matching brackets and colorizing to identify easily. 

#[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

![Code runner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4b5x102tbz5g9sbawxo4.jpg)
Runs any code !
  
#[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

![Spell checker gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz7wnyuhtrs6g2vk2ge4.gif)

check your english spellings in the code

#[ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

![React snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4a5m61k9ut1tt9zzqaiw.gif)

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

#[Google Fonts](https://marketplace.visualstudio.com/items?itemName=lior-chamla.google-fonts)

![Google fonts gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gcjd426xgk9pfxge6r3.gif)
Browse google fonts from VSCode and also get the CSS `import` instantly.

#[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

![Live Server GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czous0nm9vqg4jn4cjy6.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](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

![Import Cost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dk3ut41pu5vn9t6bcl5t.jpg)

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)](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)

![Tokyo nights](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lgncuupwtfg1frwkn28.png)

My favourite syntax theme in vscode. :3 :3

### 🎶🎶 THE END 🎶🎶