{product.name}
$\ {product.price.toFixed(2)}
{/* Quantity selector */} setQuantity(parseInt(e.target.value))} min={1} />{title}: {count}
}`,
extensions: [basicSetup, javascript({ jsx: true, typescript: true })]
})
```
--------------------------------
### autoCloseTags
Source: https://github.com/codemirror/lang-javascript/blob/main/README.md
Extension that automatically inserts JSX close tags when a '>' or '/' is typed.
```APIDOC
## autoCloseTags
### Description
Extension that will automatically insert JSX close tags when a `>` or `/` is typed.
### Method
N/A (Constant)
### Endpoint
N/A
### Response
#### Success Response (200)
- **Extension** - The auto-close tags extension.
```
--------------------------------
### JavaScript Code Snippets in CodeMirror
Source: https://context7.com/codemirror/lang-javascript/llms.txt
Provides code snippet completions for common JavaScript patterns like functions, loops, and class definitions. Snippets use tab stops for navigation.
```javascript
import { EditorView, basicSetup } from "codemirror"
import { javascriptLanguage, snippets } from "@codemirror/lang-javascript"
import { LanguageSupport } from "@codemirror/language"
import { completeFromList, ifNotIn } from "@codemirror/autocomplete"
// View available snippets
console.log("JavaScript snippets:", snippets.map(s => s.label))
// Output: ["function", "for", "for", "do", "while", "try", "if", "if", "class", "import", "import"]
// Create custom setup with only snippets (no local completion)
const snippetCompletion = completeFromList(snippets)
const jsWithSnippets = new LanguageSupport(javascriptLanguage, [
javascriptLanguage.data.of({
autocomplete: ifNotIn(["String", "Comment"], snippetCompletion)
})
])
const editor = new EditorView({
parent: document.getElementById("editor"),
doc: `// Type "for" and press Tab to expand a for loop snippet
// Type "function" and press Tab to expand a function definition
// Type "class" and press Tab to expand a class definition
// Type "try" and press Tab to expand a try/catch block
// Type "import" and press Tab to expand an import statement
`,
extensions: [basicSetup, jsWithSnippets]
})
// Snippets expand to (use Tab to navigate between placeholders):
// function → function name(params) { ... }
// for → for (let index = 0; index < bound; index++) { ... }
// for (of) → for (let name of collection) { ... }
// class → class name { constructor(params) { ... } }
// try → try { ... } catch (error) { ... }
// if → if (...) { ... }
// import → import {names} from "module"
```
--------------------------------
### TypeScript Code Snippets in CodeMirror
Source: https://context7.com/codemirror/lang-javascript/llms.txt
Extends JavaScript snippets with TypeScript-specific patterns for interfaces, type aliases, and enums. Use these for quick access to common type definition patterns.
```typescript
import { EditorView, basicSetup } from "codemirror"
import { typescriptLanguage, typescriptSnippets } from "@codemirror/lang-javascript"
import { LanguageSupport } from "@codemirror/language"
import { completeFromList, ifNotIn } from "@codemirror/autocomplete"
// View TypeScript-specific snippets (in addition to JavaScript snippets)
const tsOnlySnippets = typescriptSnippets.filter(
s => !["function", "for", "do", "while", "try", "if", "class", "import"].includes(s.label)
)
console.log("TypeScript-specific snippets:", tsOnlySnippets.map(s => s.label))
// Output: ["interface", "type", "enum"]
const tsSnippetCompletion = completeFromList(typescriptSnippets)
const tsWithSnippets = new LanguageSupport(typescriptLanguage, [
typescriptLanguage.data.of({
autocomplete: ifNotIn(["String", "Comment"], tsSnippetCompletion)
})
])
const editor = new EditorView({
parent: document.getElementById("editor"),
doc: `// Type "interface" and press Tab to define an interface
// Type "type" and press Tab to create a type alias
// Type "enum" and press Tab to define an enum
// TypeScript snippets expand to:
// interface → interface name { ... }
// type → type name = type
// enum → enum name { ... }
`,
extensions: [basicSetup, tsWithSnippets]
})
```
--------------------------------
### Custom Scope Autocompletion for JavaScript
Source: https://context7.com/codemirror/lang-javascript/llms.txt
Set up CodeMirror's JavaScript autocompletion to use a custom scope object, allowing suggestions for your application's specific APIs, services, and utilities. This is useful for providing context-aware completions within your application's codebase.
```javascript
// Complete from a custom scope (e.g., your application's API)
const appScope = {
app: {
version: "1.0.0",
init() { console.log("App initialized") },
shutdown() { console.log("App shutdown") }
},
services: {
database: {
connect() {},
query() {},
disconnect() {}
},
cache: {
get() {},
set() {},
clear() {}
}
},
utils: {
formatDate(date) { return date.toISOString() },
parseJSON(str) { return JSON.parse(str) },
debounce(fn, ms) {}
}
}
const appCompletion = scopeCompletionSource(appScope)
const customEditor = new EditorView({
parent: document.getElementById("custom-editor"),
doc: `// Type \
```
```javascript
// Type \
```
--------------------------------
### javascriptLanguage - Base JavaScript Language Definition
Source: https://context7.com/codemirror/lang-javascript/llms.txt
The core `LRLanguage` instance for JavaScript, based on the Lezer JavaScript parser. Use this directly for fine-grained control over language configuration or to build custom extensions.
```APIDOC
## javascriptLanguage
### Description
The base `LRLanguage` instance for JavaScript, providing core parsing, indentation rules, code folding, bracket closing, and comment token definitions. It serves as the foundation for custom language configurations.
### Method
`javascriptLanguage` (Read-only property)
### Usage
This property is typically used to create custom `LanguageSupport` objects or to access language-specific data.
### Request Example
```javascript
import { javascriptLanguage } from "@codemirror/lang-javascript"
import { LanguageSupport } from "@codemirror/language"
import { completeFromList } from "@codemirror/autocomplete"
// Create custom completions
const customCompletions = completeFromList([
{ label: "myVariable", type: "variable" }
])
// Create custom language support
const customJSSupport = new LanguageSupport(javascriptLanguage, [
javascriptLanguage.data.of({ autocomplete: customCompletions })
])
// Check if JavaScript language is active
const isJSActive = javascriptLanguage.isActiveAt(editor.state, 0, -1)
```
### Response
Returns an `LRLanguage` object representing the core JavaScript language definition.
```
--------------------------------
### Auto-Close JSX Tags in CodeMirror
Source: https://context7.com/codemirror/lang-javascript/llms.txt
Automatically inserts closing JSX tags when typing `>` or `/`. This extension is included by default when using `javascript({ jsx: true })`.
```javascript
import { EditorView, basicSetup } from "codemirror"
import { javascript, autoCloseTags } from "@codemirror/lang-javascript"
// autoCloseTags is automatically included when using javascript({ jsx: true })
const editor = new EditorView({
parent: document.getElementById("editor"),
doc: `function Example() {
return (
{/* Type and the closing will be inserted automatically */}
{/* Type ![]()
*/}
)
}`,
extensions: [basicSetup, javascript({ jsx: true })]
})
// Or add autoCloseTags manually to a custom setup
import { jsxLanguage } from "@codemirror/lang-javascript"
import { LanguageSupport } from "@codemirror/language"
const customJsxSupport = new LanguageSupport(jsxLanguage, [autoCloseTags])
const customEditor = new EditorView({
parent: document.getElementById("custom-editor"),
doc: `<>
| {col.header} | ))}
|---|
| {col.render ? col.render(item[col.key], item) : String(item[col.key])} | ))}