@codemirror/lang-json

What is @codemirror/lang-json?

@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

jsonlint

jsonlint is a JSON parser and validator with a CLI and a web interface. It provides similar functionality in terms of validating JSON documents but does not offer the same level of integration with text editors as @codemirror/lang-json.

vscode-json-languageservice

vscode-json-languageservice is a JSON language service extracted from Visual Studio Code. It provides features like validation, completion, and hover information for JSON documents. It is more comprehensive in terms of language services but is designed to be used within the VSCode ecosystem.

monaco-json

monaco-json is the JSON language support for the Monaco Editor, which powers Visual Studio Code. It offers similar features like syntax highlighting, validation, and autocompletion for JSON documents. It is comparable to @codemirror/lang-json but is specific to the Monaco Editor.

README

@codemirror/lang-json

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements JSON language support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

API Reference

json() → LanguageSupport

JSON language support.

jsonLanguage: LezerLanguage

A language provider that provides JSON parsing.

jsonParseLinter() → fn(view: EditorView) → Diagnostic[]

Calls JSON.parse on the document and, if that throws an error, reports it as a single diagnostic.

Changelog

6.0.1 (2022-10-24)

Bug fixes

Make sure the language object has a name.