The 6 VS Code extensions I wish I'd installed years ago

I've been using VS Code since its preview in 2015, and thanks to Claude Code, I've been spending more time with the editor than ever on my new projects. In all those years, I've installed and uninstalled hundreds of extensions, but I still come across a new one that makes me wonder why I didn't find it years ago.

So I went through every extension I have installed and picked the ones that I would install on every new VS Code setup. This isn't a definitive list, just the six that have earned their spot in my setup after years of installing and removing things that didn't stick. If you write in Markdown, work with Git, or spend any time cleaning up JavaScript, you'll probably find something useful here.

Markdown All in One

The one extension every Markdown writer needs

I use Markdown to write my notes and even articles, so it's not surprising to see Markdown All in One at the top of the list here. The feature I use the most is the automatic table of contents. Open the Command Palette with Ctrl + Shift + P, choose Markdown All In One: Create Table of Contents, and it generates a ToC based on your headings. It updates automatically when you add or remove sections, which is a huge time saver.

List handling is another small touch that I like. Press Enter after a numbered item, and the extension inserts the next number. Hit Tab, and it starts a sub-list, with automatic renumbering when you move items around. The built-in preview pane lets you place source and preview side by side on a wide screen to verify formatting without leaving the editor.

Install command:

code --install-extension yzhang.markdown-all-in-one

ESLint

Catch JavaScript mistakes before they become bugs

If you write JavaScript or TypeScript, ESLint is one of those extensions you don't appreciate until you've spent an hour tracking down a bug it would have caught instantly. It hooks into VS Code and checks your code as you type, flagging syntax errors, code smells, and style inconsistencies right inside the editor.

ESLint is more configurable than your average spell checker for code. You define your own rules and severity levels, so a missed await or an accidental console.log left in production code gets caught early. If you set editor.codeActionsOnSave to enable auto-fix, common issues get corrected every time you save.

There's a learning curve to the setup, though. Getting the right combination of presets, plugins, and ignore files to work without fighting your project takes some trial and error. But once the configuration is dialed in, it quietly catches the kind of logic issues that formatting tools like Prettier won't touch, things like promise-related mistakes and unused variables.

Install command:

code --install-extension dbaeumer.vscode-eslint

GitHub Pull Requests and Issues

Review PRs without leaving your editor

I used to review pull requests entirely in GitHub's web interface, and for small changes, it's fine. But the moment a PR touches more than a handful of files, the web UI can feel sluggish. The GitHub Pull Requests and Issues extension moves all of that into VS Code.

After signing in to GitHub, you get a dedicated panel in the Activity Bar that lists open pull requests and issues for whatever repo you have open. You can create a new PR by picking a base branch, adding a title and description, and submitting it without opening a browser. For reviews, clicking any file opens the diff right in the editor, with full syntax highlighting and inline comment support.

You can also start a review, reply to existing threads, and resolve conversations, all without context-switching. For anyone who reviews PRs regularly or works with Claude Code inside VS Code, this keeps you in the editor where you do most of your work.

Install command:

code --install-extension GitHub.vscode-pull-request-github

Error Lens

See errors inline, right where they happen

VS Code's default way of showing errors is a subtle squiggly underline. It works, but in a busy file, those underlines are easy to miss. Error Lens fixes this by displaying the actual error message inline, right at the end of the offending line, with the entire line highlighted in color: red for errors, yellow for warnings, blue for info.

Instead of generating its own diagnostics, it surfaces what your language server, TypeScript compiler, ESLint, or any other linter already reports. If a tool flags an issue and it shows up in the Problems panel, Error Lens will display it inline. So, it pairs well with every other diagnostic tool you're running.

If the inline messages feel noisy, you can tame it. The followCursor mode limits decorations to the line you're on, and the delay setting adds a brief pause before messages appear. You can also exclude specific messages with regex patterns. I keep mine set to show only errors and warnings, which hits the sweet spot between visibility and distraction.

Install command:

code --install-extension usernamehw.errorlens

Prettier

One-click formatting that ends style debates

Prettier is an opinionated code formatter, which means it can make most of the formatting decisions for you, things like indentation, line breaks, quote style, and semicolons, and re-prints your code according to its own rules. You just write, save, and it comes out clean.

To set it up, start by installing the extension, set it as your default formatter with "editor.defaultFormatter": "esbenp.prettier-vscode", and enable Format On Save. From that point on, you can write messy code all day and every save rewrites it. It supports JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML, and more.

Where Prettier is most effective is on teams. Drop a .prettierrc config file into your project, commit it, and every contributor formats code the same way. If you're using ESLint alongside it, add the eslint-config-prettier package to avoid rule conflicts, since Prettier handles formatting and ESLint handles code quality, and they work best when they stay in their lanes.

Install command:

code --install-extension esbenp.prettier-vscode

GitLens

See who changed what and when, without leaving the editor

VS Code has built-in Git support, but it stops short of telling you the story behind the code, for example, who edited it last or when. GitLens removes the guesswork. Simply place your cursor on any line, and GitLens shows who last modified it, when, and the commit message, right next to the code.

Beyond blame, GitLens adds a split diff view for comparing commits and branches, a commit search that filters by author, file, or message, and a file history panel that shows every change a file has gone through. There's also a heat map in the gutter that highlights which parts of a file get edited most, useful for identifying hot spots in a codebase.

Not everything in GitLens is free. Some features, like the visual commit graph, are locked behind a paid GitKraken subscription. But the core features, blame, file history, diffs, and search, are more than enough. If you spend any time trying to understand why a particular line of code exists, GitLens saves you from running git log and git blame in the terminal.

​​​​​​​Install command:

code --install-extension eamodio.gitlens

These extensions won't make VS Code perfect, but they'll get close

All of these extensions remove the small frictions that pile up over a workday: squinting at underlines, alt-tabbing to GitHub, reformatting code by hand, guessing who wrote a confusing function. Individually, each one saves a few seconds. Together, they turn VS Code into a tool like it was built for exactly how I work. If I could go back and tell my 2015 self to install six extensions and leave the rest alone, it would be these.