@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.
Usage
import {EditorView, basicSetup} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
const view = new EditorView({
parent: document.body,
doc: `console.log("Hello world")`,
extensions: [basicSetup, javascript()]
})
API Reference
-
javascript(config?: {jsx?: boolean, typescript?: boolean} = {}) → LanguageSupport
JavaScript support. Includes snippet
and local variable 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.
-
typescriptSnippets: Completion[]
A collection of snippet completions for TypeScript. Includes the
JavaScript 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).
