本文由 简悦SimpRead 转码，原文地址 bpruitt-goddard.github.io
本系列文章详细介绍了创建Visual Studio Code扩展并添加语法的过程......。
- 第1部分 - 介绍
- 第2部分 - 转换到Yaml
本系列文章详细介绍了创建Visual Studio Code扩展的过程，该扩展为Mermaid编程语言添加了语法高亮，在这里可以找到。
Mermaid语言是一种用于创建图表的类似标记的语言。这些图表可以使用现有的扩展Mermaid Preview在VS Code中创建和渲染。然而，这些图表脚本并没有语法高亮。这通常不是什么大问题，但不经常处理Mermaid脚本意味着该语言没有完全内化，可能会出现简单的语法错误。语法高亮有助于避免这种情况。
起始点
像VS Code中的大多数东西一样，创建一个新的语法高亮扩展有大量的文档，这是个很好的起点。语法高亮是通过TextMate语法文件定义的。这些语法文件基本上是一个重合表达式的列表，为匹配的文本指定一个 "范围"。
因为它使用与Sublime Text、Atom和其他编辑器相同的语法，所以有大量的现有语法可以作为例子。在这种情况下，甚至有一个现有的Mermaid的语法这里，它使用的是稍加修改的TextMate语法。这足以成为一个开始工作的起点。
测试/验证
不幸的是，似乎没有一种方法可以轻松地对TextMate语法文件进行单元测试。留下的唯一选择是目测结果。为了使之更容易，我们做了两件事。
首先，制作了一组小的美人鱼图，包括所有不同的语法特征。在查看任何修改的输出时，这将被用作参考。该图被添加到版本库的README中，以便让其他贡献者使用相同的模板。三种类型的图各做了一个。作为奖励，每张图旁边都有一张截图，以预览每个语法组件的变化和进度。还有一个好处，如果使用比较二进制文件的git diff工具，可以对截图进行比较，以确保没有引入回归问题。
其次，使测试/验证尽可能地简单和快速是很重要的。在这种情况下，能够查看任何变化的结果而不需要重新安装或加载扩展是最好的。为了做到这一点，整个资源库被存储在VS Code 扩展文件夹中。这意味着扩展总是有最新的代码。在开发过程中，保持一个Visual Studio窗口打开，里面有上一点的样本代码，并运行Developer: 重新加载窗口命令。这将刷新扩展并反映最新的变化。
添加功能/支持
在让最初的几件（测试）作品工作后，下一步是确定如何知道所有需要着色的东西。在创建一套演示不同语法特征的美人鱼图时，创建了一个包括所有特征的检查表。因此，添加功能意味着沿着检查表（针对每一种图表类型）逐一实现它们。这使我们很容易跟踪进度，并看到样本图逐渐被突出。
接下来的步骤
在完成大部分功能后，由于json模板和每个regex表达式所需的转义，开始变得难以阅读这个巨大的文件。本系列的第二部分将解释转换为YML的过程。
