Visual Studio Code is one of the most widely used code editor among developers, mainly because of its versatility, speed, and the vast ecosystem of extensions. As a beginner, setting up your editor with the right extensions will make coding much more enjoyable and increase your productivity in coding.
These VS Code extensions can make coding easier. When I first started coding and now also, I used these extensions.
In this post, we're going to explore the 10 vs code extensions that are perfect for new programmers. These tools will be helpful in formatting, debugging, file navigation, and much more. Let's dive in!
Here are the visual studio code extensions we'll discuss:
- Live Server
- Auto Rename Tag
- HTML CSS Support
- Auto Closing Tag
- Prettier
- Gitlens
- CSS Peek
- Live Share
- IntelliSense for CSS class names
- SVG Preview
1. Live Server
Live Server is one of my favorite vscode extensions, this extension will make your life easier. Every time you save your code, your browser will automatically refresh, showing the latest changes.
 |
| vs code extensions |
2. Auto Rename Tag
This extension is useful when working with HTML. If you change a tag name (e.g., <div> to <section>), Auto Rename Tag automatically updates the corresponding closing tag. it will save your time and avoiding errors.
 |
| vs code extensions |
3. HTML CSS Support
It supports CSS within HTML files and gives intelligent suggestions and auto-completion for CSS properties that assist in coding in a faster and more precise way. It provides HTML and CSS code autocompletion, making the coding easier and writing without manual typing easier.
 |
| vs code extensions |
4. Auto Closing Tag
Auto Close Tag automatically adds closing tags in HTML/XML as soon as you type the opening tag. To add close tag manually, use shortcut Alt+. (Command+Alt+. for Mac), or press F1 and then select/type Close Tag
 |
| vs code extensions |
5. Prettier
Prettier is a highly adopted code formatter, and it does help enforce consistent code style in your projects. It supports multiple programming languages and formats your code according to pre-defined rules for improving readability and minimizing style-related conflicts.
 |
| vs code extensions |
6. Gitlens
GitLens is a productive extension that incorporates Git directly into your editor. It highlights who made each change, enables code comparison, and helps you understand version control, these are all musts in collaborative projects.
 |
| vs code extensions |
7. CSS Peek
CSS Peek is a powerful extension that lets you peek into the associated CSS styles right from the HTML or JavaScript code. With a simple mouse hover over a CSS class or ID, CSS Peek reveals the corresponding styles in a peek window without the need to switch between files.
 |
| vs code extensions |
8. Live Share
Live Share allows real-time collaboration with other developers directly in VSCode. It supports shared editing, debugging, and even terminal sessions. This, therefore, allows for proper teamwork and enables smooth pair programming.
 |
| vs code extensions |
9. IntelliSense for CSS class names
It is frustrating to remember and type tricky CSS class names in your HTML. The IntelliSense for CSS class names in HTML extension suggest intelligent and auto-completion with CSS class names. This extension saves you time by autocompleting class names based on your project’s CSS files.
 |
| vs code extensions |
10. SVG Preview
One of the main reasons SVGs are used in so much web development is for the icons, logos, and other illustrations because they're small and scalable. SVG Preview is very useful because it allows you to preview how your SVG image will look right in VSCode. It’s especially useful for beginners to understand SVG syntax and structure.
 |
| vs code extensions |
Conclusion
As a new programmer, equipping your VS Code setup with these extensions can help you code more effectively, reduce errors, and improve your understanding of development practices. So try this vscode extensions.
