Table Of Contents
- 1. Sublime Text Keymap and Settings Importer
- 3. Bracket Pair Colorizer 2
- 4. ESLint
- 5. Project Manager
- 6. Browser Preview
- 7. Prettier
- 8. gitlink
- 9. Better Comments
- 10. VS Code Icons
- 11. Auto Close Tag
- 12. colorize
- 13. Polacode
- 14. GitLens
- 15. Live Server
- 16. Beautify
Microsoft Visual Studio Code (VS Code) is one of the top code editors for software developers. Since its release, its popularity has surged not only because of the stable platform it provides, but also because of the extensible nature that Microsoft built into it. The extensions marketplace is a cornucopia of add-ons and features that allows developers to customize VS Code into the development environment of their dreams. We want to break down some of the top VS Code extensions available today so that you don’t miss any.
1. Sublime Text Keymap and Settings Importer
Topping our list is the aptly titled Sublime Text Keymap and Settings Importer. In case the title weren’t descriptive enough, this extension lets you pull in your existing Sublime Text keymaps and settings so that you can seamlessly transition into using VS Code as your default. Since so many people love Sublime and have spent years at it, making VS Code keep the earned muscle memory from that editor makes a lot of sense.
3. Bracket Pair Colorizer 2
Regardless of the language you code, brackets are probably going to be a major part of it. And keeping them straight can be a headache. But with this VS Code extension, you can color code the matching pairs to help ease that pain point and work on the making the code itself work — not the editor.
5. Project Manager
An issue with VS Code that arises pretty often is how to swap between different projects. By default, the flow is not exactly the most intuitive. So Project Manager works to fix that issue by giving you a menu in the sidebar that you can use to save different folders and Git projects to easily swap between. This isn’t so much an editor improvement as it is a quality-of-life bump.
6. Browser Preview
One of the more obnoxious elements of web development is loading and refreshing your content in different browsers for testing. Browser Preview helps limit the amount you need to do this by giving you a solid preview of your work inside VS Code itself in a new Chrome process.
We all want prettier code. So we should probably all install Prettier to handle that for us. The description describes Prettier as an “opinionated code formatter, it enforces a consistent style by parsing your code and re-printing it with its own rules that take maximum line length into account, wrapping code when necessary.” You might not want to use it for every language or project, so there are plenty of configurations settings so you can customize it to your liking.
We like gitlink because of its simplicity. While there are plenty of Git extensions out there, one of the things about gitlink is that it’s simple and does just one thing. And it does it well. Just highlight a snippet of code, and gitlink will then take you to the online repo for that particular snippet. It is incredibly useful to quickly Go To your repo no matter where it’s hosted remotely.
9. Better Comments
Commenting your code is one of the most important habits a developer can have. Even more than that, commenting your code well is a skill that should be taught in every computer science classroom and coding bootcamp out there. That said, Better Comments is one of those VS Code Extensions that everyone needs because it will, if you believe the name, let you leave better comments in your code. With shortcuts that let you differentiate between questions, exclamations, commented-out code, queries, alerts, highlights, and TODOs, this extension will not only make your life easier, it will make your team’s life easier. And any developer who comes after you on the project. We cannot recommend this enough.
10. VS Code Icons
A major part of customizing VS Code with extensions is actual customization. Not just functionality changes. With VS Code Icons, the editor becomes a bit more colorful and easier to navigate. The file system is skinned with icons representing various file types, and these show up in the explorer as well as the document tabs themselves. It makes working your way through complicated file systems much easier and less of a headache. Literally sometimes. The icons being so easy to read prevents eyestrain and thus headaches. So for your health, install VS Code Icons.
11. Auto Close Tag
Maybe it’s us, but typing in the closing tags for any language becomes such a chore. There’s just something about adding that / in on the end that makes the keystrokes just feel a little off. Never fear. Auto Close Tag has made our lives easier. So we want to make yours easier. It’s simple and easy and you can keep typing between them and simply keystroke your way to the next line or to the end of that one. Install this and give your fingers a break from the gymnastics of closing tags manually.
CSS is great. Choosing colors in CSS is not. When you’re dealing with hex codes and RGBA values, it’s sometimes hard to get a mental picture of just what palette you’ve set for a site. This extension helps alleviate that by providing a visual note for any color codes you use inside your files. You can see the colors that you’re using inside the text itself as a highlight so that you don’t have to constantly be swapping back and forth from swatches and color selectors and so on.
Polacode is like a Polaroid camera for your code editor. Designed to make snapshotting your code cleaner and easier, this is a must for any tutorial writers who want their code to be just right.
It’s hard to really fully explicate what makes GitLens so great. It works as though Git and VS Code were designed with each other in mind, and instead of working through command line hierarchies, you get visualizations and insights that take a lot of the confusion out of team Git work. You can view things via hover, see recent changes and annotations, comparison views within VS Code itself, heatmaps, line history, and so much more. It’s basically the perfect Git extension, and we think you should install it pronto.
15. Live Server
Have you ever wanted to launch a local dev server from within your IDE and work on it in real-time? No matter how you answered that question, you will want to give Live Server a shot. Because that’s precisely what you can do with it. While it might not completely remove the need for products like Local by Flywheel and MAMP, it certainly cuts down on their necessity in many situations.
This list could be thousands of items long. In fact, there are probably some of you who have hundreds of different extensions installed that you enable and disable at different times. But we feel like these are the VS Code extensions that you can install and then learn what else you want as you dig deeper into the marketplace.
What are your go-to VS Code extensions? Let us know in the comments!
Article featured image by SVIATLANA SHEINA / shutterstock.com