On this page:
  • Importance and Advantages of Using VSCode Extensions 
  • 10 VSCode Extensions You Should Know 

What Are VSCode Extensions? 

VSCode Extensions are plug-ins developed by the community to enhance the functionality of Visual Studio Code (VSCode). VSCode is a popular code editor that supports a wide range of programming languages and platforms. Though it’s already a powerful tool in its own right, the real magic lies in its extensibility. VSCode Extensions can transform the editor into a full-fledged integrated development environment (IDE), improve its aesthetics, enhance code navigation, provide language support, boost productivity, and more.

These extensions can be as simple as a color theme or icon pack, or as complex as a Python debugger or a JavaScript linter. They are easy to install, manage, and update, making them an integral part of the VSCode experience.

The beauty of VSCode Extensions is that they are open source. This means anyone can create an extension and share it with the community. This has resulted in a vibrant ecosystem of extensions, with thousands available for download and use. Whether you’re a web developer, data scientist, or software engineer, there’s likely an extension out there that can make your life easier.

This is part of a series of articles about code collaboration

Importance and Advantages of Using VSCode Extensions 

Here are a few important benefits of VSCode extensions:

  • Extensions can improve productivity by automating repetitive tasks. For instance, some extensions can automatically format your code, highlight syntax errors, or even generate boilerplate code for you.
  • Extensions can add functionality that is missing from the standard version of VSCode. For example, some of the extensions we review below let you run a live version of web applications, execute VSCode on a remote server, and get improved Git functionality.
  • Extensions can make the coding process more enjoyable. Some extensions modify the look and feel of the editor, allowing you to work in an environment that resonates with your aesthetic preferences. Others provide features like music players or mini-games that you can enjoy during your coding breaks. 

Learn more in our detailed guide to VSCode collaboration (coming soon)

Tips from the expert

Omer Rosenbaum
Omer Rosenbaum
CTO & Co-founder at Swimm
1.
Prioritize extensions for stability Avoid too many overlapping or rarely-used extensions; they can slow down VSCode and lead to compatibility issues.
2.
Organize extensions by workspace Use VSCode’s workspace settings to activate extensions per project, keeping your environment focused and efficient for each context.
3.
Configure shortcuts for frequent tasks Many extensions offer custom keybindings; setting shortcuts for common tasks can dramatically improve your workflow.

10 VSCode Extensions You Should Know 

Live Server

Live Server is a VSCode extension that spins up a local development server with a live reload feature for static and dynamic pages. This means you can see your changes in real-time without the need to refresh the browser.

Live Server is easy to use. Once installed, you can launch it by clicking on the Go Live button at the bottom of your VSCode window. Within seconds, your web application will be up and running on a local server.

Live Server can save you a great deal of time, especially when working on front-end development projects. It’s a must-have VSCode extension for every web developer.

Source: Visual Studio

Prettier

Prettier is an opinionated code formatter that enforces a consistent coding style across your entire project. Prettier supports many languages, including JavaScript, TypeScript, HTML, CSS, and JSON.

When you save a file, Prettier automatically formats your code according to predefined rules. This not only ensures that your code is clean and readable but also eliminates the need for arguing about coding styles in team projects.

Prettier is highly configurable. You can tweak its settings to match your personal preferences or your team’s coding standards.

Remote – SSH

Remote – SSH is another fantastic VSCode extension. It allows you to use any remote machine with an SSH server as your development environment. This means you can write, run, and debug code on your local VSCode instance while it’s actually running on a remote server.

Remote – SSH is especially useful for cloud development or when working on large projects that require powerful computing resources. It’s also handy for team collaboration, as you can easily share your development environment with your teammates.

Setting up Remote – SSH might seem a bit complicated at first, but once you get the hang of it, you’ll appreciate the flexibility and power it brings to your development workflow.

Source: Visual Studio

GitLens

GitLens is a VSCode extension that provides improved Git capabilities for VSCode. It allows you to visualize code authorship, navigate and explore Git repositories, gain valuable insights into codebase history, and much more.

With GitLens, you can easily see who changed a line or block of code and why. This can be useful when debugging or trying to understand unfamiliar code. GitLens is highly customizable, letting you adjust its settings to suit your workflow.

Source: Visual Studio

VSCode Icons

VSCode Icons is a VSCode extension that replaces the default icons with a set of more visually appealing icons. It supports a wide range of file types and languages, making it easier to navigate your project and find the file you’re looking for.

VSCode Icons lets you choose from various icon packs, adjust the size and spacing of the icons, and even create your own custom icons. A well-organized workspace can greatly enhance your productivity, and VSCode Icons is a great way to start.

Source: Visual Studio

Markdown All in One

Markdown All in One is a comprehensive VSCode extension for writing and editing Markdown files. It provides a rich set of features, including keyboard shortcuts, automatic preview, table of contents, and much more.

With Markdown All in One, you can write Markdown as efficiently as you write code. It’s an ideal tool for writing documentation, blog posts, or any other content that requires formatting.

Markdown All in One is easy to use and highly customizable, making it a must-have extension for anyone who works with Markdown files.

Source: Visual Studio

TODO Highlight

TODO Highlight is a VSCode extension that helps you keep track of your TODOs and FIXMEs. It highlights these annotations in your code, making them easier to spot and manage.

TODO Highlight allows you to add your own custom keywords and choose the highlight style that best suits your needs. It also provides a list of all your annotations, so you can quickly navigate to them.

By helping you manage your tasks and reminders, TODO Highlight can enhance your productivity and ensure that nothing slips through the cracks.

Source: Visual Studio

Import Cost

Import Cost is a VSCode extension that displays the size of the imported JavaScript package right in the editor. This can be useful for keeping your bundle size in check and improving your application’s performance.

Import Cost is easy to use and requires no configuration. It supports both JavaScript and TypeScript files and can display the size of both the full and the tree-shaken package.

By making it easier to identify and eliminate unnecessary dependencies, Import Cost can help you optimize your code and deliver a faster, more efficient application.

Relative Path

Relative Path is a VSCode extension that helps you quickly insert relative paths into your files. It’s especially useful when working with large projects where files are deeply nested within directories.

Relative Path is easy to use. Just start typing the path or the filename, and the extension will provide you with autocomplete suggestions.

By saving you the hassle of manually typing in long, complex paths, Relative Path can save you a great deal of time and reduce the risk of errors.

Source: Visual Studio

Swimm VSCode Extension

Swimm is a unique tool designed for continuous documentation and smooth onboarding of new team members in a codebase. The Swimm VSCode Extension seamlessly integrates Swimm’s capabilities directly into your VSCode environment, ensuring that your documentation remains synchronized with your code at all times.

Key Features:

  • Generate doc structures with AI and get a head start without worrying about a blank page. Use /generate to add descriptions to code snippets or diagrams within existing docs. 
  • Collaborate & keep docs up to date, including alerts when changes to code affect your docs. 
  • Discover & browse documentation more efficiently. Easily find docs that appear next to relevant code across different repositories, directly in your IDE.
  • Setup documentation discoverability rules, ensuring critical knowledge is visible before making major changes to the team’s codebase.

With Swimm’s VSCode extension, maintaining up-to-date documentation becomes a hassle-free process. Whether you’re an individual developer aiming to keep your codebase clean and well-documented, or a team looking to streamline the onboarding process for new members, Swimm offers a suite of tools to make the process smooth and efficient.

Related content: Read our guide to code collaboration online