在CodeMirror中配置JavaScript语法高亮遇扩展识别错误求助

尝试为CodeMirror 6添加JavaScript语法高亮，导入@codemirror/lang-javascript并将javascript()加入extensions数组时，始终报错：

Uncaught (in promise) Error: Unrecognized extension value in extension set ([object Object])

引发错误的代码片段：

CodeMirror(
  `console.log('hello');
1+2`,
  {
    extensions: [myDefaultTheme, /* javascript() // 启用此行即报错 */]
  }
);

完整可复现代码：

CODEMIRROR_VERSION = "^6.0.1";
esmImport = pkg => import(`https://cdn.skypack.dev/${pkg}`);
esmCodeMirror = (mod) =>
  esmImport(
    "@codemirror/" +
    (mod.indexOf("@") >= 0 ?
      mod : `${mod}@${CODEMIRROR_VERSION}`)
  );
loadCodeMirrorModules = async entries => {
  const repo = Object.create(null)
  const loadToRepo = async key => {
    const module = await esmCodeMirror(key)
    repo[key] = module
  }
  await Promise.all(entries.map(loadToRepo))
  return repo
}

loadCodeMirrorModules([
  "view",
  "state",
  "language",
  "commands",
  "search",
  "autocomplete",
  "lang-javascript"
]).then(async cmImports => {
  let myDefaultTheme = cmImports.view.EditorView.theme({
    '&': {
      fontFamily: 'Consolas, "Roboto Mono", monospace',
      fontSize: '14px',
      height: '200px',
      border: '1px solid #ddd',
    },
  })
  let CodeMirror = async (doc = "", config = {}) => {
    const extensions = config.extensions ?? [];
    const keymaps = config.keymaps ?? [];

    const {
      highlightSpecialChars,
      keymap,
      drawSelection,
      highlightActiveLine
    } =
    cmImports.view;
    const {
      Prec
    } = cmImports.state;
    let state = cmImports.state.EditorState.create({
      doc,
      extensions: [
        cmImports.view.lineNumbers(),
        highlightSpecialChars(),
        drawSelection(),
        highlightActiveLine(),
        keymap.of([
          ...cmImports.commands.defaultKeymap,
          ...cmImports.search.searchKeymap,
          ...keymaps
        ]),
        ...extensions
      ]
    });
    const view = new cmImports.view.EditorView({
      state
    });
    const el = view.dom;
    el.value = view.state.doc.toString();
    return el;
  };
  let javascript = cmImports['lang-javascript'].javascript;
  let d = await CodeMirror(
    `console.log('hello');
1+2`, {
      extensions: [myDefaultTheme]
    }
  );
  document.body.insertBefore(d, document.body.firstChild);
})

错误原因 #

你遗漏了CodeMirror 6语法高亮的核心依赖扩展：syntaxHighlighting（来自language模块）。javascript()仅提供JavaScript的语法定义和语言规则，但需要配合syntaxHighlighting才能让编辑器识别并处理高亮逻辑，缺少它会导致javascript()返回的扩展被判定为无效对象。

修复步骤 #

1. 在创建EditorState的extensions数组中添加cmImports.language.syntaxHighlighting()
2. 正确将javascript()加入到extensions数组中
3. 移除多余的el.value = view.state.doc.toString();（EditorView会自动渲染内容，手动设置value无意义）

修改后的完整代码 #

CODEMIRROR_VERSION = "^6.0.1";
esmImport = pkg => import(`https://cdn.skypack.dev/${pkg}`);
esmCodeMirror = (mod) =>
  esmImport(
    "@codemirror/" +
    (mod.indexOf("@") >= 0 ?
      mod : `${mod}@${CODEMIRROR_VERSION}`)
  );
loadCodeMirrorModules = async entries => {
  const repo = Object.create(null)
  const loadToRepo = async key => {
    const module = await esmCodeMirror(key)
    repo[key] = module
  }
  await Promise.all(entries.map(loadToRepo))
  return repo
}

loadCodeMirrorModules([
  "view",
  "state",
  "language",
  "commands",
  "search",
  "autocomplete",
  "lang-javascript"
]).then(async cmImports => {
  let myDefaultTheme = cmImports.view.EditorView.theme({
    '&': {
      fontFamily: 'Consolas, "Roboto Mono", monospace',
      fontSize: '14px',
      height: '200px',
      border: '1px solid #ddd',
    },
  })
  let CodeMirror = async (doc = "", config = {}) => {
    const extensions = config.extensions ?? [];
    const keymaps = config.keymaps ?? [];

    const {
      highlightSpecialChars,
      keymap,
      drawSelection,
      highlightActiveLine
    } = cmImports.view;
    // 新增：解构获取syntaxHighlighting
    const { syntaxHighlighting } = cmImports.language;
    
    let state = cmImports.state.EditorState.create({
      doc,
      extensions: [
        cmImports.view.lineNumbers(),
        highlightSpecialChars(),
        drawSelection(),
        highlightActiveLine(),
        // 添加核心语法高亮扩展
        syntaxHighlighting(),
        keymap.of([
          ...cmImports.commands.defaultKeymap,
          ...cmImports.search.searchKeymap,
          ...keymaps
        ]),
        ...extensions
      ]
    });
    const view = new cmImports.view.EditorView({
      state
    });
    const el = view.dom;
    // 移除多余的value设置
    return el;
  };
  let javascript = cmImports['lang-javascript'].javascript;
  let d = await CodeMirror(
    `console.log('hello');
1+2`, {
      // 启用javascript语法高亮
      extensions: [myDefaultTheme, javascript()]
    }
  );
  document.body.insertBefore(d, document.body.firstChild);
})

内容的提问来源于stack exchange，提问作者Rainb