本文详细介绍如何在 CodeMirror 6 中实现自定义代码提示功能。通过引入 @codemirror/autocomplete 包，配置 autocompletion 扩展，并重写 completion 函数，可实现关键字匹配与代码片段覆盖。文章涵盖初始化配置、自定义提示列表定义、apply 方法应用及代码更新监听，帮助开发者在 Vue 项目中实现类似 VSCode 的智能输入体验。
1、需求
基于 CodeMirror 6 版本进行开发，核心目标是实现自定义代码提示功能。具体表现为当用户输入特定关键字时，系统能够自动匹配并插入预设的代码片段，实现代码覆盖效果。
该功能的效果类似于在 VSCode 中输入 'VueInit' 关键字时，编辑器自动显示并插入对应的代码片段模板。
<template lang="">
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>实现思路可参考 CodeMirror 官方文档中关于 'Providing Completions' 的示例说明。
2、初始化
首先需要在项目中加载必要的依赖包。
npm i codemirror
npm i @codemirror/autocomplete
npm i @codemirror/theme-one-dark在 HTML 结构中创建一个容器元素，并为其绑定唯一的 ID 以便后续绑定编辑器实例。
<div id="codemir" ></div> 在 JavaScript 文件中引入所需的模块。
import { basicSetup, EditorView } from "codemirror";
import { oneDark } from "@codemirror/theme-one-dark"; //黑色主题编辑器
import { autocompletion } from "@codemirror/autocomplete"; 在 Vue 组件的 onMounted 生命周期钩子中初始化 CodeMirror 编辑器实例，并将其实例绑定到之前创建的容器 ID 上。
const editor = new EditorView({
doc: "Press Ctrl-Space in here...\n",
extensions: [
basicSetup,
oneDark,
],
parent: document.getElementById("coder"),
options: {},
});3、设置代码提示
在自定义的提示函数中，'from' 参数表示当前光标位置，'options' 用于定义自定义的提示选项列表。'apply' 方法用于执行需求中提到的代码片段插入逻辑，同时 'info' 字段可用于显示额外的提示信息。
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" },
],
};
} 最后，通过 extensions 将 CodeMirror 编辑器与自定义的代码提示功能进行绑定，确保提示功能生效。
const editor = new EditorView({
doc: "Press Ctrl-Space in here...\n",
extensions: [
basicSetup,
oneDark,
autocompletion({ override: [myCompletions] })
],
parent: document.getElementById("coder"),
options: {
},
});4、其他优化
关于代码回显的实现方式。
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: { },
});5、实现效果
总结
本文介绍了 CodeMirror 6 实现自定义代码提示的方法。如需了解更多相关内容，可搜索本站过往文章或继续浏览后续教程，感谢支持。