vscode默认不识别.glsl/.frag/.vert/.wgsl文件及js内联着色器字符串,需安装cadenas的glsl插件、手动关联后缀到glsl/wgsl语言模式、关闭glsl.validate校验,三步缺一不可。

VSCode 默认不识别 .vert/.frag/.wgsl 文件,也不解析 JS 里的着色器字符串 —— 装对插件、配对语言模式、关掉错误校验,三步缺一不可。
装哪个 GLSL 插件才不翻车
别装带 “linter”“validator”“LSP” 字样的多能插件(比如 vscode-glsl-lint 或 Shader languages support for VS Code),它们在 Three.js 热更新时容易卡住,#include <common></common> 会直接报红。实际最稳的是 GLSL(作者:cadenas,ID:cadenas.vscode-glsllint)—— 名字带 linter,但默认只做语法高亮,不启动校验器。
- 安装后打开一个
.frag文件,右下角显示Plain Text,点击它 →Configure File Association for '.frag'→ 输入glsl回车 - 同理处理
.vert和.glsl;如果是 WebGPU 项目,.wgsl要关联到wgsl,不是glsl - 如果已装了其他着色器插件(比如
Shader Tools或ms-vscode.shader-language-support),建议禁用,避免语言模式被抢注
JS 里写 vertexShader: `...` 怎么高亮
VSCode 不会自动猜模板字符串是 GLSL,必须手动标注。只认一种格式:// language=glsl(等号前后不能有空格),且必须紧贴反引号开头第一行。
- ✅ 正确写法:
const vertexShader = `// language=glsl varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`; - ❌ 错误写法:
/* @lang glsl */、/** @lang glsl */、// @language=glsl—— 全部无效 - 如果用
require('./shader.vert'),确保.vert已绑定glsl模式,否则导入内容仍是纯文本
为什么 #define 行总标红:Unexpected token #
这是 GLSL 插件默认启用了 glslangValidator 校验,但它把 Three.js 常用的预处理器指令(尤其是 #include <common></common>)当成了语法错误。
- 打开 VSCode 设置(
Cmd+Shift+P→Preferences: Open Settings (JSON)) - 添加配置:
"GLSL.validate": false - 保存后重开文件,红波浪线立刻消失 —— 高亮保留,校验关闭,不影响日常编码
- 如需偶尔验证,可单独运行命令:
glslangValidator -S vert shader.vert,不依赖插件
真正容易忽略的是语言模式绑定时机:改完 settings.json 或点选关联后,必须重新打开文件(不是刷新),VSCode 才会重新加载语言服务。开着旧标签页硬等,高亮永远不会出现。











