codemirror与Vue 2：addons-DEV365 开发者社区

在Web开发领域，将强大的工具集成到项目中可以大大增强用户体验并简化您的工作流程。如果您当前正在使用VUE 2框架中的基本CodeMirror设置（如果没有，则可以找到有关使用Vue 2 here设置CodeMirror的指南，则您可能会遇到共同的困境。与您习惯的常规代码编辑器不同，集成的代码编辑器可能不会表现出预期的行为。这种差异会导致挫败感，但不要担心，因为这篇文章会深入研究这个问题的复杂性，并就如何克服它提供见解。

以下是您应该真正添加到代码编辑器的一些功能：

自动关闭括号：

括号应在键入时自动关闭。这可以如下：

第一个导入Closebrackets addon，例如： import 'codemirror/addon/edit/closebrackets.js'

 Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
        })

现在，IT Autoclosebrackets功能已在您的代码编辑器中启用

匹配标签和自动关闭标签：

如果您启用一种包含诸如HTML之类的标签的语言，则这些语言很有用。

首先从addons文件夹导入它们：
import 'codemirror/addon/edit/matchtags.js'
import 'codemirror/addon/edit/closetag.js'
然后将它们添加到配置选项：

Codemirror.fromTextArea(document.getElementById('codeEditor'), {
            lineNumbers: true,
            line: true,
            theme: 'dracula',
            tabSize: 4,
            mode: `text/javascript`,
            autoCloseBrackets: true,
            matchTags: true,
            autoCloseTags: true,
        })

同样，您可以添加更多插件。现在，您知道如何将附加子包含到代码编辑器中，应该通过文档的这一部分：Link，此处给出了所有其他附件。

。