codemirror

CodeMirror 6 Best Practices

This document outlines the definitive best practices for developing with CodeMirror. We exclusively target CodeMirror 6 (CM6). Any reference to CodeMirror 5 (CM5) is for historical context only; CM5 must not be used in new development and should be actively migrated away from.

Code Organization and Structure

1. Always Use CodeMirror 6

CM6 is a complete rewrite with a modern, modular architecture. It offers superior performance, extensibility, and maintainability. CM5 is deprecated and unsupported.

❌ BAD: Using CodeMirror 5

// Old CM5 global API
var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){}",
  mode: "javascript"
});

✅ GOOD: Using CodeMirror 6

import { EditorState } from "@codemirror/state";
import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";

const view = new EditorView({
  state: EditorState.create({
    doc: "console.log('Hello CM6!');",
    extensions: [basicSetup, javascript()],
  }),
  parent: document.body,
});

2. Import Only What You Need (Modular Imports)

CM6 is designed for tree-shaking. Only import the specific packages and modules required to minimize bundle size and improve load times.

❌ BAD: Importing monolithic packages (if they existed for CM6)

// Hypothetical bad example: importing a giant 'codemirror-all' package
import { EditorView, EditorState, basicSetup, javascript, ... } from "codemirror-all";

✅ GOOD: Granular, specific imports

import { EditorState } from "@codemirror/state"; // Core state management
import { EditorView, keymap } from "@codemirror/view"; // Core view rendering
import { defaultKeymap } from "@codemirror/commands"; // Standard editing commands
import { javascript } from "@codemirror/lang-javascript"; // Language support

3. Configure Exclusively via Extensions

All editor features, from basic setup to complex language services, must be added as extensions to the EditorState. Avoid direct DOM manipulation or non-extension-based configuration.