prettier-plugin-wgsl

0.1.9 verified Sat Apr 25 auth: no javascript

A Prettier plugin that formats WGSL (WebGPU Shading Language) files. Version 0.1.9 is the latest stable release. It uses Chevrotain for parsing and is inspired by prettier-plugin-glsl. Works with Prettier >=3.0.0 and ships TypeScript types. As WGSL is still evolving, this plugin may lag behind spec changes. It is the primary option for formatting WGSL code in WebGPU projects.

Common errors

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

cause The plugin is not installed or not in node_modules.

fix

Run npm install --save-dev prettier-plugin-wgsl

error Couldn't resolve parser 'wgsl' ↓

cause Prettier is older than 3.0.0 or plugin not loaded.

fix

Update Prettier to >=3.0.0 and add plugin to plugins config.

error Uncaught SyntaxError: Unexpected token ↓

cause WGSL syntax not supported by the plugin version.

fix

Update the plugin to latest version or report the issue on GitHub.

Warnings

gotcha Ensure Prettier version is >=3.0.0; older versions are incompatible. ↓

fix Upgrade Prettier to 3.0.0 or later.

gotcha The plugin may not support all WGSL syntax if the language spec has been updated after the plugin release. ↓

fix Check the plugin's GitHub repository for updates or open an issue.

gotcha The plugin must be listed in the 'plugins' array of Prettier config; simply installing is not enough. ↓

fix Add 'prettier-plugin-wgsl' to your Prettier configuration plugins array.

Install

npm install prettier-plugin-wgsl

yarn add prettier-plugin-wgsl

pnpm add prettier-plugin-wgsl

Imports

none
wrong
```
require('prettier-plugin-wgsl')
```
correct
```
npx prettier --write *.wgsl
```
This is a Prettier plugin, not a Node.js module. It is used via Prettier CLI or API by adding to plugins array.
prettier-plugin-wgsl
wrong
```
require('prettier-plugin-wgsl')
```
correct
```
plugins: ['prettier-plugin-wgsl']
```
In Prettier config file (JSON or JS), add the package name to the plugins array.

prettier

wrong

const prettier = require('prettier-plugin-wgsl')

correct

const prettier = require('prettier'); await prettier.format(code, { parser: 'wgsl', plugins: ['prettier-plugin-wgsl'] })

Use Prettier's API with plugin installed; specify parser: 'wgsl' to format WGSL code.

Quickstart

Shows how to install and configure the plugin, then format a WGSL file via CLI.

// Install: npm install --save-dev prettier prettier-plugin-wgsl
// Add to .prettierrc:
{
  "plugins": ["prettier-plugin-wgsl"],
  "semi": true
}
// Format a file:
// npx prettier --write shader.wgsl