@codemirror/lang-javascript

What is @codemirror/lang-javascript?

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

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

Syntax Highlighting

This code sets up a basic CodeMirror editor with JavaScript syntax highlighting. The `javascript` function from `@codemirror/lang-javascript` is used to enable JavaScript language support.

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

const state = EditorState.create({
  doc: 'const x = 10;',
  extensions: [basicSetup, javascript()]
});

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

Code Folding

This code demonstrates how to set up code folding in a CodeMirror editor with JavaScript language support. The `foldGutter` extension is used alongside `@codemirror/lang-javascript`.

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

const state = EditorState.create({
  doc: 'function foo() {\n  console.log("bar");\n}',
  extensions: [basicSetup, javascript(), foldGutter()]
});

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

Linting

This code sets up a custom linter in a CodeMirror editor with JavaScript language support. The `linter` function from `@codemirror/lint` is used to create a custom linting extension.

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

const myLinter = linter(view => {
  let diagnostics = [];
  // Custom linting logic here
  return diagnostics;
});

const state = EditorState.create({
  doc: 'const x = 10;',
  extensions: [basicSetup, javascript(), myLinter]
});

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

Other packages similar to @codemirror/lang-javascript

monaco-editor

Monaco Editor is the code editor that powers VS Code. It provides rich language support for JavaScript, including syntax highlighting, code folding, and linting. Compared to @codemirror/lang-javascript, Monaco Editor is more feature-rich and is designed to provide a similar experience to Visual Studio Code.

ace-builds

Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, code folding, and other language-specific features for JavaScript. While it is similar to @codemirror/lang-javascript in terms of functionality, Ace is an older project and may not have the same level of modern features and extensibility as CodeMirror 6.

highlight.js

Highlight.js is a syntax highlighter written in JavaScript. It supports a wide range of languages, including JavaScript. Unlike @codemirror/lang-javascript, Highlight.js is focused solely on syntax highlighting and does not provide other editor features like code folding or linting.

README

@codemirror/lang-javascript

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements JavaScript 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

javascript(config⁠?: {jsx⁠?: boolean, typescript⁠?: boolean} = {}) → LanguageSupport

JavaScript support. Includes snippet completion.

javascriptLanguage: LRLanguage

A language provider based on the Lezer JavaScript parser, extended with highlighting and indentation information.

typescriptLanguage: LRLanguage

A language provider for TypeScript.

jsxLanguage: LRLanguage

Language provider for JSX.

tsxLanguage: LRLanguage

Language provider for JSX + TypeScript.

autoCloseTags: Extension

Extension that will automatically insert JSX close tags when a > or / is typed.

snippets: readonly Completion[]

A collection of JavaScript-related snippets.

localCompletionSource(context: CompletionContext) → CompletionResult | null

Completion source that looks up locally defined names in JavaScript code.

completionPath(context: CompletionContext) → {path: readonly string[], name: string} | null

Helper function for defining JavaScript completion sources. It returns the completable name and object path for a completion context, or null if no name/property completion should happen at that position. For example, when completing after a.b.c it will return {path: ["a", "b"], name: "c"}. When completing after x it will return {path: [], name: "x"}. When not in a property or name, it will return null if context.explicit is false, and {path: [], name: ""} otherwise.

scopeCompletionSource(scope: any) → CompletionSource

Defines a completion source that completes from the given scope object (for example globalThis). Will enter properties of the object when completing properties on a directly-named path.

esLint(eslint: any, config⁠?: any) → fn(view: EditorView) → Diagnostic[]

Connects an ESLint linter to CodeMirror's lint integration. eslint should be an instance of the Linter class, and config an optional ESLint configuration. The return value of this function can be passed to linter to create a JavaScript linting extension.

Note that ESLint targets node, and is tricky to run in the browser. The eslint-linter-browserify package may help with that (see example).

Changelog

6.1.7 (2023-04-19)

Bug fixes

Fix overeager JSX tag closing inside attribute values and in self-closing tags.