Solved: Visual studio code format JSON

The Problem

If you have unformatted or minified JSON data it is common to want to produce a more readable format of the JSON data. The minified/unformatted data usually comes in the form of an HTTP response. Unformatted JSON objects are harder to read, troubleshoot and manage.

Formatted JSON is better for code quality, organization and efficiency.

Just do it!!

Common Steps to Reproduce and Setup

Formatting from an existing file

Right-click and select the “Format Document” option (or use the keyboard shortcuts shown below in The Solution).

Formatting from the clipboard

Press Ctrl +N or select File -> New Text File from the application menu to open a new/unsaved file, and paste the chunk of JSON into it. Press Ctrl +ShiftP , start typing “Change“, then select “Change Language Mode“:

Then, start typing “JSON” and select it when it comes up:

The Solution

Code formatting is available in Visual Studio Code through the following shortcuts:

  • On Windows:
  • On Mac:
  • On Linux:

You can also find the shortcut along with other shortcuts through the submenu View / Command Pallete , also provided in the editor with Ctrl +ShiftP (or Command + Shift + P on Mac) and then searching for format document.

For Unsaved Snippets

  1. Open command palette (Win: F1 or Ctrl+Shift+P)
  2. Find “Change Language Mode”
  3. Select language e.g. json. By now syntax should be highlighted.
  4. Format document (e.g. Open Command Palette -> “Format Document“)

Unformat

  1. Select text
  2. Command Palette -> Join Lines

Bug Resolution Process Developers Love

Every bug added to your teams backlog in real-time.

  • Better Team Collaboration

  • Reproduction Steps

  • Actionable Insights

  • End to End Tracing

Schedule a demo

ClearInsights community plan is always free

Leave a Reply