如何在VS Code中使函数定义/声明与函数调用的颜色区分开？

方法一：通过用户自定义设置实现（无需修改主题文件） #

• 打开VS Code设置界面：使用快捷键Ctrl+,（Windows/Linux）或Cmd+,（Mac），或点击左下角设置图标选择「设置」。
• 在设置搜索框输入editor.tokenColorCustomizations，点击「编辑 in settings.json」。
• 在settings.json中添加针对JavaScript的语法token颜色规则：

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.function",
        "settings": {
          "foreground": "#ff0000" // 函数定义/声明设为红色
        }
      },
      {
        "scope": "variable.function",
        "settings": {
          "foreground": "#00ff00" // 函数调用设为绿色
        }
      }
    ]
  }
  

• 保存设置后，回到JavaScript文件即可看到效果：function foo()中的foo显示为红色，foo()中的foo显示为绿色。

方法二：针对特定主题修改颜色规则 #

如果只想让修改对当前使用的主题生效，可以在配置中指定主题名称：

"editor.tokenColorCustomizations": {
  "[Monokai]": { // 替换为你正在使用的主题名称
    "textMateRules": [
      {
        "scope": "entity.name.function",
        "settings": {
          "foreground": "#ff0000"
        }
      },
      {
        "scope": "variable.function",
        "settings": {
          "foreground": "#00ff00"
        }
      }
    ]
  }
}

注意事项 #

• 不同编程语言的语法token scope可能存在差异，可通过「Developer: Inspect Editor Tokens and Scopes」工具查看：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），搜索并选择该工具，点击目标函数名即可查看对应的scope。
• 自定义设置会覆盖主题的默认颜色规则。

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