DEV Community

Alex Spinov
Alex Spinov

Posted on

11 VS Code Extensions I Wish I'd Installed Sooner

#vscode #productivity #webdev #beginners

I've been using VS Code for 4 years. I found most of these in the last 6 months.

1. Error Lens

Shows errors and warnings INLINE next to the code. No more hovering over red squiggles.

ext install usernamehw.errorlens
Enter fullscreen mode Exit fullscreen mode

Why I wish I knew sooner: I spent years hovering over every underline. Error Lens shows the message right there.

2. GitLens

See who changed each line and when. Blame annotations, file history, commit search.

ext install eamodio.gitlens
Enter fullscreen mode Exit fullscreen mode

3. Thunder Client

REST API client inside VS Code. Like Postman but without leaving your editor.

ext install rangav.vscode-thunder-client
Enter fullscreen mode Exit fullscreen mode

4. REST Client

Send HTTP requests from .http files. Commit them to git. Share with team.

### Get users
GET https://jsonplaceholder.typicode.com/users

### Create user
POST https://jsonplaceholder.typicode.com/users
Content-Type: application/json

{"name": "Alex", "email": "alex@example.com"}
Enter fullscreen mode Exit fullscreen mode

5. Pretty TypeScript Errors

Transforms TypeScript's cryptic error messages into readable, formatted output.

ext install yoavbls.pretty-ts-errors
Enter fullscreen mode Exit fullscreen mode

6. Todo Tree

Finds all TODO, FIXME, HACK comments and shows them in a tree view.

ext install Gruntfuggly.todo-tree
Enter fullscreen mode Exit fullscreen mode

7. Path Intellisense

Autocompletes file paths as you type. Works with imports, require, and file references.

ext install christian-kohler.path-intellisense
Enter fullscreen mode Exit fullscreen mode

8. indent-rainbow

Colors each indentation level differently. Spot nesting errors instantly.

ext install oderwat.indent-rainbow
Enter fullscreen mode Exit fullscreen mode

9. Code Spell Checker

Catches typos in your code AND comments. Supports camelCase.

ext install streetsidesoftware.code-spell-checker
Enter fullscreen mode Exit fullscreen mode

Why developers need this: Variable named reuslt instead of result? This catches it.

10. Auto Rename Tag

Rename an HTML opening tag and the closing tag updates automatically.

ext install formulahendry.auto-rename-tag
Enter fullscreen mode Exit fullscreen mode

11. Better Comments

Colors your comments by type: alerts, queries, TODOs, highlights.

// * Important info
// ! Deprecated warning
// ? Question
// TODO: Remember to fix this
Enter fullscreen mode Exit fullscreen mode

Install all at once 

code --install-extension usernamehw.errorlens
code --install-extension eamodio.gitlens
code --install-extension rangav.vscode-thunder-client
code --install-extension humao.rest-client
code --install-extension yoavbls.pretty-ts-errors
code --install-extension Gruntfuggly.todo-tree
code --install-extension christian-kohler.path-intellisense
code --install-extension oderwat.indent-rainbow
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension formulahendry.auto-rename-tag
code --install-extension aaron-bond.better-comments
Enter fullscreen mode Exit fullscreen mode

What VS Code extension changed your workflow? Always looking for hidden gems.

Follow me for developer productivity content. I build automation tools and write about coding daily.

More from me: 10 Dev Tools I Use Daily | 77 Scrapers on a Schedule | 150+ Free APIs

Top comments (0)