Make VSCode Home With These Extensions
Tags: visualstudiocode, vscodeextensions, productivity, editor
Published: 2022-06-23 07:52:05

---
title: Make VSCode Home With These Extensions
tags:
  - visualstudiocode
  - vscodeextensions
  - productivity
  - editor
---

Getting started with Visual Studio Code and/or looking for some new plugins to fit seamlessly with your workflow? Well, look no further! Below, I have included some of the most useful and recommended extensions that are completely free to install and use.

![Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3503be2ok9ccfsapmk18.png)

## Theme/Icons

- Current theme:
  - [GitHub Dark Mode ♥️](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)
- Icons:
  - [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
- Font:
  - [Fira Code](https://github.com/tonsky/FiraCode)

## Workflow

- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
  - Automatically add HTML/XML close tag
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
  - Automatically rename paired HTML/XML tag
- [Foam Research](https://marketplace.visualstudio.com/items?itemName=foam.foam-vscode)
  - note-taking tool that lives within VS Code, which means you can pair it with your favorite extensions for a great editing experience.
- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
  - Comments extension will help you create more human-friendly comments in your code.
- [CodeSwing](https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing)
  - It's like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but available directly from your highly-personalized editor.
- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
  - Run code snippet or code file for multiple languages: **C, C++, Java, JavaScript, PHP, Python, Perl,** e.c.t.
- [advanced-new-file](https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file)
  - Create files anywhere in your workspace from the keyboard
- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
  - Error Lens turbo-charges language diagnostic features
- [ESDoc MDN](https://marketplace.visualstudio.com/items?itemName=samundrak.esdoc-mdn)
  - This extension lets you quickly bring up helpful MDN documentation in the editor by typing `//mdn [object.property];` for example.
- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)
  - Hosts a local server in your workspace for you to preview your webpages on in VSC!
- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
  - HTML `id` and `class` attribute completion for Visual Studio Code.
- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
	- Code snippets for JavaScript in ES6 syntax (ex: clg + tab -> console.log())
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
	- Show TODO, FIXME, etc. comment tags in a tree view	  
- [Magick Image Reader](https://marketplace.visualstudio.com/items?itemName=elypia.magick-image-reader)
	- Uses ImageMagick to add read-only views of over 100 image formats in Visual Studio Code.
	  
### GitHub

- [Gist](https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist)
  - Access your GitHub Gists within Visual Studio Code.
- [GistPad](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs)
  - GistPad is a Visual Studio Code extension that allows you to edit GitHub [Gists](https://gist.github.com/ "https://gist.github.com/") and repositories from the comfort of your favorite editor
- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
  - View git log, file history, compare branches or commits
- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)
  - Lets you pull .gitignore templates from [https://github.com/github/gitignore](https://github.com/github/gitignore)
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
  - Supercharge Git within VS Code
- [Open in GitHub, Bitbucket, Gitlab, VisualStudio.com](https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github)
  - Open in GitHub, Bitbucket, Gitlab, VisualStudio.com

## Style/Formatting

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
  - Integrates ESLint JS
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
  - Automatically format javascript, JSON, CSS, Sass, and HTML files.
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
  - This extension styles css/web colors found in your document.

## Useful/Extra

- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
  - Display inline the size of the required/imported package
- [VS Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
  - Collaborative editing, debugging, and more inside VS Code
- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
  - Autocompletes npm modules in import/require statements
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
  - Autocompletes filenames
- [Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
  - Shows image preview in the gutter and on hover
- [FontSize ShortCuts](https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts)
  - Change the font size with keyboard shortcuts.
- [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)
  - Metrics, insights, and time tracking automatically generated from your programming activity.
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
  - Makes indentation easier to read
- [Discord Rich Presence](https://marketplace.visualstudio.com/items?itemName=LeonardSSH.vscord)
	- Show what you're working on in Discord!
- [Lorem ipsum](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum)
	- A tiny VS Code extension made up of a few commands that generate and insert lorem ipsum text into a text file.
- [vscode-faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker)
	- Generate fake data for name, address, lorem ipsum, commerce and much more
<br>

See my full list of extensions [here](https://github.com/DoctorBraingoop/my-vsc-setup/blob/master/.vscode/extensions.json)

<br>