Most of you reading this probably use VSCode extensions on a daily basis. Whether it's to lint code, show suggestions, type inference, or something to make you laugh, they impact your workflow and help you build products.

Below is a list of extensions that I use daily. It's safe to say I would be totally lost without them and my estimates on tickets would inflate.

I hope these help you as much as they've helped me!

Auto Rename Tag

Starting off this list is the Auto Rename Tag extension. This extension is super useful if you work with a lot of HTML. The general gist of it is it'll format the closing tag of the tag you're editing to be the same name so you don't have to. This saves me a lot of time when I'm working on legacy sites that have *.html files with tags that wrap 100+ other tags.

Id: formulahendry.auto-rename-tag
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Code Spell Checker

This one is really helpful if you work with international teams or you want to document words or abbreviations within a project.

Code Spell Checker allows you to fix misspelled words or save them to the project's settings.json file. This shows intention which is huge for onboarding new developers who might not be familiar with the business phrases of the application.

Id: streetsidesoftware.code-spell-checker
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

EditorConfig

EditorConfig is ESSENTIAL for my team and me. It helps us keep our code editors in sync and reduce diff logs when making pull requests by establishing a formatting standard.

Id: EditorConfig.EditorConfig
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Eslint & Prettier

If you've been in the webdev world for a short period of time, you've probably came across these two. I won't go into too much detail here but in short, Eslint is a linter, Prettier is a formatter. You can use them together to enforce a code standard in your projects.

Id: dbaeumer.vscode-eslint
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Id: esbenp.prettier-vscode
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Git-Rename

Git-Rename is very useful if you want to rename a file or change the casing in a filename. Instead of deleting a file to remove it from your Git history so you can change its casing, Git-Rename lets you rename your file and helps you track those changes in Git.

What?

Say you have a file called "myfile" in your project and it's already tracked by version control. If you change the name to "myFile" that's just a casing change and Git won't care about it by default. You can change your git settings to fix this but if you're working in a team, you'll need to convince your fellow devs to do the same. An easier option would be to include this extension in your extensions.json file in your project so they get prompted every time they open the project that they should download the extension.

Id: ambooth.git-rename
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ambooth.git-rename

Import Cost

Import cost lets you know how many bytes each of your imported packages are. It's super useful for mobile apps where your bundle size means a lot to your end users.

Id: wix.vscode-import-cost
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

IntelliCode

Another great extension for TypeScript and JavaScript. IntelliCode works as that annoying friend who tries to finish your sentences. It provides method/object completion for the TS version it finds in your project and infers types for you, letting you know which properties on an object you can use.

For you Django fans, it works for Python too!

Id: VisualStudioExptTeam.vscodeintellicode
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

Pretty Typescript Errors

This one isn't for everyone but I write a lot of TypeScript and it helps me parse out TS errors. Basically, instead of TypeScript giving you a long and semi-convoluted message, this extension will display a more human-friendly message to help you narrow down what you're doing wrong in your code.

Id: yoavbls.pretty-ts-errors
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Do you use any of these extensions? Do you have a suggestion for extensions that work better than these? Let me know in the comments below!

Cover image created by GioeleFazzeri