VS Code运行.glsl文件报错：TypeError: Cannot read properties of undefined (reading 'replace')

你的GLSL代码本身无语法问题（在twigl.app可正常运行），报错大概率是VS Code相关GLSL扩展的兼容性或配置问题，以下是针对性解决办法：

1. 修复GLSL Canvas扩展的uniform变量注入问题 #

部分版本的GLSL Canvas扩展对resolution、time这类内置uniform的自动注入存在bug，导致出现replace相关未定义错误。可以手动在代码顶部添加扩展识别的配置注释：

/*{ "canvas": true, "uniforms": { "resolution": "vec2", "time": "float" } }*/
precision highp float;
uniform vec2 resolution;
uniform float time;

// 你的原有代码...

添加后保存文件重新运行即可。如果仍无效，尝试降级GLSL Canvas扩展到v0.1.5版本（在扩展详情页点击“安装另一个版本”选择对应版本），旧版本兼容性更稳定。

2. 替换为Shader Toy GLSL扩展 #

如果GLSL Canvas的问题无法解决，直接更换扩展：

• 卸载GLSL Canvas，安装Shader Toy GLSL扩展
• 将文件后缀改为.frag
• 打开代码后点击右上角“Play”按钮即可运行，该扩展会自动处理resolution、time等uniform变量，无需额外配置。

3. 检查文件后缀与扩展优先级 #

确保文件使用.frag后缀，部分扩展对.glsl文件的识别逻辑存在问题，切换后缀后重启VS Code再尝试运行。同时可通过Shader languages support for VS Code扩展的语法检查功能，确认代码无隐藏语法问题。

4. 手动配置GLSL Canvas的运行模板 #

打开VS Code设置，搜索GLSL Canvas: Template，将默认模板替换为以下稳定模板：

<!DOCTYPE html>
<html>
<body>
<canvas id="glslCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/glsl-canvas-js@1.0.2/dist/umd/glsl-canvas.min.js"></script>
<script>
  const canvas = document.getElementById('glslCanvas');
  const glsl = new GLSLCanvas(canvas);
  glsl.load(`{{code}}`);
</script>
</body>
</html>

该模板能确保代码被正确加载，避免变量未定义错误。

内容的提问来源于stack exchange，提问作者Keyser