webstorm suporta sintaxe GLSL

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

Quando escrevemos códigos GLSL em páginas HTML e formatamos documentos, porque o webstorm não consegue reconhecer corretamente a sintaxe GLSL, o código GLSL formatado terá quebras de linha que excedem as expectativas Como fazer o webstorm reconhecer corretamente a sintaxe GLSL?

Passo 1: Instale o plug-in de sintaxe GLSL. No webstorm, pesquise e instale o Suporte GLSL em Arquivo -> Configurações -> Plugins -> Marketplace. Reinicie o webstorm após a instalação.

Etapa 2: adicione a tag de tipo correta à tag de script.

// 顶点着色器
<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>

Neste ponto, o webstorm pode reconhecer corretamente a sintaxe GLSL. Quando você formata o documento novamente, o webstorm também pode identificá-lo corretamente sem causar confusão no código.