VS Code Extensions Every Developer Should Know

Developed by Microsoft and released eight years ago, Visual Studio Code (VS Code) is the widest-used source-code editor. Its great features have made it the number one choice of many who enjoy intelligent code completion, snippet generation, code refactoring, and syntax highlighting.

According to the 2021 Stack Overflow Developer Survey, VS Code is the most popular development environment among developers, with 73.1% of respondents using it. Its popularity can be attributed to its wide range of features, including built-in debugging, git integration, and support for multiple programming languages, as well as its active development community. But it’s the array of extensions and plugins available in VS Code that brings me here.

One of the biggest strengths of Visual Studio Code (VS Code) is its extensibility. VS Code allows developers to customize and extend the editor's functionality in so many cool ways. From adding new features and integrating with external tools and services to enhancing the development experience in many ways.

And the best part?

There are thousands of extensions available in the VS Code ecosystem, touching almost every situation you could think of. Today, I’ll focus on just 3 classes of extensions: productivity, debugging, and language support.

Productivity

Doing more with less and optimizing for efficiency is a big part of technology, it wouldn’t make sense if the development process were any different. Here are some tools that are likely to boost your output.

• GitLens is a powerful extension for Visual Studio Code that enhances the functionality of Git. It provides a wealth of features that allow developers to easily track code changes, view commit history, and analyse code authorship. Additionally, it allows for efficient collaboration and code review among team members.

  
  

• Live Share is an extension for Visual Studio Code that enables real-time collaborative coding and debugging. It allows multiple developers to simultaneously edit code, debug in real-time, and share their terminal sessions with each other. Live Share enhances collaboration and makes it easier for remote teams to work together seamlessly.

  
  

• Prettier is a powerful extension for Visual Studio Code that makes code formatting easy and consistent. It supports multiple languages and automatically formats code based on a set of rules. Prettier saves developers time and effort, eliminates debates over formatting, and improves code readability and maintainability.

  
  

• Emmet is an extension for Visual Studio Code that simplifies HTML and CSS coding. It allows developers to write code using abbreviations and then expands them into full HTML and CSS code. This saves time and reduces errors while increasing productivity and consistency.

  
  

• GitHub Copilot is an AI-powered extension for Visual Studio Code that suggests code as developers write. It uses machine learning to learn from existing code and provides contextual recommendations to improve efficiency and productivity. Copilot can save developers time and enhance the development process by providing more accurate and relevant code suggestions.

  
  

• Code Snap is an extension for Visual Studio Code that captures screenshots of code and converts them to image files. It supports multiple file formats and provides a customizable interface for capturing screenshots. Code Snap makes it easy to share code snippets and improves communication among team members.

  
  

• TabNine is an AI-powered extension for Visual Studio Code that provides predictive text and code completion suggestions as you type. It learns from your codebase and supports multiple programming languages, allowing developers to write code faster and with fewer errors. TabNine improves efficiency and enhances the development experience.

  
  

• Auto Rename Tag is an extension for Visual Studio Code that automatically renames paired HTML/XML tags as you type. This saves developers time and reduces errors when working with complex code. Auto Rename Tag enhances productivity and simplifies the development process.

  
  

• Import Cost is an extension for Visual Studio Code that displays the size of an imported package as you type. It supports multiple package managers and provides real-time feedback on package sizes, allowing developers to optimize their code and minimize file size. Import Cost enhances performance and helps developers avoid unnecessary dependencies.

  
  

• VSCode-icons is an extension for Visual Studio Code that adds icons to file and folder names, making it easier to identify them at a glance. It supports many different file types and themes, allowing developers to customize their workspace. VSCode-icons improves productivity and adds a touch of personalization to the editor.

  
  

• REST Client is an extension for Visual Studio Code that enables developers to send HTTP requests and view responses directly within the editor. It supports multiple HTTP methods and response formats, making it easy to test and debug APIs. REST Client improves efficiency and simplifies the API testing process.

  
  

• Regex Previewer is an extension for Visual Studio Code that simplifies regular expression (regex) creation. It provides real-time previews of regex matches, highlights errors, and provides detailed explanations of the regex syntax. This extension saves time and increases accuracy when creating complex regex patterns.

Debugging

In addition to the built-in debugging extensions available in VS Code, there are also many external debugging extensions that can be installed to extend the debugging capabilities of the editor. But why debug in the code base, you might ask?

Debugging involves setting breakpoints in the code and examining its behavior at various points during execution. This approach can be very powerful, as it allows developers to see exactly what is happening in the code and can help us quickly identify and fix bugs.

Additionally, debugging in the code base can be done regardless of the browser or other environment in which the code is running, which can be helpful if the problem is not related to the browser itself.

Language Support

VS Code provides language support for many programming languages out-of-the-box, but there are also many language support extensions available in the VS Code Marketplace that provide additional functionality for specific programming languages. Most mainstream languages have a language support extension that incorporates your usual features like snippets.

Conclusion

I can’t imagine looking at VS Code's extensibility and choosing any other editor. Hence why its popularity among developers is no surprise. The ability to customize and extend the editor to suit specific needs and workflows is a major advantage that has made VS Code the preferred choice for many. Honestly, it’d be too difficult to explain how much stress some of these tools have saved me. It’s a lot easier to just imagine how difficult life would be if it didn’t exist. From newbs to seasoned pros, we can’t live without these extensions, whether it’s for language-specific helper tools or to aid your debugging. Even just for reducing the share number of keystrokes needed to complete a task, your keys will thank you ;)

I’m always looking for more extensions to make my life easier so I’d love to hear your favourite extensions in the comments.