0

Is there an extension or other solution that allows you to validate selected text as JSON in VS Code?

It's something very simple in concept that I've been doing for years in Notepad++, but surprisingly I still haven't found a way to do this in VS Code. The three most popular JSON extensions I installed were not able to do this.

To validate a JSON text block, I currently have to copy the text, then paste it into something like jsonlint.com to validate. There's got to be a better way than this in VS Code.

UPDATE: I'm aware a JSON document is automatically linted in VS Code, but I often work with non-JSON files that have JSON snippets, so it won't work in my situation. Here's an example that caused a real issue on production because of the missing comma that wasn't marked with a red squiggly in VS Code:

[some_template.liquid]

{% schema %}
  {
    ...
    "settings": [
      {
        "type": "header",
        "content": "Content"
      }
      {
        "type": "text",
        "id": "some_id",
        "label": "Some Label"
      }
    ],
    ...
  }
{% endschema %}

Hence, I need a solution that allows me to select a block of text, run a command like "Validate JSON", and have it either auto-correct the selected text, add red squigglies to indicate errors in the JSON, or output a list of errors in the Problems console.

thdoan
  • 18,421
  • 1
  • 62
  • 57
  • auto-correct: select `{}` and the tool will write a 1000 line JSON file for you. What are the commands to lint JSON content? – rioV8 Dec 18 '21 at 14:35
  • @rioV8 I have ESLint installed, so it lints all *.json files automatically. – thdoan Dec 20 '21 at 18:07

1 Answers1

2

The extension JSON Tools by Erik Lynd allows you to operate on selections.

Select a piece of code and call the minify or prettify command (there are keybindings defined), it performs a tryParseJSON call and notifies with an info message. If needed you can add a tryParse only command.


Edit

I have written the extension JSON Validate that will validate selected text (allows multi selection) and gives you the possibility to move the cursor to the offending line. At max 1 error per selection. If there are no errors the extension is silent (could add a setting to change that).

rioV8
  • 24,506
  • 3
  • 32
  • 49
  • I just tried this. Even though it gets closer than the others, it didn't really work in reality when dealing with large JSON data. Example: https://imgur.com/a/QPMhPhJ -- I'm not going to look for the 3086th character in one long string that is cut off in the notification. It would've been better if they just showed the line number in the document. – thdoan Dec 20 '21 at 18:06
  • @thdoan See my edit, there is now a dedicated extension – rioV8 Dec 21 '21 at 12:09
  • rioV8, your extension is awesome! Thanks for telling me about it. I just tried it out (see https://i.imgur.com/I6uO3UF.png). There are two things that would make it just about perfect IMHO: (1) the placement of the comma would actually be in `7:8`, not `8:7`; (2) add a way to jump to the error without touching the mouse (currently I have to use the mouse to click on the Goto button). – thdoan Dec 25 '21 at 19:40
  • @thdoan Where you place the `,` in JSON is ambiguous, anywhere between `}{` is a valid location, it is a convention by the person making the file, the `{` is the first character that is not allowed by the cellular automata (parser), it skips ALL whitespace, I could add options to make it kind of a linter and flag the end of the previous line in case of expecting `,`. I will see if I can make a command that will jump to the error, you can add a keybinding yourself or I will make an option to add it to the context menu. I will create issues for these. – rioV8 Dec 25 '21 at 20:37
  • rioV8, the extension is already useful in its current form, so any feature you add would be icing on the cake ^^. Another feature request: option to show red squiggly where the errors are. Thanks again! – thdoan Dec 26 '21 at 01:04
  • 1
    @thdoan red squiggles means I have to keep track (position in the file) of the text block(s) you tested and continuously test if you have fixed the error, I don't know the file syntax and otherwise I would have to be able to parse all file formats, the squiggle is bound to a Diagnostic Provider, so not very likely it will be implemented – rioV8 Dec 26 '21 at 09:26
  • @thdoan Have you looked at v1.4.0. It should validate Liquid schema parts automatic and show it in the PROBLEMS panel. Can you verify if the buildin definition is correct. – rioV8 Dec 29 '21 at 14:47
  • rioV8 I just tested v1.4.1 and WOW amazing work with your extension -- it has far surpassed my expectations, so I'm going to leave you 5 stars. I see both output in the Problems panel _and_ I see the red squiggly in expected location (also noticed location is now 7:8 instead of 8:7 ^^). https://i.imgur.com/PBpbyUS.png – thdoan Dec 30 '21 at 20:28
  • @thdoan Nice to know it works out of the box, now you can move with the keyboard to the next problem. You can disable the Warning messages with a setting. If there are more file formats that have JSON sections I will add buildin block definitions. – rioV8 Dec 30 '21 at 20:46
  • rioV8, for an idea, look at ESLint Probe setting. Try adding "liquid" and notice the array updated for `eslint.probe` in `settings.json`. You can have something like a `jsonvalidate.probe` array. Here's the definition from [ESLint page](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): "eslint.probe = an array for language identifiers for which the ESLint extension should be activated and should try to validate the file. If validation fails for probed languages the extension says silent." – thdoan Dec 31 '21 at 21:38
  • P.S. I have Liquid language support extension installed and adding "liquid" to `eslint.probe` did nothing for me. – thdoan Dec 31 '21 at 21:41
  • @thdoan Have you seen the setting [`jsonvalidate.blocks`](https://marketplace.visualstudio.com/items?itemName=rioj7.vscode-json-validate#blocks). There is a default definition for liquid files, **no need to select part of these files**. Just adding a languageID is not enough, I need to know which part of the file is JSON, that is determined in the defined blocks. – rioV8 Dec 31 '21 at 23:26
  • rioV8, you're right -- I noticed the red squiggly is visible after opening `test.liquid`. Nitpicking, but thought I should share: since it's called Problems pane, it would be more consistent for `jsonvalidate.errorsInProblemPane` to be called `jsonvalidate.errorsInProblemsPane` (plural). – thdoan Jan 01 '22 at 23:20
  • 1
    @thdoan I have noticed that typo too and now the setting is named `jsonvalidate.errorsInProblemsPanel` that was v1.4.0 -> v1.4.1 (they are called **Panel**, but I forgot to update the README (v1.4.2) I don't think anybody (or at least very few) prefer the messages over the squiggles, a quick visit to the settings panel will fix that. (and I'm not yet at 10M+ users ;-) – rioV8 Jan 02 '22 at 00:30