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
![GROQ for VS Code](https://cdn.sanity.io/images/3do82whm/next/e0a0f9bb668481675eb9096a533ea1b08fc724c3-1200x900.png?w=3840&q=75&fit=clip&auto=format)
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.
![](https://image.mux.com/6FNugy02y4OIlSXs9YadmPHPXfOttM7Ai/thumbnail.webp?time=0)
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.