如何在Visual Studio Code中扩展JavaScript语法并为参数类型着色？

嘿，我来帮你搞定这个需求！要让VS Code支持JavaScript函数参数里的类型标注（比如function setName( String name)这种写法）并实现语法着色，核心是通过自定义TextMate语法扩展来实现——毕竟VS Code的语法高亮系统是基于TextMate的。下面是一步步的具体操作：

1. 搭建VS Code扩展项目 #

首先你需要创建一个基础的VS Code扩展项目，用官方的生成器最快：

• 先全局安装Yeoman和VS Code扩展生成器：

  npm install -g yo generator-code
  

• 运行生成器并选择「New Syntax Highlight」：

  yo code
  

  跟着向导填项目名称（比如js-param-type-highlight）、选择关联的语言（选JavaScript），生成器会帮你创建好基础的扩展结构。

2. 编写自定义语法规则 #

找到项目里的tmLanguage.json文件（JSON格式比老式的.tmLanguage更易编辑），这是定义语法匹配规则的核心文件。我们需要添加一条规则，精准匹配函数参数列表里的类型标注：

在patterns数组里新增如下规则：

{
  "name": "storage.type.js.custom",
  "match": "\\b(String|Number|Boolean|Object|Array)\\b(?=\\s+\\w+\\))",
  "captures": {
    "1": { "name": "storage.type.js.custom" }
  }
}

• 正则说明：\b(String|Number|Boolean|Object|Array)\b匹配常见的类型关键字，(?=\s+\w+\))是正向预查，确保后面跟着参数名和右括号，避免误匹配代码其他位置的同名单词。
• name字段是这个匹配项的作用域（scope），我们自定义一个storage.type.js.custom，方便后续关联颜色样式。

3. 配置扩展关联与颜色 #

关联语法到JavaScript文件 #

打开package.json，确保contributes里的grammars配置正确关联到JavaScript文件：

"contributes": {
  "grammars": [
    {
      "language": "javascript",
      "scopeName": "source.js",
      "path": "./syntaxes/js-param-type-highlight.tmLanguage.json",
      "embeddedLanguages": {
        "meta.embedded.block.js": "javascript"
      }
    }
  ]
}

这里的scopeName要和你tmLanguage.json里的scopeName保持一致。

设置语法着色 #

有两种方式给自定义作用域上色：

方式一：在扩展里内置颜色配置

直接在package.json里添加tokenColors配置，用户安装扩展后就能直接看到效果：

"contributes": {
  // ... 其他已有配置
  "tokenColors": [
    {
      "scope": "storage.type.js.custom",
      "settings": {
        "foreground": "#FF79C6",
        "fontStyle": "italic"
      }
    }
  ]
}

方式二：让用户自定义颜色

你也可以告诉用户，在VS Code的settings.json里添加配置，自己选择喜欢的颜色样式：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "storage.type.js.custom",
      "settings": {
        "foreground": "#BD93F9",
        "fontStyle": "bold"
      }
    }
  ]
}

4. 测试扩展 #

按F5启动VS Code的调试窗口，新建一个JavaScript文件，输入你的示例代码：

function setName( String name) {
  console.log(name);
}

function calculate( Number a, Boolean isAdd) {
  return isAdd ? a + 10 : a - 10;
}

你应该能看到String、Number、Boolean这些类型标注已经按照你设置的颜色显示了。如果需要支持更多自定义类型，只需要修改tmLanguage.json里正则的类型列表就行啦！

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