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> 会直接报红。实际最稳的是 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>）当成了语法错误。
- 打开 VSCode 设置（
Cmd+Shift+P→Preferences: Open Settings (JSON)） - 添加配置：
"GLSL.validate": false - 保存后重开文件，红波浪线立刻消失 —— 高亮保留，校验关闭，不影响日常编码
- 如需偶尔验证，可单独运行命令：
glslangValidator -S vert shader.vert，不依赖插件
真正容易忽略的是语言模式绑定时机：改完 settings.json 或点选关联后，必须重新打开文件（不是刷新），VSCode 才会重新加载语言服务。开着旧标签页硬等，高亮永远不会出现。
