语法高亮失效主因是grammar未生效或Tree-sitter不兼容:先查状态栏是否为Plain text,再运行Editor: Log Cursor Scope确认scope是否为source.js等;主题需适配Tree-sitter作用域链,变量覆盖优于硬写color,且class必须带.syntax--前缀。

语法高亮失效时,先确认 grammar 是否生效
全灰无色不是主题问题,而是 Atom 根本没把文件当代码解析。右下角状态栏显示 Plain text 或 text.html.vue 就是铁证。执行 Ctrl+Shift+P → 输入并运行 Editor: Log Cursor Scope,光标停在函数名上,看控制台输出的首项 scope:要是 source.js 或 source.vue 才算对;如果只有 text.plain,说明 language 插件没装、没启用,或文件没保存(新建未保存文件永远是 text.plain)。
选对 syntax theme,别只看名字“炫不炫”
atom-material-syntax 和 atom-one-light 都依赖 grammar 输出的作用域链,但变量定义差异大:atom-material-syntax 默认启用 @syntax-color-storage-type、@syntax-color-decorator 等细分变量,对 @ 装饰器、JSX tag、TS 类型等新语法支持更早;atom-one-light 的 @syntax-color-function 是 #61AEEF,饱和度低,且不默认覆盖 support.class.ts 这类 Tree-sitter 新作用域。如果你用 language-rust-bundled(Tree-sitter),旧主题的 CSS 选择器 .syntax--support.syntax--function 可能完全不匹配,得手动加 .syntax--support.syntax--function.syntax--std 才行。
自己写 styles.less 时,作用域链必须完整且不加 !important
直接写 .entity.name.function { color: #ff0088; } 会失效——缺了 .syntax-- 前缀和层级嵌套。正确写法是:.syntax--source.syntax--js .syntax--entity.syntax--name.syntax--function。所有 class 名前必须带 .syntax--,少一个就断链。改颜色优先覆盖变量:@syntax-color-function: #ff0088;,而不是硬写 color;加 !important 会破坏主题继承,导致后续插件(如 highlight-selected)样式被锁死。
Tree-sitter 启用后,老语法主题可能大面积失色
Atom 1.60+ 默认启用 Tree-sitter,它输出的作用域名(如 support.function.std.rust)和 TextMate grammar(如 support.function)不兼容。现象是:函数名变灰、关键字不着色、甚至整个文件只剩注释有色。临时解法是关 Tree-sitter:Settings → Core → Use Tree Sitter Parsers → uncheck;长期方案是换支持 Tree-sitter 的主题(如 one-dark-syntax-tree-sitter),或手动在 styles.less 中补全新作用域选择器。这点最容易被忽略——你调了一小时颜色,其实只是语法解析引擎换了。











