尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

如何用 vscode-textmate 调试语法:inspect 工具与 DebugFlags 调试模式全解

如何用 vscode-textmate 调试语法:inspect 工具与 DebugFlags 调试模式全解 如何用 vscode-textmate 调试语法inspect 工具与 DebugFlags 调试模式全解【免费下载链接】vscode-textmateA library that helps tokenize text using Text Mate grammars.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-textmate如果你写过或维护过 TextMate 语法文件.tmLanguage / .json一定经历过这样的痛苦明明规则写得没错代码高亮却不对或者某个正则把编辑器卡死出现死循环。vscode-textmate 作为 VS Code 官方使用的 TextMate 语法解释器内置了两套强大的调试手段——inspect 命令行工具与DebugFlags 调试模式。本文将从零开始手把手教你如何用 vscode-textmate 调试语法快速定位规则匹配问题让语法调试不再靠猜。为什么语法调试这么难TextMate 语法基于 oniguruma 正则引擎一条规则能否命中、匹配的优先级如何、规则栈如何入栈出栈……这些细节在运行时完全黑盒。vscode-textmate 提供的调试能力正好可以把整个过程扒开给你看inspect 工具逐行展示 tokenization 结果和完整的规则栈内容DebugFlags 调试模式输出每一步匹配的底层日志甚至能发现死循环这两者配合几乎能解决 90% 的语法调试问题。第一步准备调试环境 ️获取项目源码git clone https://gitcode.com/gh_mirrors/vs/vscode-textmate cd vscode-textmate npm install编译项目npm run compile编译成功后out/目录下会生成编译产物inspect 工具和调试入口都依赖它。准备测试素材你需要准备两样东西语法文件要调试的 .tmLanguage 或 .json 语法测试文件一段能触发问题的示例代码项目中自带大量语法样本比如 test-cases/themes/syntaxes/ 目录下的 JavaScript.tmLanguage.json、TypeScript.tmLanguage.json 等可以直接拿来练手。第二步使用 inspect 工具逐行分析语法 inspect 工具是什么inspect 是 vscode-textmate 自带的命令行诊断工具源码位于 src/tests/inspect.ts。它能加载一个或多个语法文件然后对你指定的代码文件逐行进行 tokenization并把结果完整打印出来。最简单的调用方式npm run inspect -- 语法文件路径 测试代码路径以项目自带的语法为例npm run inspect -- test-cases/themes/syntaxes/JavaScript.tmLanguage.json test-cases/themes/tests/test.js多语法文件同时调试如果语法依赖其他语法比如通过 include 引用了外部语法可以一次性传入多个语法文件npm run inspect -- 主语法文件 依赖语法1 依赖语法2 测试代码调用规则是最后一个参数是测试代码文件前面的都是语法文件。输出内容解读 inspect 的输出非常直观每一行都会打印TOKENIZING LINE 1: |function sayHello(name) {|紧接着是这一行结尾的规则栈快照展示当前处于哪些规则中LINE END RULE STACK CONTAINS 3 RULES: * source.js -- [1,1] source.js * meta.function.js -- [5,2] source.js, meta.function.js * meta.block.js -- [9,3] source.js, meta.function.js, meta.block.js这里能看到每条规则的debugName、规则 ID 和实例 ID以及当前生效的 scope 列表。如果你发现某行结束后规则栈里多了一个不该存在的规则或者 scope 顺序不对问题根源基本就找到了。第三步开启 DebugFlags 调试模式查看底层日志 DebugFlags 是什么inspect 工具已经足够好用但它的输出是结果级的。如果你想看到每一次匹配尝试的细节就需要 DebugFlags 调试模式。它定义在 src/debug.tsexport const DebugFlags { InDebugMode: (typeof process ! undefined !!process?.env?.[VSCODE_TEXTMATE_DEBUG]) };DebugFlags 调试模式默认通过环境变量VSCODE_TEXTMATE_DEBUG开启无需修改任何代码。最简单的开启方法在运行命令前设置环境变量即可VSCODE_TEXTMATE_DEBUGtrue npm run inspect -- 语法文件路径 测试代码路径DebugFlags 能输出什么开启后你会看到大量scanNext开头的日志记录每个扫描位置的匹配过程见 src/grammar/tokenizeString.tsscanNext 0: |function sayHello(name) {| token: |function| * source.js * meta.function.js * storage.type.function.js这些日志覆盖了✅ 每次正则匹配的位置和内容✅ 规则入栈、弹栈的时机✅ 每个 token 产生的完整 scope 列表✅ 语法注入injections的收集结果✅ 死循环警告见下文在代码中手动开启如果你在测试环境比如 Node 脚本中想强制开启也可以像 inspect 一样直接赋值import * as debug from ./debug; debug.DebugFlags.InDebugMode true;这样即使没有设置环境变量调试日志也会输出。第四步实战排查——语法死循环问题 ⚠️死循环是 TextMate 语法最常见的坑一条规则同时匹配了 begin 和 end但两个正则的匹配位置没有前进导致推入又弹出无限重复。DebugFlags 调试模式对这种情况有专门的处理当检测到语法在没有前进的情况下推入并弹出了规则时会输出红色错误日志[1] - Grammar is in an endless loop - Grammar pushed popped a rule without advancing同时vscode-textmate 内部会采取防御措施假设这是语法作者的失误恢复到推入前的状态并终止本行解析防止整个程序卡死对应代码见 tokenizeString.ts 中的处理逻辑。排查思路开启 DebugFlags 调试模式重现问题在日志中找到死循环发生时正在处理的规则检查该规则的 begin / end 正则确认它们能否消耗至少一个字符第五步inspect 与 DebugFlags 的搭配技巧 场景推荐工具原因查看 scope 是否正确inspect输出干净规则栈一目了然排查匹配优先级问题inspect DebugFlags底层日志能看清先匹配了哪条规则定位死循环DebugFlags有专门的无进展检测日志调试多语法 include 关系inspect支持一次加载多个语法文件两个工具都支持 JSON 和 PLIST 两种格式的语法文件vscode-textmate 会根据文件后缀自动选择解析方式见 src/parseRawGrammar.ts。常见问题 FAQ ❓Q运行 inspect 提示缺少参数Ainspect 要求至少传入一个语法文件和一个测试代码文件即至少两个参数。QDebugFlags 开启后日志太多怎么筛选A可以用 grep 过滤关键行比如只查看 token 输出VSCODE_TEXTMATE_DEBUGtrue npm run inspect -- 语法 代码 21 | grep token:QWindows 上如何设置环境变量APowerShell 使用$env:VSCODE_TEXTMATE_DEBUGtrueCMD 使用set VSCODE_TEXTMATE_DEBUGtrue。Q调试时如何对照官方测试结果A项目 test-cases/themes/tests/ 目录下每个测试文件都配有.result文件可以对比你的调试输出与预期结果快速确认语法改动的影响。总结 vscode-textmate 的 inspect 工具与 DebugFlags 调试模式是语法作者和编辑器插件开发者必备的两把手术刀inspect帮你从宏观上看到每一行代码的 token 与规则栈DebugFlags帮你从微观上追踪每一次正则匹配与规则推入弹出下次再遇到高亮异常、规则不生效或编辑器卡死别急着瞎改语法先跑一遍 inspect、开一次 DebugFlags让数据告诉你问题在哪。掌握这套调试方法你的 TextMate 语法调试效率至少翻一倍【免费下载链接】vscode-textmateA library that helps tokenize text using Text Mate grammars.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-textmate创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表