<p>VSCode默认不识别.wgsl文件，需安装Microsoft官方WGSL扩展（ms-vscode.wgsl）并配置files.associations映射，如".wgsl": "wgsl"，且JS/TS中模板字符串内WGSL需配合WGSL Literal插件及/ wgsl */注释才能高亮。</p>
VSCode 默认不识别 .wgsl 文件，也不会高亮、补全或校验 WGSL 代码——哪怕你已经在写 WebGPU 应用。必须手动安装扩展并配置语言绑定，否则编辑器只会把它当纯文本处理。
装对扩展：优先选 Microsoft 官方的 WGSL 插件
社区早期有多个实验性 WGSL 插件（如 taiyuuki.vscode-wgsl-renderer），但截至 2026 年，唯一提供稳定语法高亮 + 基础补全 + 错误诊断的是 Microsoft 官方发布的 WGSL 扩展（ID：ms-vscode.wgsl）。
- 在扩展面板搜索
WGSL，认准发布者是 Microsoft，不要选名字相似但作者为个人的插件 - 安装后必须重启窗口（
Cmd+Shift+P→Developer: Reload Window），否则.wgsl文件仍无高亮 - 该插件不提供实时预览或编译功能，只负责编辑时的语言支持；若需渲染预览，得额外装
vscode-wgsl-renderer
files.associations 必须显式配置，否则扩展不生效
即使装了官方 WGSL 插件，VSCode 也不会自动把 shader.wgsl 关联到 WGSL 模式——它默认只认 .wgsl 后缀，但很多项目用的是 .wgsl.txt、.sh 或无后缀内联字符串，这时就得靠配置兜底。
- 打开
Cmd+Shift+P→Preferences: Open Settings (JSON) - 添加以下映射，覆盖常见变体：
"files.associations": { "*.wgsl": "wgsl", "*.wgsl.txt": "wgsl", "shader.*": "wgsl" } - 如果文件已打开但右下角显示“Plain Text”，点击它手动选
WGSL，再检查是否高亮恢复
JS/TS 中模板字符串里的 WGSL 怎么高亮？用 WGSL Literal 插件
WebGPU 项目常把 WGSL 写在 JS/TS 的模板字符串里（比如通过 device.shaderModule(...) 加载），此时官方 WGSL 插件完全不起作用——它只处理独立文件。
- 必须额外安装
WGSL Literal插件（ID：webgpu.wgsl-literal） - 高亮触发条件严格：字符串前必须带块注释
/* wgsl */，不能是行注释// wgsl - 示例有效写法：
const code = /* wgsl */` @vertex fn main() -> @builtin(position) vec4f { return vec4f(0); } `; - 该插件目前仍不支持补全或跳转定义，仅高亮；若想补全，只能把 WGSL 抽成独立
.wgsl文件再import
最易被忽略的一点：WGSL 语法本身在快速演进（比如 @stage(vertex) 已逐步被 @vertex 替代），而插件更新滞后。如果你发现某条合法 WGSL 语法被标红，先检查插件是否为最新版，再确认你写的是否符合当前规范草案——别急着改代码，可能只是插件没跟上。
