vscode 鼠标放代码上显示代码什么时候创建_vscode 源码精读（二）代码编辑器的DOM结构初探...-CSDN博客

本文链接：https://blog.csdn.net/weixin_35935249/article/details/113668371

vscode 中最核心和最重要的内容是它的代码编辑器：monaco editor，monaco editor 不仅是 vscode 的一部分，并且可以作为独立的 web 组件供大家免费使用。关于 monaco editor 的集成详细文档，大家可以查阅微软的官方文档。

var newModel = monaco.editor.createModel(data, 'some id here!');
var editor = monaco.editor.create(document.getElementById('editor'), {
    model: newModel,
});

monaco editor 的创建过程如上所示，可以看出 monaco editor 有两个核心的对象： model 和 editor。model 部分是存在代码字符串数据的对象，它的内部结构非常复杂，我们会在后面的文章中深入。editor 就是整个代码编辑器。

为了一步一步探索编辑器内部的神秘面纱，我们先从它的 DOM 结构开始。

最外层结构：

容器元素
- 编辑器主体
  - overflow-guard，编辑器的主要区域
  - overflowingContentWidgets，与右键菜单相关的内容
  - context-view, 与右键菜单相关的内容

对于创建 monaco editor 的时候，有一个隐性的约束，容器的高度必须是确定的，编辑器本事会支持部分的宽度自适应。在创建好 Editor 的时候，editor 会在容器元素上添加两个属性：

data-keybinding-context="1", 标示这个编辑器绑定快捷键的方式
data-mode-id="", 标示编辑器中的 model id

overflow-guard 编辑器的主要区域：

margin：左侧的代码行号区区，上面列有代码行号，折叠代码图标以及加断点标记。
editor-scrollable：主要代码工作区域
scroll-decoration：滚动阴影装饰窄条，当开始滚动时出现在顶部
textarea：鼠标输入框
monaco-editor-background textAreaCover line-numbers （主要起装饰作用，具体作用暂时未知，以后补充）
overlayWidgets：按 ctrl + F 弹出来的查找替换搜索框在这里面
minimap：右侧的代码小地图

textarea 元素

textarea 元素是一种可以自由控制光标位置显示的技巧。

代码之所以在编辑器中会显示出花花绿绿的各种语法高亮，那是因为它们本身是由一个一个span组成的，并且不是 input 输入框。当我们在编辑器中输入代码时，需要一个光标显示在对应的位置，这个时候就可以控制一个 textarea 元素，它的宽度是 1px，高度对应字体高度，将它的位置设置到当前的位置，并且设置为 focus 状态了，这个时候界面上就会在对应位置上出现一闪一闪的光标。