Query your data inside VS Code
Get syntax highlighting and query execution for GROQ with the Sanity.io extension for VS Code.
Published
Knut Melvær
Head of Developer Community and Education

The Sanity.io extension for VS Code brings syntax highlighting and execution of GROQ queries. Super useful if you want to quickly see the data result of a query while your building, troubleshooting, or experimenting with code. The code execution feature was put together during the virtual all-hands hackathon that we had earlier this fall.
Try it out by installing the Sanity.io VS Code extension.

Using CodeLens (a feature that annotates code with useful contextual actions), you'll get an option to “Execute Query” whenever VS Code recognizes a GROQ query. You make it do so in a couple of different ways:
- Put the query in a file with the
.groq
extension - Add fenced code blocks in Markdown with the
groq
tag - Use tagged template literals with the
groq
tag - Prefixed with the
/* groq */
comment - Start a template literals with a
// groq
comment
// Markdown code block
```groq
*[_type == "post"]{title}
```
// Tagged template literal
import groq from 'groq'
const query = groq`*[_type == "post"]{title}`
// Prefixed template literal
const query = /* groq */`*[_type == "post"]{title}`
// Template literal starting with comment
const query = `//groq
*[_type == "post"]{
title,
authors[]->{name}
}
`
The extension also ships with configuration to turn off the CodeLens feature, and to whether to open query results in a new tab as an editable JSON file. If you use VS Code for your Sanity.io projects, you should also check out the Sanity snippet extension for quickly building out schemas.