Prettier Plugin for GROQ

0.2.5 verified Sat Apr 25 auth: no javascript

A Prettier plugin for formatting GROQ queries used with Sanity.io. Version 0.2.5 is the latest stable release. Release cadence is irregular, driven by community contributions. Key differentiators: opinionated formatting following Prettier philosophy, groups object properties by value type, respects printWidth and inlineShorthandProperties option. Supports filters, projections, order, select, and conditional expressions. Does not preserve whitespace or inline comments. Standard Prettier plugin installation; auto-detected by editors when installed locally.

Common errors

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

cause Prettier plugin not installed or not added to plugins array in config.

fix

Run 'npm install --save-dev prettier-plugin-groq' and add '"plugins": ["prettier-plugin-groq"]' to .prettierrc.

error Unexpected token '//' (or similar comment error) ↓

cause Inline comments are not supported by the GROQ parser used by this plugin.

fix

Remove inline comments from .groq files before formatting.

error Unknown option: groqInlineShorthandProps (or typo) ↓

cause Option name is misspelled.

fix

Use correct option name: 'groqInlineShorthandProperties' in .prettierrc.

Warnings

gotcha Inline comments in GROQ queries are ignored and will be removed during formatting. ↓

fix Avoid inline comments; use block comments /* ... */ if needed, but they are also unsupported. Consider reformulating the query without comments.

gotcha Map components like `* | ([ like, this ])` are not supported by the parser and will cause errors. ↓

fix Rewrite map components using filter syntax or ensure the GROQ parser supports them. They are currently unsupported.

gotcha Expansion operator `...` behavior may not be preserved exactly as input due to AST-based formatting. ↓

fix Review formatted output to ensure expansion semantics are correct. The plugin groups and reorganizes properties.

gotcha Option name `groqInlineShorthandProperties` is case-sensitive and must be spelt correctly. ↓

fix Use the exact option name with correct capitalization.

Install

npm install prettier-plugin-groq

yarn add prettier-plugin-groq

pnpm add prettier-plugin-groq

Imports

Plugin
wrong
```
const prettierPluginGroq = require('prettier-plugin-groq')
```
correct
```
import * as prettierPluginGroq from 'prettier-plugin-groq'
```
Prettier plugins are typically specified in config files, not imported directly. The plugin auto-registers when installed.

Config

wrong

// incorrect: plugins: ['prettier-plugin-groq'] missing in config

correct

// .prettierrc
{ "plugins": ["prettier-plugin-groq"], "groqInlineShorthandProperties": false }

Add the plugin name to the plugins array in .prettierrc or prettier.config.js to enable GROQ formatting.

groqInlineShorthandProperties
wrong
```
// typo: "groqInlineShorthandProps": true
```
correct
```
// .prettierrc
{ "groqInlineShorthandProperties": true }
```
Option name is groqInlineShorthandProperties, not groqInlineShorthandProps.

Quickstart

Installs the plugin, configures Prettier, formats a .groq file with inline shorthand enabled.

npm install --save-dev prettier prettier-plugin-groq

echo '{
  "plugins": ["prettier-plugin-groq"],
  "groqInlineShorthandProperties": true
}' > .prettierrc

cat << 'EOF' > query.groq
*[_type == "movie" && popularity > 10] | order(popularity desc){ _id, title, popularity }
EOF

npx prettier --write query.groq

cat query.groq
# Output:
# *[_type == "movie" && popularity > 10] | order(popularity desc) {
#   _id,
#   title,
#   popularity
# }