Become a VS Code Ninja with these Extensions and Tools [2020]
Tags: javascript, beginners, codenewbie, vscode
Published: 2020-06-26 19:17:40

---
title: Become a VS Code Ninja with these Extensions and Tools [2020]
published: true
description: 
tags: javascript, beginners, codenewbie, vscode
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/p6r1c73si78dwtwqawks.jpg
---

VS Code is undoubtedly the best editor out there especially when it comes to writing javascript. It is fast, feature rich and has huge pool of extensions available which greatly enhances developer experience.

I've been using VS Code for the past 4 years and over these years I came across many these extensions that I would like to share with you. I'm so addicted to these extensions that my developer life would be incomplete without them.

Here is a list of my VS Code extensions:

## [Moonlight Theme](https://marketplace.visualstudio.com/items?itemName=atomiks.moonlight)

I've a habit of changing themes quite often and this is the current theme that I'm using these days. Colors are not very light and are easy on eyes both during day and night.

![Moonlight Theme](https://raw.githubusercontent.com/atomiks/moonlight-vscode-theme/master/preview.png)

## [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

![Auto Rename Tag](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)

## [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

Visual Studio Code plugin that autocompletes filenames. Very helpful in React projects when importing components from different folders.

![Path Intellisense](https://i.giphy.com/iaHeUiDeTUZuo.gif)

## [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)

Advanced autocompletion and refactoring support for SCSS. Must have for front-end developers that use Sass.

![SCSS IntelliSense](https://dev-to-uploads.s3.amazonaws.com/i/szt3wxhfngzeiqcneiwg.png)

## [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-placeholder-images)

Generate and insert placeholder images into your HTML. Easy to find placeholders images directly in the VS Code.

![Placeholder Images](https://raw.githubusercontent.com/Jakobud/vscode-placeholder-images/master/images/example.gif)

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

Launch a development local Server with live reload feature for static & dynamic pages.

![Live Server](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-animated-demo.gif)

## [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Code formatter using prettier.

![Prettier - Code formatter](https://dev-to-uploads.s3.amazonaws.com/i/7ya6yprr6rmlvualclgs.png)

## [Reactjs code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)

Code snippets for Reactjs development in ES6 syntax.

![Reactjs code snippets](https://raw.githubusercontent.com/xabikos/vscode-react/master/images/component.gif)

## [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

Must have extension in my opinion, it synchronize all your VS Code Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

Very helpful in case you change your development machine and want to import all your previous VS Code data.

![Settings Sync](https://dev-to-uploads.s3.amazonaws.com/i/hws0lt2izval51kh1kn2.png)

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

Improve your code commenting by annotating with alert, informational, TODOs, and more!

![Better Comments](https://raw.githubusercontent.com/aaron-bond/better-comments/master/images/better-comments.PNG)

## [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

A customizable extension for colorizing matching brackets.

![Bracket Pair Colorizer](https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png)

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

If you are like me who can write a single word without mistake this extension is a must have. Checks your code for spell errors and provide suggestions.

![Code Spell Checker](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/suggestions.gif)

## [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Integrates ESLint JavaScript into VS Code.

![ESLint](https://dev-to-uploads.s3.amazonaws.com/i/edxtlpjek3j7o9yalchy.png)

## [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

Display import/require package size in the editor.

![Import Cost](https://file-wkbcnlcvbn.now.sh/import-cost.gif)

## [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

Live Scratchpad for JavaScript. Write Javascript and see your outputs in the editor itself. Also has a Interactive Examples which are useful for both experienced developers (as references) and for new developers (to learn).

![Quokka.js](https://quokkajs.com/assets/img/main-video.gif)

## [TabNine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)

Another must have extension. TabNine is a all-language autocompleter — which uses machine learning to help you write code faster.

This is a Dark Magic extension, after installing and using it for sometime it gives very accurate suggestions which leave you awestruck.

![TabNine](https://dev-to-uploads.s3.amazonaws.com/i/m1syjq6v8wdxid9kwe9v.png)

## [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)

Syntax highlighting and IntelliSense for styled-components.

![vscode-styled-components](https://raw.githubusercontent.com/styled-components/vscode-styled-components/master/demo.png)

## [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

![Visual Studio IntelliCode](https://docs.microsoft.com/en-us/visualstudio/intellicode/media/python-intellicode.gif)

# Bonus

## [OpenInCode](https://github.com/sozercan/OpenInCode)

📂 Finder toolbar app to open current folder in Visual Studio Code

# Closing

I'll keep updating this list with new extensions that I find. Feel free to suggest the extensions that I might have missing. I would love to know what new extensions developers are using.

I've also created a git repo with the VS Code extensions and settings that I frequently use. Find the repo [here](https://github.com/vikrantnegi/vscode-personal-preference-setting)

<small>Cover image credit - Photo by [Ferenc Almasi](https://unsplash.com/@flowforfrank?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on Unsplash</small>