lang-javascript

@codemirror/lang-javascript is the official language package that teaches CodeMirror 6 to understand JavaScript and its close relatives. Built on the Lezer JavaScript parser, it supplies syntax highlighting, context-aware indentation, code folding, and autocompletion for plain JS, TypeScript, JSX, and TSX from a single importable extension.

Drop the javascript() extension into an editor and you get a fully wired language mode: snippet and local-variable completion, JSX auto-closing tags, and an optional bridge to ESLint for inline diagnostics. It is a small, focused dependency that turns a bare CodeMirror instance into a capable JavaScript editing surface.

What You Get

• A one-call javascript() extension configurable for TypeScript and JSX dialects
• Standalone language providers: javascriptLanguage, typescriptLanguage, jsxLanguage, and tsxLanguage
• Snippet and local-variable completion sources, plus scopeCompletionSource for completing from a live scope object
• autoCloseTags extension that inserts matching JSX closing tags as you type
• An esLint adapter that connects an ESLint Linter instance to CodeMirror’s lint panel

Common Use Cases

• Adding a JavaScript or TypeScript editor to a web app, playground, or documentation site
• Building an in-browser JSX/TSX editing experience with auto-closing tags
• Wiring inline ESLint diagnostics into a CodeMirror-based code editor
• Providing context-aware autocompletion for user-authored scripts or config

Under The Hood

Architecture — The core lives in src/javascript.ts, where LRLanguage.define wraps the @lezer/javascript parser and decorates it with indentNodeProp, foldNodeProp, and language-data facets (comment tokens, bracket closing, indent-on-input triggers). Dialect variants (typescriptLanguage, jsxLanguage, tsxLanguage) are produced by .configure() calls that toggle the parser dialect and attach a JSX Sublanguage via sublanguageProp. The public javascript() function in the same file composes the chosen language provider with keyword/snippet completion and, for JSX, the autoCloseTags input handler — a EditorView.inputHandler that resolves the syntax tree at the cursor to decide when to insert </tag> or </>.

Tech Stack — Written entirely in TypeScript (100% of the source) and built with @codemirror/buildhelper. It depends on the CodeMirror 6 module family (@codemirror/language, state, view, autocomplete, lint) as peer-style dependencies and on the Lezer stack (@lezer/common, @lezer/javascript) for parsing. It ships dual ESM/CJS builds with generated type declarations and is marked side-effect-free for tree-shaking.

Code Quality — The codebase is compact and cohesive: four focused source modules (javascript.ts, complete.ts, snippets.ts, eslint.ts) behind a thin index.ts re-export barrel. Tests exist under test/ (test-indent.ts, test-syntax.ts) exercising indentation and syntax behavior via CodeMirror’s test runner. Types are strict and the public surface is documented with /// doc comments that generate the README API reference.

API Design — The developer experience is excellent: the common path is a single javascript({typescript, jsx}) call, while advanced users can reach for the individually exported language providers and completion sources. Naming is consistent and self-describing, every exported symbol carries a documentation comment, and the README shows a complete working example in a few lines. Getting a JavaScript editor running requires almost no boilerplate.