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也能正確識別不會導致代碼錯亂。