Skip to main content

Set up CodeMirror using basicSetup

Setting up CodeMirror with basicSetup looks like this:

import { basicSetup, EditorView } from "codemirror";
import {
  javascript,
  javascriptLanguage,
  scopeCompletionSource,
} from "@codemirror/lang-javascript";

const parent = document.querySelector("#editor");
const doc = `function microsoftShuffle(arr) {
  return arr.slice().sort(function () {
    return 0.5 - Math.random();
  });
}`;
const extensions = [
  basicSetup,
  javascript(),
  javascriptLanguage.data.of({
    autocomplete: scopeCompletionSource(globalThis),
  }),
];

window.editor = new EditorView({
  doc,
  extensions,
  parent,
});

CodePen