DEV Community

Cover image for Make VSCode Home With These Extensions
Dooder
Dooder

Posted on

5 2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
bhanu1776 profile image
Bhanu Sunka

I think "jellyfish-x-retro" vscode theme deserves to be on your list 🚀💖

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more