Webstorm unterstützt die GLSL-Syntax

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

Wenn wir GLSL-Code schreiben und das Dokument in der HTML-Seite formatieren, weist der formatierte GLSL-Code mehr Zeilenumbrüche als erwartet auf, da Webstorm die GLSL-Syntax nicht richtig erkennen kann. Wie kann Webstorm die GLSL-Syntax richtig erkennen?

Schritt 1: Installieren Sie das GLSL-Syntax-Plugin. Gehen Sie in Webstorm zu Datei -> Einstellungen -> Plugins -> Marktplatz, um den GLSL-Support zu suchen und zu installieren. Starten Sie Webstorm nach der Installation neu.

Schritt 2: Fügen Sie dem Skript-Tag das richtige Typ-Tag hinzu.

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

An diesem Punkt kann Webstorm die GLSL-Syntax korrekt erkennen. Wenn Sie das Dokument erneut formatieren, kann Webstorm es auch korrekt identifizieren, ohne dass es zu Codeverwirrungen kommt.