{"id":20366,"library":"prettier-plugin-glsl","title":"Prettier Plugin for GLSL","description":"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.","status":"active","version":"0.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/NaridaL/glsl-language-toolkit","tags":["javascript","formatter","glsl","prettier","plugin","typescript"],"install":[{"cmd":"npm install prettier-plugin-glsl","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-glsl","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-glsl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - required for the plugin to function","package":"prettier","optional":false}],"imports":[{"note":"The plugin is a default export. Prettier auto-discovers plugins, so explicit import is usually unnecessary.","wrong":"const plugin = require('prettier-plugin-glsl')","symbol":"default","correct":"import plugin from 'prettier-plugin-glsl'"},{"note":"The parser name is a string key, not a named export. Access via parsers object.","wrong":"import { glsl-parser } from 'prettier-plugin-glsl'","symbol":"glsl-parser","correct":"import { parsers } from 'prettier-plugin-glsl'; const glslParser = parsers['glsl-parser'];"},{"note":"Printers are exported as a named export from the package root.","wrong":"import printers from 'prettier-plugin-glsl/printers'","symbol":"printers","correct":"import { printers } from 'prettier-plugin-glsl'"}],"quickstart":{"code":"// Install prettier and plugin\n// npm install --save-dev prettier prettier-plugin-glsl\n\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-glsl\"],\n  \"overrides\": [\n    {\n      \"files\": [\"*.frag\", \"*.vert\", \"*.glsl\"],\n      \"options\": {\n        \"parser\": \"glsl-parser\"\n      }\n    }\n  ]\n}\n\n// Format all GLSL files in project\n// npx prettier --write \"**/*.{glsl,frag,vert}\"\n\n// Example input.vs\n#version 330 core\nlayout(location = 0) in vec3 aPos;\nvoid main()\n{\ngl_Position = vec4(aPos, 1.0);\n}\n\n// After formatting: npx prettier --write input.vs\n// Output:\n#version 330 core\nlayout(location = 0) in vec3 aPos;\n\nvoid main() {\n  gl_Position = vec4(aPos, 1.0);\n}\n","lang":"typescript","description":"Installation, configuration, and basic formatting of a GLSL vertex shader file."},"warnings":[{"fix":"Upgrade Prettier to version 3 or later: npm install prettier@latest","message":"This plugin requires Prettier version ^3.0.0. It will not work with Prettier 2.x.","severity":"breaking","affected_versions":"<3.0.0 (of prettier)"},{"fix":"Pin to a specific version if stability is required: \"prettier-plugin-glsl\": \"0.2.5\"","message":"The plugin is in active development; breaking formatting changes may occur in any minor or patch version.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Add overrides in Prettier config: { \"overrides\": [{ \"files\": [\"*.frag\"], \"options\": { \"parser\": \"glsl-parser\" } }] }","message":"Files with .frag extension are recognized as JavaScript by default. Override the parser in Prettier config to format them as GLSL.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Restructure code to avoid mixing preprocessor conditionals with C-style if/else blocks, or manually verify formatting.","message":"Complex #if/#else/#endif mixed with if/else can produce invalid output. The plugin treats preprocessor directives as statements, not as block modifiers.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Specify parser in Prettier config: { \"overrides\": [{ \"files\": [\"*.custom\"], \"options\": { \"parser\": \"glsl-parser\" } }] }","message":"Plugin auto-recognizes only certain file extensions (e.g., .glsl, .vert, .frag). Custom extensions may require explicit parser option.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev prettier-plugin-glsl' and ensure it appears in package.json devDependencies.","cause":"Plugin not installed or not in node_modules.","error":"Error: Couldn't resolve plugin \"prettier-plugin-glsl\""},{"fix":"Verify installation: npm list prettier-plugin-glsl. If using Yarn PnP, add plugin to pluggable dependencies.","cause":"Plugin is not installed or path resolution issue with Prettier 3.x plugin resolution.","error":"Cannot find module 'prettier-plugin-glsl'"},{"fix":"Use correct parser name: \"glsl-parser\" as exported by the plugin.","cause":"Typo in parser name, e.g., 'glsl' instead of 'glsl-parser'.","error":"[error] Invalid configuration file: \"parser\" option is not a valid parser name"},{"fix":"Upgrade Prettier to version 3 or later: npm install prettier@latest","cause":"Using an older version of Prettier (<3.0.0) that doesn't support plugin API used by this plugin.","error":"TypeError: prettier.getSupportInfo is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}