7 little-known VS Code extensions that prove it's more than just an IDE

Like many developers, I used to think of VS Code primarily as a slick code editor – great for writing, debugging, and managing projects. It’s a fantastic tool, no doubt, but my perspective shifted when I started digging into its vast ecosystem of extensions. These aren’t your everyday syntax highlighters or linters; these are powerful tools that transform VS Code into something far more versatile. Here are the hidden gems that prove VS Code is capable of so much more than just an Integrated Development Environment.

7 Excalidraw

Brainstorm ideas in no time

The Excalidraw extension for VS Code is a fantastic example of how a simple tool can enhance your development workflow. It integrates the popular web-based virtual whiteboard directly into your VS Code. You can create and edit Excalidraw diagrams as it handles files with extensions like .excalidraw, .excalidraw.json, .excalidraw.svg, or .excalidraw.png.

It maintains the signature hand-drawn look and feel of Excalidraw, which is great for quick diagrams that don’t need to look perfectly polished. The extension provides all the basic tools like rectangles, circles, diamonds, arrows, lines, and more.

It’s quite handy for quick design sketches and wireframes, software architecture diagrams, flowcharts, visualizations, and brainstorming sessions. You can simply create a new file with one of the supported extensions and unlock the Excalidraw editor in VS Code.

6 Mermaid Chart

Add different charts using an open-source language

If Excalidraw is too basic for you, explore the Mermaid Chart extension for VS Code. As expected, it leverages the Mermaid.js library to allow developers to create, visualize, and manage diagrams using simple, Markdown-like text syntax directly within their editor.

As you type your Mermaid syntax in a file, the extension provides an instant, live preview of the rendered diagram in a separate panel. The extension automatically recognizes .md files and Mermaid code blocks in Markdown. It supports a wide range of diagram types, including Flowcharts, Sequence diagrams, Class diagrams, Gantt charts, Pie charts, and more.

It's a must-have extension for technical documentation, code flow and algorithm visualization, and API documentation.

5 Foam

An ideal PKM tool

The Foam extension transforms your familiar code editor into a powerful PKM system. It is heavily inspired by concepts from Roam Research and the Zettelkasten method. It connects ideas, builds a network of knowledge, and delivers better content creation within your local Markdown files.

You can link notes together using the [[wiki link]] syntax, and Foam automatically shows you backlinks. This helps you discover unexpected connections and provides context. Foam supports graph visualization, link preview and navigation, daily note, and more.

4 Vscode-icons

Add an aesthetic touch

VS Code allows extensions to contribute different icon themes, and vscode-icons provides a rich set of custom icons that are highly recognizable for a vast array of programming languages. Instead of genetic document or folder icons, you will see a specific icon for a .js file, a .css file, a .git folder, and so on. It supports a wide range of file extensions, file names, and folder names.

It might seem like a small detail, but it boosts visual clarity, navigation speed, and overall user experience.

3 Markdown All in One

Take Markdown experience to the next level

While VS Code has decent built-in Markdown support, this extension takes the experience to a new level. It’s a prime example of how an extension can elevate an editor into a powerful content creation platform.

Markdown All in One supports keyboard shortcuts for common formatting. This is a massive time-saver. Instead of manually typing ** for bold or * for italic, you can use keyboard shortcuts for common formatting options. The extension also supports Table of Contents, smart list editing, auto completions, and more.

2 Project Manager

Manage your projects like a pro

If you often juggle multiple projects, use the Project Manager extension. While VS Code’s built-in Open Folder and Workspaces features handle individual projects well, the Project Manager extension provides a centralized, quick, and efficient way to organize, access, and switch between all your development projects.

The key features include a centralized project list, the ability to save any folder as a project, auto-detection of repositories, organization with tags, and more. It elevates project organization, reduces context switching, and enhances productivity.

1 Figma for VS Code

Access your Figma files

This plugin bridges the gap between design and development workflows. It integrates the power of Figma’s design collaboration features and its developer-focused Dev Mode directly into the VS Code environment.

Traditionally, developers would switch between their IDE and the Figma app to inspect design specs, copy values, and understand layouts. This extension eliminates this constant context-switching by bringing the essential design information right to the developer’s side with VS Code.

Unlock VS Code’s true power

As you can see, VS Code is far more than just a place to write and review code. These extensions transform it from a mere editor into a powerhouse workstation, capable of handling tasks you might never have expected. What are you waiting for? Download VS Code using the link below, head to the extensions menu, and expand your development ecosystem in no time.

If you are using Ubuntu as your primary machine, here’s how to install VS Code on it.