webstorm支持GLSL语法

<script id="shader-vs">
    attribute vec3 v3Position;
    void main(void){
        gl_Position = vec4(v3Position, 1.0);
    }
</script>

当我们在HTML页面中编写GLSL代码并且格式化文档的时候，由于webstorm无法正确识别GLSL语法，导致格式化GLSL代码会出现超过预期的换行，如何让webstorm正确识别GLSL语法？

第一步：安装GLSL语法插件。在webstorm中File -> Settings -> Plugins -> Marketplace 搜索安装GLSL Support。安装后重启webstorm。

第二步：在script标签中加上正确的type标签。

// 顶点着色器
<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 v3Position;
    void main(void){
        gl_Position = vec4(v3Position, 1.0);
    }
</script>


// 片段着色器
<script id="shader-fs" type="x-shader/x-fragment">
    void main(void){
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>

到此，webstorm就可以正确识别GLSL语法。你再格式化文档的时候，webstorm也能正确识别不会导致代码错乱。