Make VSCode Home With These Extensions

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.

Theme/Icons

• Current theme:
  • GitHub Dark Mode ♥️
• Icons:
  • Material Icon Theme
• Font:
  • Fira Code

Workflow

• Auto Close Tag
  • Automatically add HTML/XML close tag
• Auto Rename Tag
  • Automatically rename paired HTML/XML tag
• Foam Research
  • 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
  • Comments extension will help you create more human-friendly comments in your code.
• 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
  • Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, e.c.t.
• advanced-new-file
  • Create files anywhere in your workspace from the keyboard
• Error Lens
  • Error Lens turbo-charges language diagnostic features
• ESDoc MDN
  • This extension lets you quickly bring up helpful MDN documentation in the editor by typing //mdn [object.property]; for example.
• Live Preview
  • Hosts a local server in your workspace for you to preview your webpages on in VSC!
• HTML CSS Support
  • HTML id and class attribute completion for Visual Studio Code.
• JavaScript (ES6) code snippets
  • Code snippets for JavaScript in ES6 syntax (ex: clg + tab -> console.log())
• Todo Tree
  • Show TODO, FIXME, etc. comment tags in a tree view
• Magick Image Reader
  • Uses ImageMagick to add read-only views of over 100 image formats in Visual Studio Code.

GitHub

• Gist
  • Access your GitHub Gists within Visual Studio Code.
• GistPad
  • GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor
• Git History
  • View git log, file history, compare branches or commits
• gitignore
  • Lets you pull .gitignore templates from https://github.com/github/gitignore
• GitLens
  • Supercharge Git within VS Code
• Open in GitHub, Bitbucket, Gitlab, VisualStudio.com
  • Open in GitHub, Bitbucket, Gitlab, VisualStudio.com

Style/Formatting

• ESLint
  • Integrates ESLint JS
• Prettier
  • Automatically format javascript, JSON, CSS, Sass, and HTML files.
• Color Highlight
  • This extension styles css/web colors found in your document.

Useful/Extra

• Import Cost
  • Display inline the size of the required/imported package
• VS Live Share
  • Collaborative editing, debugging, and more inside VS Code
• npm Intellisense
  • Autocompletes npm modules in import/require statements
• Path Intellisense
  • Autocompletes filenames
• Image Preview
  • Shows image preview in the gutter and on hover
• FontSize ShortCuts
  • Change the font size with keyboard shortcuts.
• WakaTime
  • Metrics, insights, and time tracking automatically generated from your programming activity.
• indent-rainbow
  • Makes indentation easier to read
• Discord Rich Presence
  • Show what you're working on in Discord!
• 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
  • Generate fake data for name, address, lorem ipsum, commerce and much more

See my full list of extensions here