VSCode中SCSS文件父选择器嵌套类高亮异常求助

方法一：自定义语法高亮规则 #

1. 打开VSCode设置（快捷键Ctrl+,），搜索editor.tokenColorCustomizations，点击「编辑 in settings.json」。
2. 查看目标选择器的语法作用域：按下Ctrl+Shift+P，输入「Inspect Editor Tokens and Scopes」并执行，将光标放在&__recommendation上，记录显示的最精确的作用域（比如meta.selector.scss entity.name.tag.css）。
3. 在settings.json中添加自定义规则，将该作用域的颜色改为类选择器的黄色（以Dark+主题为例）：

"editor.tokenColorCustomizations": {
  "[Default Dark+]": {
    "textMateRules": [
      {
        "scope": "meta.selector.scss entity.name.tag.css", // 替换为你查到的作用域
        "settings": {
          "foreground": "#DCDCAA" // 类选择器默认黄色，可根据主题调整
        }
      }
    ]
  }
}

4. 保存设置后，SCSS文件中的&__xxx类选择器就会显示为黄色高亮。

方法二：使用第三方SCSS扩展 #

安装「Better SCSS」扩展，它对SCSS的嵌套语法高亮做了优化，默认就能正确识别&__recommendation这类派生类选择器，并赋予类选择器的高亮样式。

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