It seems VS Code has become quite the popular IDE, and quite mainstream. I’m all for that; it means that you end up with a large ecosystem of extensions for it. And I’m quite happy with the editor itself; it’s fast and easy to use.

These days, I find myself sitting in front of a PC running Windows, but I actually do the vast majority of my development on remote Linux machines via SSH. Wind back to 2015, and I had spent the past 10 years on a Linux desktop developing web applications; a career change from 2015 to 2024 found me requiring a Windows machine, but still with needs to do web development on Linux machines. And VS Codes remotes “just work” for me - terminal right in the IDE, port forwarding that works reliably, and extensions that can operate in the remote host. So this has become my go to arrangement!

This page is a my list of favourite VS Code extensions. I know that there is a modern trend of making awesome lists of things which I do find helpful! But this specific list is actually more meant to be a reference for myself, as I keep forgetting which extensions I found in the past to solve particular problems… but if it proves helpful to others, then that’s a win too.

So here we go, categorised in no specific order:

LLM Assistant

• Kilo Code: after avoiding LLM and LLM coding agents for a long time, a friend finally convinced me to give it a go and make it part of my workflow. And after trying a few, I settled on Kilo Code, as it integrates well with VS Code remotes. LLMs for coding are a tool that can be used well or poorly; like any tool that we have. I always ensure that I understand what solutions it came up with, with follow up questions if needed - so I can maintain and grow the solution in the future.

Git

• Gitlens: just a pretty way to visualise those branches, and give you some helping hands to move git commits around.

Make it look pretty

• Material Icon Theme: so pretty, so many icons, making it much easier to navigate giant folders full of different types of files.

Formatting

• Prettier - Code Formatter: agreeing on the format between teammates is hard - bring your flame proof suit. This extension however makes it pretty straightforward for consistent formatting. Make sure to set Format on Save in the VS Code settings, and also set the Editor: Default Formatter to be Prettier. I don’t want to start flame wars, but this is an example .prettierrc file from a work project. I had to override a few file types as yaml and md didn’t like the four spaces when you run the files through linters; I wanted to capture this for my future reference.

{
  "singleQuote": true,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "useTabs": true,
  "tabWidth": 4,
  "semi": true,
  "printWidth": 120,
  "overrides": [
    {
      "files": "**/*.md",
      "options": {
        "tabWidth": 2
      }
    },
    {
      "files": ["**/*.yml", "**/*.yaml"],
      "options": {
        "tabWidth": 2
      }
    }
  ]
}

• Prettier SQL VSCode: Prettier delegates to other formatters where needed - except that there isn’t a default SQL formatter. And most SQL formatting extensions are for a specific RDBMS which means they come with more tools than needed. So this one just has the formatting for a range of databases. (My database of choice is Postgres, for reference).

TypeScript

Work at the time of writing is mostly using TypeScript, so there are a few extensions that get used for that.

• Astro: this blog ended up using Astro, which has it’s own file extension, .astro, and this extension helps with that. It is what it is.
• Code Spell Checker: I think faster than I can write, and it often shows. So let’s get technology to help.
• Playwright Test for VSCode: after recently being introduced to Playwright, I’m loving it as a browser test and automation tool. This extension makes it 100% better by allowing you to navigate tests, launch individual test cases, show you what lines have been run and how long it took for that line, and handle launching the trace viewer in your browser to monitor the test. This works amazingly with my remote SSH headless workflow; it’s like you’re actually there.
• Prisma: we’re using Prisma, and this extension works for the DSL that Prisma has for schemas.
• Vue: work uses Vue, so this extension was a no-brainer.

Documentation

• Draw.io Integration: I’ve been enjoying using the draw.io diagramming tool (despite it’s kind of open-source-not-open-source licence), and this makes it much easier to work with them in VS Code. Sometimes things can be better explained by a drawing!
• Markdown Preview Mermaid Support: this extension allows the Markdown previewer in VS Code (CTRL+SHIFT+V) to render Mermaid charts. Handy!
• Mermaid Chart: this “official” extension allows you to develop and preview these charts in real time.
• Excel Viewer: while I much prefer Google Docs, my current work is a Microsoft shop, and this extension has come in handy…

Rust

• Even Better TOML: there seem to be a few TOML extensions, but this one worked the best for me.
• rust-analyzer: I don’t need to say any more about this one. The only thing I did after install was disable the inlay hints; the “not actually there” text of the hints was a bit hard to code with. But once the option is off, you can show it again with Ctrl + Alt. There is a StackOverflow page about removing the hints, as it seems to evolve.

Very specific applications

• Docker: why didn’t I install this sooner…? So much less command line fu. (Which I mean I like, but sometimes it’s nice to quickly get into things…)
• ExtendScript Debugger: a past career required me to develop and debug some ExtendScript code (for Adobe products).
• Kubernetes: OMG - why was I trying to write manifests before I installed this? Don’t ask, just install if you have to do Kubernetes. Even has sensible highlighting for the weird syntax of Helm chart templates.
• nc-gcode: a syntax highlighter for gcodes. Handy for the case where you have to debug a program that you wrote that generates gcodes!
• PlatformIO IDE: need PlatformIO for an embedded project? Don’t fiddle with setting it up yourself; have the extension automatically read and install the right toolchain for you. A bit weird with having to open a project with it, but otherwise, simplifies a bunch of install steps.

And more to come…

I’ll come back and periodically update this, mainly for my own reference, but if you find it handy, I’m glad!