[Participant@aruorihwo]

One of the many outstanding features of Visual Studio Code is the fact that it is easy to customize, especially with the numerous extensions available in its market place. It doesn’t matter if you are a beginner or an expert, using Visual Studio is made easy with the extensions available. We would be taking a look at 5 of them in this post.

1. Live Server

Live Server enables developers to test their static and dynamic pages on a local development server. You can configure the extension to reload your page as soon as you make changes and save your work.

Features of Live Server:

• Start and stop server with a single click
• Customizable Port Number, Server Root, default browser.
• Customizable Supporting Tag for Live Reload feature
• Support for any browser using advance Command-Line.
• Use a preferable hostname (localhost or 127.0.0.1).
• Hot Key control.
• SVG Support

To Download Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.

2. Quokka

Quokka acts as a scratchpad for JavaScript and typescript. You can quickly test your code right on visual studio. It is a lightweight extension that greatly improves your workflow. Quokka checks your codes in real-time and lets you know which block has been executed and which hasn’t, it saves developers time on code checks.

Features of Quokka:

• It has enough documentation to make it easy for developers to start-up use from the get-go.
• Developers do not need to set up any custom configuration in order to use it.
• Each result has a specific color, which makes it easy for the developer to understand their workflow.

To download extension: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

3.Gitlens

If you rely a lot on Git, you should definitely give this plugin a try. It is an open-source extension that makes contributing to third-party projects much easier. It enables developers to search through a commit history, you can search by author files, commit messages and more. Gitlens also has a heat lens feature which enables developers to know which area of a given file most of the work is taking place.

Features of GitLens:

• The sidebar provides valuable insights on projects and makes navigation exploration and visualization much easier.
• Developers can easily move between sets of settings with the use of custom modes.
• The current line blame annotation feature provides a great way to remember code authorship.

To download extension: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

4. Prettier

If you are a frontend developer, then this may be one of the best extensions for you. It allows developers to format their codes in a structured way, it is an opinionated code formatter. It allows developers to achieve correctly formatted codes without putting in many efforts. Prettier extension works well on JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL, and other modern tools.

Features of prettier extension:

• It allows developers to make use of a wide range of command palettes to perform formatting tasks.
• It makes it easy for developers to format their codes and structure them efficiently based on predefined rules.
• Prettier comes with in-built integration for visual studio code ESLint and TSLint.

To download extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

5. Debugger for Chrome

This extension allows developers (both front and back end) to debug their codes in the code editor, it helps to track down hard to catch bugs easily. It is an official extension from Microsoft and is regularly maintained.

Features of Debugger for chrome:

• Developers can monitor changes in the user-specified parameters with the watches feature. It is much easier to use this than other Visual studio code extensions.
• The console is very robust, it contains all the functions to help with a productive workflow.
• It can be used for debugging script tags, scripts added dynamically or eval scripts.
• Developers can set breakpoints in their JavaScript source codes when they enable maps.

To Download Extension: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Installing Extensions

Now that we have looked at some of the extensions that can be added to Visual Studio code to make programming easier, let’s look at how to install extensions.

Step One: In the command palette window in code, click the install extension command.
Step Two: Scroll through the list provides for the one you want to install or use a filter to find what you are looking for.
Step Three: Once the extension has been installed, you would be prompted to restart your system and then you can start using your extension.
The extension can either be activated automatically or you can activate it from the command palette.

[Author]

Posts