| <!-- NOTE: README.md is generated from src/README.md --> | |
| # @codemirror/lang-javascript [](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. | |
| ## API Reference | |
| <dl> | |
| <dt id="user-content-javascript"> | |
| <code><strong><a href="#user-content-javascript">javascript</a></strong>(<a id="user-content-javascript^config" href="#user-content-javascript^config">config</a>⁠?: {jsx⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, typescript⁠?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>} = {}) → <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt> | |
| <dd><p>JavaScript support. Includes <a href="#user-content-snippets">snippet</a> | |
| and local variable completion.</p> | |
| </dd> | |
| <dt id="user-content-javascriptlanguage"> | |
| <code><strong><a href="#user-content-javascriptlanguage">javascriptLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt> | |
| <dd><p>A language provider based on the <a href="https://github.com/lezer-parser/javascript">Lezer JavaScript | |
| parser</a>, extended with | |
| highlighting and indentation information.</p> | |
| </dd> | |
| <dt id="user-content-typescriptlanguage"> | |
| <code><strong><a href="#user-content-typescriptlanguage">typescriptLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt> | |
| <dd><p>A language provider for TypeScript.</p> | |
| </dd> | |
| <dt id="user-content-jsxlanguage"> | |
| <code><strong><a href="#user-content-jsxlanguage">jsxLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt> | |
| <dd><p>Language provider for JSX.</p> | |
| </dd> | |
| <dt id="user-content-tsxlanguage"> | |
| <code><strong><a href="#user-content-tsxlanguage">tsxLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt> | |
| <dd><p>Language provider for JSX + TypeScript.</p> | |
| </dd> | |
| <dt id="user-content-autoclosetags"> | |
| <code><strong><a href="#user-content-autoclosetags">autoCloseTags</a></strong>: <a href="https://codemirror.net/docs/ref#state.Extension">Extension</a></code></dt> | |
| <dd><p>Extension that will automatically insert JSX close tags when a <code>></code> or | |
| <code>/</code> is typed.</p> | |
| </dd> | |
| <dt id="user-content-snippets"> | |
| <code><strong><a href="#user-content-snippets">snippets</a></strong>: readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt> | |
| <dd><p>A collection of JavaScript-related | |
| <a href="https://codemirror.net/docs/ref/#autocomplete.snippet">snippets</a>.</p> | |
| </dd> | |
| <dt id="user-content-typescriptsnippets"> | |
| <code><strong><a href="#user-content-typescriptsnippets">typescriptSnippets</a></strong>: <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt> | |
| <dd><p>A collection of snippet completions for TypeScript. Includes the | |
| JavaScript <a href="#user-content-snippets">snippets</a>.</p> | |
| </dd> | |
| <dt id="user-content-localcompletionsource"> | |
| <code><strong><a href="#user-content-localcompletionsource">localCompletionSource</a></strong>(<a id="user-content-localcompletionsource^context" href="#user-content-localcompletionsource^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionResult">CompletionResult</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt> | |
| <dd><p>Completion source that looks up locally defined names in | |
| JavaScript code.</p> | |
| </dd> | |
| <dt id="user-content-completionpath"> | |
| <code><strong><a href="#user-content-completionpath">completionPath</a></strong>(<a id="user-content-completionpath^context" href="#user-content-completionpath^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → {path: readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[], name: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>} | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt> | |
| <dd><p>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 <code>a.b.c</code> it will | |
| return <code>{path: ["a", "b"], name: "c"}</code>. When completing after <code>x</code> | |
| it will return <code>{path: [], name: "x"}</code>. When not in a property or | |
| name, it will return null if <code>context.explicit</code> is false, and | |
| <code>{path: [], name: ""}</code> otherwise.</p> | |
| </dd> | |
| <dt id="user-content-scopecompletionsource"> | |
| <code><strong><a href="#user-content-scopecompletionsource">scopeCompletionSource</a></strong>(<a id="user-content-scopecompletionsource^scope" href="#user-content-scopecompletionsource^scope">scope</a>: any) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionSource">CompletionSource</a></code></dt> | |
| <dd><p>Defines a <a href="https://codemirror.net/docs/ref/#autocomplete.CompletionSource">completion source</a> that | |
| completes from the given scope object (for example <code>globalThis</code>). | |
| Will enter properties of the object when completing properties on | |
| a directly-named path.</p> | |
| </dd> | |
| <dt id="user-content-eslint"> | |
| <code><strong><a href="#user-content-eslint">esLint</a></strong>(<a id="user-content-eslint^eslint" href="#user-content-eslint^eslint">eslint</a>: any, <a id="user-content-eslint^config" href="#user-content-eslint^config">config</a>⁠?: any) → fn(<a id="user-content-eslint^returns^view" href="#user-content-eslint^returns^view">view</a>: <a href="https://codemirror.net/docs/ref#view.EditorView">EditorView</a>) → <a href="https://codemirror.net/docs/ref#lint.Diagnostic">Diagnostic</a>[]</code></dt> | |
| <dd><p>Connects an <a href="https://eslint.org/">ESLint</a> linter to CodeMirror's | |
| <a href="https://codemirror.net/docs/ref/#lint">lint</a> integration. <code>eslint</code> should be an instance of the | |
| <a href="https://eslint.org/docs/developer-guide/nodejs-api#linter"><code>Linter</code></a> | |
| class, and <code>config</code> an optional ESLint configuration. The return | |
| value of this function can be passed to <a href="https://codemirror.net/docs/ref/#lint.linter"><code>linter</code></a> | |
| to create a JavaScript linting extension.</p> | |
| <p>Note that ESLint targets node, and is tricky to run in the | |
| browser. The | |
| <a href="https://github.com/UziTech/eslint-linter-browserify">eslint-linter-browserify</a> | |
| package may help with that (see | |
| <a href="https://github.com/UziTech/eslint-linter-browserify/blob/master/example/script.js">example</a>).</p> | |
| </dd> | |
| </dl> | |