glsl插件需手动绑定.frag等后缀才能高亮,右下角显示plain text即未生效;three.js变量如vuv不补全是正常设计,因属运行时注入而非glsl标准;"highlight_line":true需配色方案含linehighlight规则才有效。

GLSL 插件装了但 .frag 文件还是白的?不是插件没起作用,是 Sublime 根本没把文件当 GLSL 处理——后缀没绑定,高亮就等于没开。
右下角显示 Plain Text,说明语法没生效
Sublime 不会自动把 .frag、.vert、.glsl 等后缀关联到 GLSL 语法。装完插件只加了能力,不手动绑定就无任何效果。
- 打开一个
.frag文件,看右下角显示的是不是Plain Text或误判成ShellScript(尤其.s后缀常被抢注) - 立刻点击右下角语言名 → 选
Open all with current extension as…→ 找到名称含GLSL的项(不是OpenGL Shading Language这种旧名,以你安装后实际列出为准) - 如果菜单里压根没有
GLSL选项:按Ctrl+Shift+P输入Package Control: List Packages,搜GLSL确认是否真已安装成功 -
.fs、.vs、.geom等扩展名也得单独绑定,不能只绑.frag - 绑定后新建同后缀文件会自动匹配,但已打开的旧文件需手动点右下角重新选一次语法
Three.js 变量如 vUv、cameraPosition 不补全?这不是 bug,是设计如此
GLSL 插件只遵循 OpenGL 官方规范,而 vUv、vNormal、cameraPosition 是 Three.js 在运行时注入的变量,不属于 GLSL 语言本身。任何标准 GLSL 插件都不会为它们提供补全或高亮。
- 别指望靠插件“修复”这个,补全是静态分析,而这些变量是动态注入的
- 可行替代方案:用 Sublime 的
snippets功能自建常用变量片段,例如新建vUv.sublime-snippet,内容为<content>vUv</content><tabtrigger>vuv</tabtrigger>,保存到Packages/User/目录下 - 顶部加伪注释如
// @vertex: vUv, vNormal; @fragment: cameraPosition, diffuseColor能骗部分解析器识别 scope,但可能干扰真实编译,慎用 - 更可靠的做法:放弃编辑器补全,改用
SpectorJS在浏览器中实时 inspect 着色器输入变量,它看到的才是运行时真实上下文
"highlight_line": true 开了但当前行没颜色?配色方案缺定义
启用 "highlight_line": true 只是打开开关,真正决定颜色的是你当前 .sublime-color-scheme 文件里有没有 lineHighlight 这条规则。很多主题(尤其是轻量级或自定义主题)根本没定义它。
- 验证方法:打开任意代码文件,按
Ctrl+Shift+P输入Developer: Show Scope Name,把光标放在某一行中间,看输出里有没有region.line—— 没有就说明主题缺失该规则 - 解决方式:用
PackageResourceViewer: Open Resource打开当前主题文件,在"rules"数组末尾插入一条带"scope": "region.line"和"background"的对象 - 注意字段名必须是
lineHighlight(首字母大写,大小写敏感),且值必须是合法 color 格式(推荐hsla()或十六进制,rgb()在新版中可能失效) - 改完保存,无需重启,切换文件再切回来即可生效
最常被忽略的一点:GLSL 高亮和 Three.js 开发是两层事——前者管写,后者管跑。编辑器里看着再漂亮,着色器逻辑错、变量名拼错、加载时机不对,浏览器里照样黑屏。外置 .frag 文件不生效,90% 是浏览器缓存或 THREE.FileLoader 加载失败,而不是编辑器配置问题。











