Visual Studio Code continues to be the most popular IDE for modern web development due to its wealth of features, but the best thing about VS Code is that it’s open source, which makes it highly extensible. It is supported by a large community of developers, companies, and contributors who continuously add new features and utilities to enhance its capabilities through a plethora of extensions, which are available through VS Code Extension Marketplace. If you find the number of extensions available to be overwhelming, though, read on. This guide will go through fifteen of the best VS Code extensions that every developer should have installed in their dev environment.
Why Do You Need VS Code Extensions?
Although VS Code is already a robust code editor, extensions allow you to customize it with features that better suit your needs and help increase your productivity.
Extensions can help you properly format code, make debugging easier, improve readability and accessibility, and generate snapshots of code snippets, among other tasks. There are extensions for basically anything and everything. Simply put, these must-have extensions for VS Code give you superpowers.
What Types of Extensions Are Included?
This article will focus on the following types of extensions:
- Formatters
- Auto-completion tools
- Snippet managers
- Code tracking tools
- Spell checkers
- Time management tools
- Collaboration tools
- General productivity tools
1. Colorize
When you’re working with colors in your stylesheet, it can be frustrating to write the color code or name without seeing what the color looks like.
The Colorize VS Code extension fixes this problem by highlighting the text’s background with the exact color as it would be rendered in your application.
2. CSS Peek
CSS Peek allows you to expand your HTML and EJS files to display CSS/SCSS/LESS code within the original HTML code and to jump quickly to the right CSS code if you know the CSS class name or ID.
This is especially helpful when you want to make quick edits to your CSS from your current source file without having to jump to the actual CSS file, or if you want to look at the current style associated with a class or an ID.
3. Tabnine
Tabnine is a deep learning AI-based extension that uses machine learning to auto-complete your code. This extension supports all the popular languages and provides relevant hints.
Tabnine's VS Code auto complete is powered by a machine learning model that was trained on open source GitHub code.
4. Pieces for Developers
The daily routine of any software developer usually involves writing a lot of code. Along with that comes the mundane task of having to write the same lines of code over and over again.
Pieces for Developers is an advanced snippet manager, code completer, and so much more that provides a fast way to save and reuse code snippets without having to break your workflow or leave your workspace. It supports all of the popular programming languages and integrates with other platforms to make saving and accessing snippets a breeze.
By storing code snippets that can be accessed anywhere and anytime, Pieces is one of the most essential VS Code productivity extensions. You won’t have to focus on rewriting the same code twice.
5. Prettier
Prettier is a VS Code auto formatter that fixes sloppy coding structure. It parses your code and adds proper formatting rules, including wrapping and indenting code when necessary, and enforces a consistent style so that it’s easier to read.
When it comes to formatting your code and maintaining style consistency, no extension does it better than Prettier.
6. Live Server
With over 32 million installations, Live Server is one of the most popular extensions available on the VS Code marketplace. It allows you to launch a local development server with live reload functionality for developing both static and dynamic web pages.
In addition to allowing you to test your code, it enables remote connections, Chrome debugging, and handy hotkeys for starting and stopping the server, thereby turning your VS Code editor into a full-fledged IDE.
7. Auto Rename Tag
As the name suggests, Auto Rename Tag automates renaming or modifying HTML/XML tags by reflecting whatever changes are made to the opening tag in the corresponding closing tag.
With this extension, you won’t have to go through the hassle of searching for the corresponding closing tag of an element when you make changes to the opening tag.
8. Live Share
Live Share is a collaborative tool that lets you collaborate with others in real time to edit and debug code, regardless of the programming language you’re using. In this age of remote work, Live Share makes Visual Studio Code pair programming and debugging immediate, easy, and accessible.
The process is simple. You create a session and send the link to colleagues so that they can join your session. When they do, they get a copy of your environment and code in their editor without installing anything.
9. Peacock
Peacock allows you to assign different colors to different instances of your VS Code workspace.
With this extension, you can easily identify your editor when you have multiple VS Code instances or when you’re using VS Live Share or VS Code’s remote features.
10. WakaTime
WakaTime helps you keep track of the time you spend on each project. It automatically generates dashboard metrics and insights on your coding activity and provides you with weekly and monthly reports as well.
WakaTime is smart enough to know when you are actually coding — it doesn’t just track time spent in your editor; it also supports cross-platform integration like direct integration to GitHub.
WakaTime comes in handy when you want to know how much time you spend coding on a project. This is especially important when freelancing, so you can more accurately charge your clients based on the time you worked.
11. GitLens
GitLens is an open source extension that helps you better understand changes made to your code. It supercharges the current VS Code Git extension functionalities with the ability to perform side-by-side code comparisons with your previous commits and changes, along with other features.
You can explore the history of a codebase to gain a better understanding of its evolution and find out when and why a line or code block was altered.
12. Code Spell Checker
Everyone makes typos at some point, then spends precious time looking for them. Code Spell Checker checks your code for typos and spelling mistakes before they become problematic in your workflow.
As you type comments, variables, strings, and plain text, the extension highlights common spelling errors. It also works well with CamelCase.
13. Bookmarks
As the name suggests, Bookmarks helps you mark and name specific positions or sections in your code for easy navigation. It also offers dedicated sidebar and selection commands, which allow you to select lines and regions between lines that have been bookmarked. It’s really useful for log file analysis.
14. Better Comments
Have you ever wanted something more powerful than the default comments in VS Code? Better Comments helps you write more readable, human-friendly comments by allowing you to highlight comments based on types of annotations.
Each annotation type has a different color for different purposes, making comments more instantly readable and easy to organize. Types supported include alerts, queries, to-dos, and highlights. Additionally, you can customize highlighting based on the comments that you may need for other things.
15. JavaScript (ES6) Code Snippets
With JavaScript (ES6) code snippets, you can reduce the time you spend repeatedly typing the same code and instead focus on the real work at hand.
This extension comes with a multitude of helpful code snippets for JavaScript ES6 syntax, which you can basically use as code shortcuts. When triggered, the snippet simply replaces the text and inserts it directly into the document. For example, typing “clg” would quickly yield console.log().
Conclusion
The most valuable thing about using Visual Studio Code may be the wide variety of extensions available from the large, supportive VS Code community. This guide introduced you to the fifteen best Visual Studio Code extensions to incorporate into your workflows. Using these extensions can boost your programming productivity and help you become a better developer.
In all cases, these extensions should only take a few minutes to install and run. Considering what they can do for your projects, that time will be well spent.
