The one React snippet I've always missed

TL;DR

"show data as preformatted JSON": {
    "prefix": "pson",
    "body": ["<pre>{JSON.stringify(${1:data}, null, 2)}</pre>"],
    "description": "Show data as JSON string in a <pre> tag"
  }

The complete Why and How

Using React, I frequently run into the need to quickly inspect a nested data payload of unknown or uncertain shape.

Yes, I can definitely use console.log(data) and inspect it using devtools. But then I would need to use a mouse click to open every single subtree, which can be really tedious.

Most of the time, my best solution personally would be to create a <pre> element and, inside this element, display a serialized JSON in a pretty format (JSON.stringify(data, null, 2)). If I’d omitted the <pre> tag or the third (space) parameter of the serializing function, it wouldn’t work (it would display the JSON string, but it wouldn’t be formatted, thus probably completely unreadable).

Because I’ve been using this quite a lot, I was looking for a way to avoid typing it manually every single time. I tried to take advantage of emmet abbreviations, but for some reason (probably conflicting snippet packages), expanding pre was giving me private name() {} and if I wanted to get to the actual <pre> tag from intellisense, I had to scroll down the list five items down 🤔. So, I’ve come up with my own snippet:

"show data as preformatted JSON": {
    "prefix": "pson",
    "body": ["<pre>{JSON.stringify(${1:data}, null, 2)}</pre>"],
    "description": "Show data as JSON string in a <pre> tag"
  }

Expanding the snippet gives us this:

<pre>{JSON.stringify(data, null, 2)}</pre>

How do I use it? Open the Command Palette (Ctrl/Command+Shift+P), choose Configure User Snippets, then choose the appropriate language file (javascriptreact.json or typescritreact.json), copy and paste the snippet into the root object, and save the file.

The “pson” abbreviation can be explained as “Pre tag containing jSON data”; I find it memorable enough, and if you don’t like it, you can easily change it to whatever you like.

👍 Enjoy!

last modified on 28^th May 2023

If you find anything in this post that should be improved (either factually or in language), feel free to edit it on Github .