DEV Community

Cover image for 5 Visual Studio Code Extensions to Boost Web Development Productivity
Anthony Fung
Anthony Fung

Posted on • Originally published at webdeveloperdiary.substack.com

5 Visual Studio Code Extensions to Boost Web Development Productivity

Two tools that I use daily as a Web developer are Visual Studio and Visual Studio Code (VS Code). They are both incredibly powerful and feature rich. In addition, they also allow other developers to extend their feature sets with extensions. I have listed five extensions below that I find boost my productivity.

The list is divided into two sections – one for general development, and one for tools that are helpful when working with Web traffic.

General Programming

Code Spell Checker (Street Side Software)

A straightforward and no-nonsense spell checker. Typographical errors are easy to make when writing variable names and comments. This extension highlights them so they can be corrected before they get committed to source control.

Bookmarks (Alessandro Fragnani)

This extension lets us bookmark places within our code. It is like the Bookmark feature in Visual Studio, but it also places a new tab in the sidebar where all bookmarks are listed for reference and navigation. Highly useful when working with larger code bases.

Insert GUID (Heath Stewart)

We sometimes need to generate GUIDs, for example when creating IDs for objects in unit tests. Visual Studio already has a built-in Create GUID tool. When working in VS Code, this extension enables similar functionality. The list of formats is similar, with the added option of inserting a GUID without additional formatting.

Web Traffic

vscode-json (Andy Aldo)

This extension allows for working with JSON without having to use external tools and websites for viewing and formatting. It adds five commands to the VS Code command palette:

  • Validate
    This is useful for quickly checking that JSON is valid.

  • Beautify
    There are many times when it is necessary to inspect and/or edit JSON – we might want to check data being passed between the front and back ends of a Web service. This can be difficult when the JSON is flattened into a single string. Beautifying the JSON allows us to work with the data in a more human-readable format.

  • Uglify
    After modifying JSON, we might want to flatten it again to minimise the data size. This is useful if we are storing a program’s configuration settings with JSON and want the smallest possible file size. Uglify lets us do this quickly and simply.

  • Escape
    We sometimes want to store JSON as a string within program code. This could be test-data for a unit test, for example. In languages that use double quotes to denote string variables, we need to mark the double quotes in the JSON as being part of the data. Running this command does this automatically, meaning that we don’t have to do it manually.

  • Unescape
    Does the opposite of escaping the data. Useful for quickly converting escaped JSON into something that we can work with.

Encode Decode (Mitch Denny)

A common need when building Web apps is to convert text between various formats. For example, certain characters need to be converted when used in HTML and URLs. Some request headers use of Base64 too. Encode Decode allows quick conversion of these and more formats. Having this available within VS Code means that there is no need to search for external resources to help with these conversions.

And More

The list above is by no means exhaustive. There are language and framework specific extensions – e.g. C# (Microsoft); and Angular Language Service (Angular) for syntax highlighting and code snippets. There are also general utilities – e.g. Lorem ipsum (Daniel Imms), which is useful when working with development-stage UI. And the best thing is that if you need something truly bespoke, the extension model means that you can build it!

Top comments (0)