DEV Community

Orbit Websites
Orbit Websites

Posted on

Top Free VS Code Extensions for Developers in 2026

#vscode #productivity #programming #beginners

Top Free VS Code Extensions for Developers in 2026

Let’s be real: your editor is your command center. A few good extensions can save you hours a week, catch bugs before they hit prod, and make your code actually enjoyable to read. In 2026, VS Code is still the go-to editor for most of us — but with over 40,000 extensions, most are noise. Here are the free ones I actually use every day, and why they’re worth the install.

1. Prettier + EditorConfig: Enforce Consistency (No Arguments)

If your team still argues about semicolons or trailing commas, you’re wasting time. Prettier fixes that.

Install:

# In VS Code Extensions: search "Prettier - Code formatter"
Enter fullscreen mode Exit fullscreen mode

Then, add a .prettierrc:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
}
Enter fullscreen mode Exit fullscreen mode

And .editorconfig for cross-editor consistency:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Enter fullscreen mode Exit fullscreen mode

Enable format-on-save:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Enter fullscreen mode Exit fullscreen mode

Now your code looks the same whether you use VS Code, Vim, or Notepad++ (please don’t use Notepad++).

2. ESLint: Catch Bugs Before Runtime

Prettier handles style. ESLint catches real issues — like unused variables, bad practices, or potential null refs.

Install:

npm install eslint --save-dev
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

Then install the VS Code extension: "ESLint" by Microsoft.

Example rule that saved my ass last week:

// .eslintrc.js
module.exports = {
  rules: {
    "no-unused-vars": "error",
    "eqeqeq": "error",
    "no-implicit-globals": "error"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now when I typo a variable name or forget const, VS Code underlines it before I run the code. That’s the kind of instant feedback that prevents 3 a.m. debugging.

3. Error Lens: Stop Hunting for Red Squiggles

By default, VS Code shows error squiggles but you still have to hover or go to Problems tab. Error Lens inlines the error message right below the line.

No more:

“Wait, what’s wrong with this line? Hover… wait… hover again…”

Now it shows:

const user = getUser();  // ❌ 'getUser' is not defined
Enter fullscreen mode Exit fullscreen mode

It’s small, but it cuts context switching. Install it and forget it — your eyes will thank you.

4. GitLens: Git Without Leaving the Editor

You’re reading code and wondering: Who wrote this? When? Why?

GitLens answers that without git blame in terminal.

Right-click any line → “Open Line in Remote” or “Show Commit Details”. See the commit message, author, date — all inline.

Also useful:

  • Compare with HEAD
  • View file history
  • Annotate lines with last commit

It’s not just for blaming teammates (though that’s fun). It’s for understanding context fast.

5. Bracket Pair Colorizer (Built-in Now, But Enable It)

Wait — this is built into VS Code since 2023, but a lot of people don’t know it’s configurable.

Enable in settings.json:

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}
Enter fullscreen mode Exit fullscreen mode

Now deeply nested brackets look like:

if (user && user.profile && user.profile.settings) {
  // Each level has a color: [, {, ( — easy to match
}
Enter fullscreen mode Exit fullscreen mode

If you’re working with React, JSON, or deeply nested logic, this is non-negotiable.

6. TODO Highlight: Don’t Lose Track of Tech Debt

You write // TODO: fix this later and then… never do.

TODO Highlight makes those stand out — with colors, squiggles, and a sidebar list.

Install: search “TODO Highlight” by “Wayou Liu”

Then configure in settings:

"todo-tree.highlights.defaultHighlight": {
  "type": "text",
  "color": "#FFA500",
  "backgroundColor": "#332200",
  "opacity": 20,
  "fontWeight": "bold"
}
Enter fullscreen mode Exit fullscreen mode

Now every // TODO, // FIXME, or // HACK jumps out. Use it to triage debt weekly.

7. Live Server: Quick Frontend Testing

Still using python -m http.server or npx http-server for static files? Stop.

Live Server by Ritwick Dey launches a local dev server with live reload — one click.

Right-click any HTML file → “Open with Live Server”. Save a CSS/JS file, and the browser updates.

For quick prototypes, landing pages, or teaching, it’s still the fastest path from code to browser in 2026.

8. **Code Runner: Execute Snippets Instant

☕ Appreciative

Top comments (0)