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
Top comments (8)
Great List, might I add another.....
One extension I use extensively is TODO tree. Highlights the TODo comments. With customizable keywords via settings.
Great for initial impact analysis when you're planning out the changes required without having to re-analyze stuff later on. Also great to mark out certain pieces you plan on doing later.
That sounds interesting, I use comment anchors for this:
Id: ExodiusStudios.comment-anchors
VS Marketplace Link: marketplace.visualstudio.com/items...
Thanks for sharing, James! These are great extensions.
Might I suggest Better Comments for tracking your thoughts or picking back up on your thoughts, when returning to a project.
marketplace.visualstudio.com/items...
ooo I like it! Thanks for sending this my way!
Auto- rename tags is native on vscode now
Git-Rename sounds awesome, I didn't even know git could track "renamed" files.
If you're using Docker and don't like keeping Docker Desktop open, this extension gives you a nice interface in VSCode:
marketplace.visualstudio.com/items...
I have that one too! Although, I keep forgetting to use it lol
I do use most of them, In addition to that if I may add,
When working on HTML of any HTML-related frameworks(ReactJS, Svelte, etc.)
'Wrap It': It wraps your code inside a tag of your choice.
Wrap-It