Inspect Editor Tokens and Scopes

❗️The note is generated by DeepSeek.

Developer: Inspect Editor Tokens and Scopes 是 VSCode 中一个非常实用的开发者工具命令，它可以帮助你深入了解代码在编辑器中的语法标记和范围信息。

🎯 命令用途

这个命令主要用于：

• 诊断语法高亮问题 - 找出为什么某些代码没有按预期显示颜色
• 自定义主题配置 - 获取准确的 scope 名称来修改特定语法元素的样式
• 理解语法结构 - 了解代码如何被解析和标记

🔧 使用方法

1. 打开命令面板：

   • 使用快捷键 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)

2. 执行命令：

   • 输入 Developer: Inspect Editor Tokens and Scopes 并选择它
   • 或者直接使用快捷键 Ctrl+Shift+Alt+P (Windows) 或 Ctrl+Shift+P (Linux) 或 Cmd+Shift+P (Mac)

3. 查看信息：

   • 将光标移动到代码中的任意位置
   • 会弹出一个信息面板显示该位置的详细信息

📊 信息面板内容

弹出的面板会显示以下重要信息：

基本信息

• Language - 当前文件的语言（如 JavaScript、Python 等）
• File name - 文件名和路径

语法标记信息

foreground: #颜色值
background: #颜色值
fontStyle: 样式（如 italic、bold 等）

TextMate Scopes（关键信息）

这是一个从最具体到最一般的 scope 层次结构列表，例如：

source.js
meta.function.js
meta.parameters.js
variable.parameter.js

💡 实际应用示例

场景：修改 JavaScript 函数参数的样式

1. 将光标放在函数参数上
2. 执行 Inspect Tokens and Scopes 命令
3. 看到 scope 列表中有 variable.parameter.js
4. 在 settings.json 中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "variable.parameter.js",
            "settings": {
                "foreground": "#FF6B6B",
                "fontStyle": "bold"
            }
        }
    ]
}

场景：取消特定注释的斜体

1. 将光标放在注释上
2. 执行命令查看 scope
3. 可能会看到 comment.line.double-slash.js 或类似 scope
4. 在设置中针对性地取消斜体：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment.line.double-slash.js",
            "settings": {
                "fontStyle": "" // 取消斜体
            }
        }
    ]
}

🚀 高级技巧

1. 范围匹配

你可以使用不同层级的 scope：

• comment - 匹配所有注释
• comment.line - 匹配行注释
• comment.line.double-slash.js - 只匹配 JS 的双斜杠注释

2. 调试主题问题

如果某个语法元素没有正确高亮，使用此命令可以：

• 检查是否被正确识别为预期的 scope
• 查看当前应用的样式属性
• 确认颜色主题是否覆盖了该 scope

3. 自定义语法高亮

当你安装新的语法扩展或创建自定义主题时，这个工具可以帮助你精确控制每个语法元素的显示。

⚠️ 注意事项

• 不同语言和语法扩展提供的 scope 名称可能有所不同
• 某些主题可能会覆盖默认的 scope 样式
• 信息面板中的 scope 列表是从最具体到最一般的，配置时应使用最具体的那个以获得精确控制

这个命令是 VSCode 主题定制和语法高亮调试的利器，掌握了它，你就能对编辑器的显示效果进行精细化的控制了！