How to Format JSON in VSCode

VSCode offers multiple ways to format JSON files, making it easy for developers to choose the method that best suits their workflow. A well-formatted JSON file is easier to read, understand, and debug, especially when working with complex data structures.

Formatting JSON in VSCode

Let us see these ways one by one. JSON formatting refers to the way JSON data is organized and presented. Proper formatting involves:

• Indentation: Using spaces or tabs to create a clear hierarchy of nested objects and arrays.
• Whitespace: ensuring adequate space around colons, commas, and brackets for readability.
• Consistency: adhering to a uniform style throughout the document to maintain clarity.

Using Built-in JSON Formatter

One way to format JSON in VSCode if by using the inbuild JSON formatted. All you need to do is follow the steps given below:

• Open JSON File: Open the JSON file you want to format in VSCode.
• Command Palette: Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
• Format Document: Type "Format Document" and select it from the list of options.
• Formatting: VSCode will automatically format the JSON file based on the default settings.

Here is an example of unformatted JSON data:

{"name":"John","age":30,"city":"New York","hobbies":["reading","traveling","swimming"],"
education":{"highschool":"ABC High","college":"XYZ University"}}

After formatting, the JSON data should look like this:

JSON Formatter Extension

For more advanced formatting options, you can install a JSON formatter extension:

• Extensions View: Click on the Extensions icon in the Activity Bar or press Ctrl+Shift+X.
• Search for JSON Formatter: Type "JSON Formatter" in the search bar.
• Install: Select the JSON Formatter extension and click "Install".
• Format JSON: With the extension installed, you can format JSON files using the commands provided by the extension.

Conclusion

Formatting JSON in VSCode is straightforward and can be achieved through various methods, including built-in tools, command palette, and extensions like Prettier. Properly formatted JSON enhances readability and maintainability, making it an essential practice for developers. By utilizing these methods, you can ensure your JSON files are consistently and correctly formatted.