The Research Nest
Published in

The Research Nest

5 must-have VS Code Extensions for Developers

Photo by Mohammad Rahmani on Unsplash

Visual Studio Code is one of the most popular code editors out there. Extensions for your IDE are important for speeding up work without sacrificing quality. Here is our pick of the top five VSCode plugins that can help you become a productive developer.

1. Prettier

JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, JSON, GraphQL, Markdown, including GFM and MDX, and YAML, are all supported by Prettier. It eliminates all of the original styling and guarantees that every outputted code has the same look and feel. Prettier takes your code and reprints it from the beginning, taking into consideration the line length. It enforces a consistent code style (i.e. code formatting that won’t affect the AST) across your entire codebase.

Prettier can speed up the onboarding process for experienced engineers who previously used a different coding style, as well as developers who come from a different programming language. Because creating and maintaining a coding style is such a large job, it frequently falls through the cracks, leaving you working on uneven codebases. Prettier is a quick gain in this scenario; the codebase is now unified and simpler to understand in a short amount of time. Prettier currently has 16 million+ installs with a 3.5-star rating with excellent reviews from its existing userbase.

2. Live Server

When you make a modification to your code or create anything new, you usually have to manually reload the website to view the changes. To put it another way, if you modify 100 lines of code per day, you’ll need to reload your browser 100 times. The live-server extension, on the other hand, takes care of this for you. After you’ve installed it, you’ll be able to run automatic localhost in your browser, which you can start with a single button. The browser will auto-refresh itself after you make changes to your code or create something new and save it. You’ll be able to observe the changes instantly and automatically after that. It has around 16 million+ installs and has a rating of 4.5 stars.

3. Git Lens

Gitlens is a free open-source addon for Visual Studio Code that has been downloaded over 71 million times. Eric Amodio founded GitLens in 2016, and it was almost entirely developed and managed by him in his spare time until October 2021, when he joined GitKraken as Chief Technology Officer.

GitLens enhances the built-in Git features in Visual Studio Code. It allows you to see code authorship at a glance using Git blame annotations and code lens, access and explore Git repositories with ease, and obtain useful insights using sophisticated comparison tools, among other things.

Here are just a few of GitLens’ features:

  • Simple revision navigation (backward and forward) across a file’s history
  • A current line blame annotation at the end of the line to show the commit and author who last modified the line, with more detailed blame information accessible on hover.
  • A blame annotation in the status bar to show the commit and author who last edited the current line.

4. Docker

The Docker addon for Visual Studio Code makes it simple to create, manage, and deploy containerized applications. It also allows you to debug Node.js, Python, and.NET Core in a container with a single click. It has over 11 million downloads and a 4.5-star rating.

Containers are small virtualized environments, similar to virtual machines (VMs), that provide a framework for developing and executing software without the expense and footprint of a full operating system. Docker is a third-party container provider and container management system that is widely used in the industry. Docker Desktop is a desktop application that maintains your local containers. Extensions for development tools like Visual Studio and VS Code enable you to interact with a locally installed Docker Desktop service to create containerized programs, deploy apps to containers, and debug apps running in containers.

5. Debugger for Chrome

From the beginning of Visual Studio Code, the major goal has been to make developers’ everyday workflows easier by allowing them to debug their code right from the editor. It all started with.NET and Node.js debugging, and today most developers use Chrome Debugger for Visual Studio Code as the next step.

Front-end developers use Chrome Debugger to debug client-side JavaScript code running in Google Chrome directly from Visual Studio Code.

Debugger connects to Chrome using the Chrome Debugger protocol, mapping files loaded in the browser to files open in Visual Studio Code. This means that while debugging, developers can now create breakpoints right in their source code, set up variables to watch, and examine the whole call stack without leaving the editor. For the time being, Chrome must be started with remote debugging enabled, and only one connection may be made at a time. This implies that if you open DevTools in Chrome, Chrome will close the connection to VS Code. This is a minor annoyance, and we expect that the problem will be resolved shortly. It currently has 8 million+ installs with a 4-Star rating.

We explored just the tip of the iceberg. Do let us know about your favorite extension in the comments!

Editorial Note:

This article was authored by Kanika Garg from our technical content team.

If you wish to contribute to our blog as a technical writing intern or an independent contributor/guest blogger, do reach out to us at the.research.nest@gmail.com

For more details on guest blogging, visit-

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store