codemirror6实现自定义代码提示效果实例

<template lang="">
  <div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>

npm i codemirror
npm i @codemirror/autocomplete
npm i @codemirror/theme-one-dark

 <div id="codemir" ></div> 

 
import { basicSetup, EditorView } from "codemirror";
import { oneDark } from "@codemirror/theme-one-dark"; //黑色主题编辑器
import { autocompletion } from "@codemirror/autocomplete"; 

const editor =   new EditorView({
      doc: "Press Ctrl-Space in here...\n",
      extensions: [
        basicSetup, 
        oneDark, 
      ],
      parent: document.getElementById("coder"),
      options: {},
    });

function myCompletions(context) {
  let word = context.matchBefore(/\w*/)
  if (word.from == word.to && !context.explicit) return null;
  return {
    from: word.from,
    options: [
      { label: "match", type: "keyword" },
      { label: "hello", type: "variable", info: "(World)" },
      { label: "magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro" },
    ],
  };
} 

const editor =   new EditorView({
      doc: "Press Ctrl-Space in here...\n",
      extensions: [
        basicSetup, 
        oneDark,
        autocompletion({ override: [myCompletions] })
      ],
      parent: document.getElementById("coder"),
      options: { 
      },
    });

editor.dispatch({
  changes: { from: 0, to: editor.state.doc.length, insert: content },
}); //插入content 

const editor =   new EditorView({
      doc: "Press Ctrl-Space in here...\n",
      extensions: [
        basicSetup, 
        oneDark,
        autocompletion({ override: [myCompletions] }),
        EditorView.updateListener.of((v) => {
           console.log(v.state.doc.toString()) //监测得到的最新代码 
        }),
      ],
      parent: document.getElementById("coder"),
      options: { },
});