In this tutorial, you will learn some tips and tricks that will allow you to work more efficiently with JSON within VS-Code. JSON is definitely the defacto way to get data from APIs. As a web developer who writes code that communicates with APIs on a weekly basis, I spend a good chunk of every week dealing with JSON. When looking to become more productive, learning better ways to work on tasks that you perform very regularly should skyrocket your productivity 🚀. JSON is definitely one of those areas for most developers. If this sounds useful for you, read on 🔥🔥🔥

How do I view a JSON file in Visual Studio?

Out-of-the-box, it is obviously possible to view JSON files in VS-code directly. Personally, I find this view OK to quickly scan a simple JSON document, however, I find it much easier to drill into a more complex JSON object using JSONViewer. As seen below, this extension gives you a new view within VS-Code to work with JSON files:

![Tips for working with JSON in Visual Studio Code][1]

By selecting the 'Open in JSON viewer' option from the command palette, you can view a JSON document in an easier and cleaner way compared to simply opening it within VS-Code. It is also much easier to hide/reveal certain aspects of the document using the JSON view filters

How do I Beautify JSON within Vscode?

If you are within VS-Code and the JSON that you are working on isn't formatted nicely, instead of manually trying to correct it, you can use the VS-Code auto-format feature,. To auto-format the document, simply select ALT + SHIFT + F. VS-Code should automatically format the JSON for you so its easy to read... pretty 😍

![Tips for working with JSON in Visual Studio Code 2][2]

NOTE: This tip also works with all languages that VS-Code supports!

Intellisense

When working with JSON in VS-Code, it is possible to leverage Intelli-sense to help minimise data entry errors. Making use of IntelliSense correctly can be a real-time saver for developers. Using IntelliSense, will not only save developers from necessarily typing stuff out, but it will also provide type checking for improved validation checks. Using IntelliSense means you do not need to remember every single option for every single configuration file that you work with. Instead, you can use Intellisense to remind you of the available options. This will allow you to focus on writing good code.

In order to use Intellisense within a JSON file, a schema needs to exist. When you use VS-Code out-of-the-box, a number of common schemas are provided for common JSON files, like package.json. VS-Code uses the name of the file to try and find the correct schema to use with it. VS-Code does this in the background without you having to do anything. Basically, VS-Code is constantly doing a lot of look-ups that you were probably never aware of! If a file is called package.json, VS-Code will automatically find the package.json schema in the background. This is how IntelliSense works out-of-the-box without you having to manually set anything up.

The VS-Code schema look-up is pretty clever. Not only will VS-Code auto-match schemas for any JSON files in your node_module folder, but it will also look at the NPM package version and use the correct version of the schema based on the package number. You now know that VS-code has this cool ability to auto-match JSON schemas from some pre-defined types. Did you know you can also add your own rules to your JSON documents?. Within VS-Code, it is also possible to define your own schemas and associate them against any custom JSON document that you create. You can associate a schema in VS-Code to any JSON document using the $schema attribute, as seen below:

![Tips for working with JSON in Visual Studio Code 3][3]

The example above shows all the schemas that VS-code knows about out-of-the-box. It is also possible to create a custom schema and link to it using a relative path. Defining a custom schema will allow Visual Studio IntelliSense to work with your custom JSON files. This can be beneficial, as you can add some type-safety checks when working with these files to help ensure JSON objects are structured in the correct way. An example of a simple schema is shown below:

You can then associate a custom schema to a custom JSON file in VS-code like this:

Intellisense is now validating the file and picking up that an incorrect data type is being set against the name property 💥

I hope these tips will make you more productive when working with JSON within Vs-Code. Go forth and conquer! Happy Coding 🤘