- Debugger for chrome https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Chrome has features built in that make debugging a much better experience. This extension gives you all (or close to all) of those debugging features right inside of VS Code!
Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!
Need a quick place to test out some JavaScript? I used to open up the console in Chrome and type some code right there, but there were many downsides. Quokka gives you a JavaScript (and TypeScript) scratchpad in VS Code. This means you can test out a piece of code right there in your favorite editor!
- Path Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
In large projects, remembering specific file names and the directories your files are in can get tricky. This extension will provide you intellisense for just that. As you start typing a path in quotations, you will get intellisense for directories and file names. This will save you from spending a lot of time in the file explorer :)
One thing I hate is switching between projects in VS Code. Every time I have to open the file explorer and find the project on my computer. But that changes with Project Manager. With this extension, you get an extra menu in your side menu for your projects. You can quickly switch between projects, save favorites, or auto-detect projects Git projects from your file system.
Editor Config is a standard of a handlful of coding styles that are respected across major text editors/IDEs. Here's how it works. You save a config file in your repository which your editor respects. In this case, you have to add an extension to VS Code for it to respect these config files. Super easy to setup and works great on team projects.
-
Git Lens https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
-
Prettier https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
DONT spend time formatting your code...just DONT. There's no need to. Ealier, I mentioned ESLint which provides formatting and linting. If you don't need the linting part, then go with Prettier. It's super easy to setup and can be configured to formatted your code automatically on save.
This extension color codes various types of comments to give them different significance and stand out from the rest of your code. I use this ALL THE TIME for todo comments. It's hard to ignore a big orange comment telling me I've got some unfinished work to do.
If you've ever wanted to view a file that you're working on in Github, this extension is for you. After installing, just right-click in your file and you'll see the option to open it in Github. This is great for checking history, branch versions, etc. if you're not using the Git Lens extension.
Developers, myself included, spend a lot of time customizing their dev environment, especially their text editors. With the Settings Sync extension, you can save your setting off in Github. Then, you can load them to any new version of VS Code with one command. Don't get caught without your amazing setup ever again!
If you're the kind of person who loves perfect alignment in your code, you need to get Better Align. You can align multiple variable declarations, trailing comments, sections of code, etc. There's no better way to get a feel for how amazing this extension is than installing it and giving it a try!