Prettier Plugin for GLSL

0.2.5 verified Sat Apr 25 auth: no javascript

A Prettier plugin for formatting GLSL (OpenGL Shading Language) files. Version 0.2.5 is the latest stable release, built on Chevrotain parser with no external parsing dependencies. It supports Prettier 3.x and includes TypeScript type definitions. Key differentiators: automatic detection of common GLSL extensions, formatting of #define macros as top-level declarations, markdown formatting for /** comments, and high compatibility with Shadertoy shaders (95%+). Active development with potential breaking changes in any version.

Common errors

error Error: Couldn't resolve plugin "prettier-plugin-glsl" ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install --save-dev prettier-plugin-glsl' and ensure it appears in package.json devDependencies.

error Cannot find module 'prettier-plugin-glsl' ↓

cause Plugin is not installed or path resolution issue with Prettier 3.x plugin resolution.

fix

Verify installation: npm list prettier-plugin-glsl. If using Yarn PnP, add plugin to pluggable dependencies.

error [error] Invalid configuration file: "parser" option is not a valid parser name ↓

cause Typo in parser name, e.g., 'glsl' instead of 'glsl-parser'.

fix

Use correct parser name: "glsl-parser" as exported by the plugin.

error TypeError: prettier.getSupportInfo is not a function ↓

cause Using an older version of Prettier (<3.0.0) that doesn't support plugin API used by this plugin.

fix

Upgrade Prettier to version 3 or later: npm install prettier@latest

Warnings

breaking This plugin requires Prettier version ^3.0.0. It will not work with Prettier 2.x. ↓

fix Upgrade Prettier to version 3 or later: npm install prettier@latest

deprecated The plugin is in active development; breaking formatting changes may occur in any minor or patch version. ↓

fix Pin to a specific version if stability is required: "prettier-plugin-glsl": "0.2.5"

gotcha Files with .frag extension are recognized as JavaScript by default. Override the parser in Prettier config to format them as GLSL. ↓

fix Add overrides in Prettier config: { "overrides": [{ "files": ["*.frag"], "options": { "parser": "glsl-parser" } }] }

gotcha Complex #if/#else/#endif mixed with if/else can produce invalid output. The plugin treats preprocessor directives as statements, not as block modifiers. ↓

fix Restructure code to avoid mixing preprocessor conditionals with C-style if/else blocks, or manually verify formatting.

gotcha Plugin auto-recognizes only certain file extensions (e.g., .glsl, .vert, .frag). Custom extensions may require explicit parser option. ↓

fix Specify parser in Prettier config: { "overrides": [{ "files": ["*.custom"], "options": { "parser": "glsl-parser" } }] }

Install

npm install prettier-plugin-glsl

yarn add prettier-plugin-glsl

pnpm add prettier-plugin-glsl

Imports

default
wrong
```
const plugin = require('prettier-plugin-glsl')
```
correct
```
import plugin from 'prettier-plugin-glsl'
```
The plugin is a default export. Prettier auto-discovers plugins, so explicit import is usually unnecessary.

glsl-parser

wrong

import { glsl-parser } from 'prettier-plugin-glsl'

correct

import { parsers } from 'prettier-plugin-glsl'; const glslParser = parsers['glsl-parser'];

The parser name is a string key, not a named export. Access via parsers object.

printers

wrong

import printers from 'prettier-plugin-glsl/printers'

correct

import { printers } from 'prettier-plugin-glsl'

Printers are exported as a named export from the package root.

Quickstart

Installation, configuration, and basic formatting of a GLSL vertex shader file.

// Install prettier and plugin
// npm install --save-dev prettier prettier-plugin-glsl

// .prettierrc
{
  "plugins": ["prettier-plugin-glsl"],
  "overrides": [
    {
      "files": ["*.frag", "*.vert", "*.glsl"],
      "options": {
        "parser": "glsl-parser"
      }
    }
  ]
}

// Format all GLSL files in project
// npx prettier --write "**/*.{glsl,frag,vert}"

// Example input.vs
#version 330 core
layout(location = 0) in vec3 aPos;
void main()
{
gl_Position = vec4(aPos, 1.0);
}

// After formatting: npx prettier --write input.vs
// Output:
#version 330 core
layout(location = 0) in vec3 aPos;

void main() {
  gl_Position = vec4(aPos, 1.0);
}