# @codemirror/lang-javascript [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-javascript.svg)](https://www.npmjs.org/package/@codemirror/lang-javascript)

[ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-javascript/blob/main/CHANGELOG.md) ]

This package implements JavaScript language support for the
[CodeMirror](https://codemirror.net/) code editor.

The [project page](https://codemirror.net/) has more information, a
number of [examples](https://codemirror.net/examples/) and the
[documentation](https://codemirror.net/docs/).

This code is released under an
[MIT license](https://github.com/codemirror/lang-javascript/tree/main/LICENSE).

We aim to be an inclusive, welcoming community. To make that explicit,
we have a [code of
conduct](http://contributor-covenant.org/version/1/1/0/) that applies
to communication around the project.

## Usage

```javascript
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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean), typescript⁠?: boolean (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)} = {}) → LanguageSupport (https://codemirror.net/docs/ref#language.LanguageSupport)

JavaScript support. Includes snippet
and local variable completion.

  javascriptLanguage: LRLanguage (https://codemirror.net/docs/ref#language.LRLanguage)

A language provider based on the Lezer JavaScript
parser (https://github.com/lezer-parser/javascript), extended with
highlighting and indentation information.

  typescriptLanguage: LRLanguage (https://codemirror.net/docs/ref#language.LRLanguage)

A language provider for TypeScript.

  jsxLanguage: LRLanguage (https://codemirror.net/docs/ref#language.LRLanguage)

Language provider for JSX.

  tsxLanguage: LRLanguage (https://codemirror.net/docs/ref#language.LRLanguage)

Language provider for JSX + TypeScript.

  autoCloseTags: Extension (https://codemirror.net/docs/ref#state.Extension)

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

  snippets: readonly Completion (https://codemirror.net/docs/ref#autocomplete.Completion)[]

A collection of JavaScript-related
snippets (https://codemirror.net/docs/ref/#autocomplete.snippet).

  typescriptSnippets: Completion (https://codemirror.net/docs/ref#autocomplete.Completion)[]

A collection of snippet completions for TypeScript. Includes the
JavaScript snippets.

  localCompletionSource(context: CompletionContext (https://codemirror.net/docs/ref#autocomplete.CompletionContext)) → CompletionResult (https://codemirror.net/docs/ref#autocomplete.CompletionResult) | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)

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

  completionPath(context: CompletionContext (https://codemirror.net/docs/ref#autocomplete.CompletionContext)) → {path: readonly string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)[], name: string (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)} | null (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 (https://codemirror.net/docs/ref#autocomplete.CompletionSource)

Defines a completion source (https://codemirror.net/docs/ref/#autocomplete.CompletionSource) 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 (https://codemirror.net/docs/ref#view.EditorView)) → Diagnostic (https://codemirror.net/docs/ref#lint.Diagnostic)[]

Connects an ESLint (https://eslint.org/) linter to CodeMirror's
lint (https://codemirror.net/docs/ref/#lint) integration. eslint should be an instance of the
Linter (https://eslint.org/docs/developer-guide/nodejs-api#linter)
class, and config an optional ESLint configuration. The return
value of this function can be passed to linter (https://codemirror.net/docs/ref/#lint.linter)
to create a JavaScript linting extension.

Note that ESLint targets node, and is tricky to run in the
browser. The
eslint-linter-browserify (https://github.com/UziTech/eslint-linter-browserify)
package may help with that (see
example (https://github.com/UziTech/eslint-linter-browserify/blob/master/example/script.js)).

