DEV Community

Cover image for Make VSCode Home With These Extensions
Braingoop
Braingoop

Posted on

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.

Visual Studio Code

Theme/Icons

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

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

Discussion (0)