Add JSON syntax linting to CodeMirror v6 editor

[Geethegreat]

Fixes #3817

Changes:
Adds JSON syntax linting support to the CodeMirror v6 editor. The new linter parses JSON content and surfaces syntax errors at the correct character position.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[Jatin24062005]

@Geethegreat Thanks for adding JSON linting — this definitely improves parity with JS/CSS
But my concern is that relying on JSON.parse can surface aggressive errors while users are still typing incomplete JSON (e.g. { "key":) which causes flickering error. VS Code and other editors avoid this by using a tolerant, incremental parser.

Since we’re already on CodeMirror v6, we could potentially leverage @codemirror/lang-json’s syntax tree and surface diagnostics from error nodes instead. This would give more accurate ranges and a smoother typing experience, closer to what users expect from modern editors. @raclim WDYT?

[Geethegreat]

@Jatin24062005 Thanks for the feedback that’s a very fair point.
I agree that JSON.parse is eager and can surface errors while users are still typing incomplete JSON, which can feel noisy compared to editors like VS Code. My initial approach was aimed at achieving basic parity with existing JS/HTML/CSS linting using a minimal, dependency-free solution, aligned with the scope described in the issue.

Leveraging @codemirror/lang-json’s syntax tree sounds like a more editor-native approach, I’d be happy to explore that direction, either by iterating on this PR or as a follow-up, depending on what feels most appropriate for the v6 rollout timeline.

Curious to hear your thoughts, @raclim ready to adapt based on what the maintainers prefer here.

[khanniie]

hi all! I'll switch to the branch and check it out myself when I have a moment, but regarding the potential flickering issue, is it possible to see a screen recording of what it looks like for you? If flickering were an issue, I believe that we'd be seeing that in the other existing linters as well (js, css, html) so I suspect there's some sort of key debouncing built into codemirror to circumvent this issue anyways : ) I like the existing parse suggestion and don't think we need to over-engineer this, especially considering this codemirror thread where the creator suggests something quite similar to this solution here:
https://discuss.codemirror.net/t/json-linter/4681/4

I do think you could look into using the function mentioned there just to avoid duplicate code!
https://github.com/codemirror/lang-json/blob/main/src/lint.ts

Really appreciate the contribution and am excited about the momentum for v6! Thanks for all the great discussion : )

[khanniie]

Hi @Geethegreat, just wanted to check in on if you were still interested in working on this PR? I think it's almost there, so let me know if you want to make the final changes or if it would be okay for me to add some changes on top of your branch to merge it in.

[Jatin24062005]

hi all! I'll switch to the branch and check it out myself when I have a moment, but regarding the potential flickering issue, is it possible to see a screen recording of what it looks like for you? If flickering were an issue, I believe that we'd be seeing that in the other existing linters as well (js, css, html) so I suspect there's some sort of key debouncing built into codemirror to circumvent this issue anyways : ) I like the existing parse suggestion and don't think we need to over-engineer this, especially considering this codemirror thread where the creator suggests something quite similar to this solution here: https://discuss.codemirror.net/t/json-linter/4681/4

I do think you could look into using the function mentioned there just to avoid duplicate code! https://github.com/codemirror/lang-json/blob/main/src/lint.ts

Really appreciate the contribution and am excited about the momentum for v6! Thanks for all the great discussion : )

Thanks for the pointers @khanniie! Using the helper from @codemirror/lang-json to avoid duplicating the JSON.parse logic sounds like a good improvement. 😊

[Geethegreat]

Sure no problem, I'd love to polish it and submit the pr.

[Geethegreat]

Hi @khanniie! Updated to use jsonParseLinter from @codemirror/lang-json as suggested this eliminates the duplicate JSON.parse logic and uses the upstream getErrorPosition helper. Ready for review! 🙂

[khanniie]

LGTM! Thanks for the work here! Just tested and it works great : )

[khanniie]

are you able to resolve the conflicts so that we can merge it in? @Geethegreat apologies for the extra work!

[Geethegreat]

Hi @khanniie! I've resolved the merge conflicts, its ready to be merged.

[khanniie]

@Geethegreat yay! Thank you so much! Merged!