1. 前言
前端开发离不开代码编辑器，而 CodeMirror 是一款非常优秀的代码编辑器，但是使用 CodeMirror 的过程中，我们通常需要进行大量的配置和二次开发。为了简化这个过程，我们可以使用一个 npm 包，即 vs-codemirror。这个 npm 包已经将 CodeMirror 集成进去了，并且还提供了一些常用的配置和扩展组件。在本文中，我们会详细介绍如何使用 vs-codemirror。
2. 安装和引入
我们可以通过 npm 安装 vs-codemirror：
npm install vs-codemirror
安装后，我们可以通过以下方式引入：
import { Controlled as CodeMirror } from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/htmlmixed/htmlmixed'顺便提一下，上述代码中，import 'codemirror/mode/javascript/javascript' 以及 import 'codemirror/mode/htmlmixed/htmlmixed' 的作用是加载 JavaScript 和 HTML mixed 两种语言的 CodeMirror 模式，如果需要加载其他的语言模式，可以到 codemirror/mode/ 目录下查找对应的文件。
3. 简单使用
使用 vs-codemirror 的方式和使用普通的 CodeMirror 并没有什么不同，我们可以创建一个简单的编辑器来体验一下：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ---------- -- ---------- - ---- -------------------
------ ---------------------------------------
------ -------------------------------------
-------- ----- -
----- ---------------- ------------------ - ------------
----- ---------- ------------ - ------------
----- --------- ----------- - ------------
------ -
-----
-------------------
-----------
----------------------
----------
----- -------------
------ ----------
------------ ----
--
------------------------ ----- ------ -- -
------------------------
--
--
-------------
-----------
----------------
----------
----- ------------
------ ----------
------------ ----
--
------------------------ ----- ------ -- -
------------------
--
--
------------
-----------
---------------
----------
----- ------
------ ----------
------------ ----
--
------------------------ ----- ------ -- -
-----------------
--
--
------
-
-
------ ------- ---上述代码中，我们创建了三个 CodeMirror 编辑器，分别用来编辑 JavaScript、HTML 和 CSS 代码。通过 value 和 options 属性，我们设置了它们的默认值和一些常用的选项，比如语言模式、主题、行号等。通过 onBeforeChange 事件，我们监听并更新了这三个编辑器的内容。
4. 使用扩展组件
除了基础的编辑器组件，vs-codemirror 还提供了一些扩展组件，比如代码折叠、格式化、自动补全等。这些扩展组件可以大大提高开发效率，让我们可以更加专注于功能实现。
和使用基础的编辑器组件一样，我们也可以通过引入相应的模块来使用扩展组件。以代码折叠为例，我们可以通过以下方式加载和使用：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ---------- -- ---------- - ---- -------------------
------ ---------------------------------------
------ -------------------------------------
------ ----------------------------------
------ --------------------------------
------ ----------------------------------
-------- ----- -
----- ---------------- ------------------ - ------------
----- ---------- ------------ - ------------
----- --------- ----------- - ------------
------ -
-----
-------------------
-----------
----------------------
----------
----- -------------
------ ----------
------------ -----
-------- -------------------------- -------------------------
----------- ----
--
------------------------ ----- ------ -- -
------------------------
--
--
-------------
-----------
----------------
----------
----- ------------
------ ----------
------------ -----
-------- -------------------------- -------------------------
----------- ----
--
------------------------ ----- ------ -- -
------------------
--
--
------------
-----------
---------------
----------
----- ------
------ ----------
------------ -----
-------- -------------------------- -------------------------
----------- ----
--
------------------------ ----- ------ -- -
-----------------
--
--
------
-
-
------ ------- ---在上述代码中，我们除了加载 JavaScript、HTML mixed 的语言模式之外，还加载了代码折叠相关的模块，包括 foldgutter、foldcode 和 brace-fold。同时，我们也在 options 属性中添加了 gutters 和 foldGutter 选项，用来配置折叠区域的显示。
5. 总结
在本文中，我们介绍了 npm 包 vs-codemirror 的使用方法，并通过示例代码演示了其基础使用和如何使用扩展组件。希望这篇文章能对你有所帮助，更多详细信息可以查看 vs-codemirror 文档，也可以查看 CodeMirror 官方文档，获取更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642681e8991b448e1554