如何为VS Code编写Pug混入调用的语法高亮注入？

问题说明 #

需要为Pug中+module.开头的混入调用区块添加JS语法高亮，参照VS Code官方文档配置了tmLanguage.json和package.json但未生效，目标是借鉴官方Pug中script/style标签的区块实现逻辑完成功能。

示例目标效果：

//- Example Pug file
+module.
  const myVar = {}; // 此处需显示JS语法高亮

现有配置问题分析 #

1. Scope名称不匹配：tmLanguage.json中scopeName设为source.pug，与目标语法的scope冲突，且和package.json中声明的K-scaffold-sfc.injection不一致，导致注入未被VS Code识别。
2. 选择器范围不当：原injectionSelector未排除注释、字符串等不需要匹配的区域，可能导致误匹配或优先级问题。
3. 结束正则逻辑缺陷：原end正则^(?!(\\1\\s)|\\s*$)未正确处理区块内的空行，导致区块提前结束。
4. 冗余配置：注入语法无需设置fileTypes字段，该字段属于独立语法的配置项。

修复后的配置代码 #

1. 修正tmLanguage.json #

{
    "scopeName": "k-scaffold.injection",
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "injectionSelector": "L:source.pug -comment.line.double-slash.pug -string.quoted.single.pug -string.quoted.double.pug",
    "name": "k-scaffold",
    "patterns": [
        {"include": "#module-js"}
    ],
    "repository": {
        "module-js": {
            "comment": "Module JS Section",
            "begin": "^(\\s*)(\\+)(module)(\\.)",
            "beginCaptures": {
                "2": {"name": "storage.type.function.pug"},
                "3": {"name": "entity.name.function.k-scaffold"},
                "4": {"name": "punctuation.separator.dot.pug"}
            },
            "end": "^(?!\\1\\s|\\s*$)",
            "contentName": "meta.embedded.block.js",
            "patterns": [
                {
                    "include": "source.js"
                }
            ]
        }
    }
}

2. 修正package.json #

{
  "name": "k-scaffold",
  "displayName": "k-scaffold",
  "description": "Syntax highlighting and code snippets for K-scaffold pug files.",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.82.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "contributes": {
    "grammars": [{
      "injectTo": ["source.pug"],
      "scopeName": "k-scaffold.injection",
      "path": "./syntaxes/k-scaffold.tmLanguage.json"
    }]
  }
}

扩展支持SCSS #

若需要为+module.scss.区块添加SCSS高亮，可在tmLanguage.json的repository中新增以下配置：

"module-scss": {
    "comment": "Module SCSS Section",
    "begin": "^(\\s*)(\\+)(module\\.scss)(\\.)",
    "beginCaptures": {
        "2": {"name": "storage.type.function.pug"},
        "3": {"name": "entity.name.function.k-scaffold"},
        "4": {"name": "punctuation.separator.dot.pug"}
    },
    "end": "^(?!\\1\\s|\\s*$)",
    "contentName": "meta.embedded.block.scss",
    "patterns": [
        {
            "include": "source.scss"
        }
    ]
}

同时在patterns数组中添加{"include": "#module-scss"}。

验证方法 #

1. 将修正后的配置放入扩展对应目录，运行Developer: Reload Window重新加载VS Code。
2. 打开示例Pug文件，检查+module.下方的代码是否正常显示JS语法高亮。

内容的提问来源于stack exchange，提问作者Scott Casey