codemirror6 实现自定义代码提示

1、需求

       采用codemirror 6版本开发 ，要求：自定义代码提示 ，通过输入关键字，实现代码片段覆盖。

        类似于Vscode中输入VueInit ，显示代码片段：

1.  
   <template lang="">
2.  
   <div>
3.  
    
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   export default {
8.  
    
9.  
   }
10.  
    </script>
11.  
    <style lang="">
12.  
     
13.  
    </style>

         参考官网:CodeMirror Autocompletion Example 中的Providing Completions。

2、初始化

加载以下依赖包

1.  
   npm i codemirror
2.  
   npm i @codemirror/autocomplete
3.  
   npm i @codemirror/theme-one-dark

添加容器 并绑定id 

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

js中引用 

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

在onMounted初始化codemirror  ，并添加对应id

1.  
   const editor = new EditorView({
2.  
   doc: "Press Ctrl-Space in here...\n",
3.  
   extensions: [
4.  
   basicSetup,
5.  
   oneDark,
6.  
   ],
7.  
   parent: document.getElementById("coder"),
8.  
   options: {},
9.  
   });

3、设置代码提示

         其中from为当前位置 ， options为自定义提示列表。apply 为需求中提到的自定义代码，还有info 信息提示 等。

1.  
   function myCompletions(context) {
2.  
   let word = context.matchBefore(/\w*/)
3.  
   if (word.from == word.to && !context.explicit) return null;
4.  
   return {
5.  
   from: word.from,
6.  
   options: [
7.  
   { label: "match", type: "keyword" },
8.  
   { label: "hello", type: "variable", info: "(World)" },
9.  
   { label: "magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro" },
10.  
    ],
11.  
    };
12.  
    }

        最后，将codemirror绑定自定义的代码提示，使用extensions

1.  
   const editor = new EditorView({
2.  
   doc: "Press Ctrl-Space in here...\n",
3.  
   extensions: [
4.  
   basicSetup,
5.  
   oneDark,
6.  
   autocompletion({ override: [myCompletions] })
7.  
   ],
8.  
   parent: document.getElementById("coder"),
9.  
   options: {
10.  
    },
11.  
    });

4、其他优化 

        代码回显：

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

        以及代码更新监测 ：

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

5、实现效果

这篇好文章是转载于：学新通技术网