15 VSCode extensions you need to know
Extensions can help you to structure code better and to program more efficiently and faster.
Visual Studio Code is a free source code editor from Microsoft and is very popular among developers especially web developers.
I have installed a lot of extensions, but now I would like to present my top 15.
1. Prettier
Consistent formatting of code is a challenge, but modern development tools like Prettier allow you to automatically ensure consistency across your team’s codebase.
2. Auto Close Tag
Tired of closing HTML tags manually? The extension “Auto Close Tag” closes the tags automatically and you can save a lot of time.
3. Auto Rename Tag
When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.
4. IntelliCode
The IntelliCode extension for Visual Studio Code provides AI-powered IntelliSense suggestions. IntelliSense uses AI to predict the API a developer is most likely to want to use, rather than just presenting an alphabetical list of members. It uses the developer’s current code context and patterns to provide this dynamic list.
5. GitLens
GitLens supercharges the Git capabilities of Visual Studio Code.
This is a powerful extension that allows you to see who, why, and how lines of code have changed over time.
6. ESLint
ESLint supports you and teams to follow a common code style in your project.
7. Live Server
This extension allows you to launch a development local server by a single click and watch live changes with some extra functionality.
Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes. The live-server extension, automates this for you.
8. Live Share
It doesn’t matter what kind of app you’re creating, what language you’re programming in, or what operating system you’re working on: With Live Share, you can conveniently share your project with your teammates instantly using your own tools. You don’t need to clone a repository or set up the environment when you want to share something.
I have used it several times and am very satisfied with it, and I am not aware of any connection problems.
9. Bookmarks
You can set bookmarks in different files of your project and then see them if you press the “bookmark” icon in the sidebar. It helps you to navigate in your code, moving between important positions easily and quickly.
10. Better Comments
I like to work with comments. With “Better Comments” you can specify more what this comment should say, if it is a TODO, a question or an important info.
11. Color Highlight
If you work a lot with CSS I can recommend Color Highlight, so you always see which color you used. without having to translate the RGB or HEX code.
12. Color Info
In addition to the Color Highlight mentioned above, Color Info provides quick information about css colors.
13. Material Icon Theme
If you don’t like the default icon theme, I recommend you the material icon theme.
14. Path Intellisense
A plugin that automatically completes pathnames. For example, if you set an image path in HTML, this is the perfect extension so you don’t mistype.
15. Error Lens
I’m a big fan of this extension as info, warnings and errors are immediately displayed next to the code itself.
I hope I could introduce someone to new useful extensions. There are many more, of course, and many are specific to different programming languages.
What are your favorite extensions to use?
Kind Regards
Sebastian