@codemirror/lang-json is a language support package for CodeMirror 6 that provides syntax highlighting, parsing, and other language-related features for JSON. It is part of the CodeMirror 6 ecosystem, which is a versatile text editor implemented in JavaScript for the browser.

What are @codemirror/lang-json's main functionalities?

Syntax Highlighting

This code sets up a CodeMirror editor with JSON syntax highlighting. The `json()` function from `@codemirror/lang-json` is used to enable JSON language support.

import { json } from '@codemirror/lang-json';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: '{ "key": "value" }',
  extensions: [basicSetup, json()]
});

const view = new EditorView({
  state,
  parent: document.body
});

JSON Parsing

This code demonstrates how to parse a JSON document using the `@codemirror/lang-json` package. The `syntaxTree` function is used to get the syntax tree of the current document.

import { json } from '@codemirror/lang-json';
import { syntaxTree } from '@codemirror/language';
import { EditorState } from '@codemirror/state';

const state = EditorState.create({
  doc: '{ "key": "value" }',
  extensions: [json()]
});

const tree = syntaxTree(state);
console.log(tree);

Error Highlighting

This code sets up a CodeMirror editor with JSON syntax highlighting and error detection. The trailing comma in the JSON document will be highlighted as an error.

import { json } from '@codemirror/lang-json';
import { EditorState } from '@codemirror/state';
import { EditorView, basicSetup } from '@codemirror/basic-setup';

const state = EditorState.create({
  doc: '{ "key": "value", }', // Note the trailing comma, which is an error
  extensions: [basicSetup, json()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @codemirror/lang-json