https://github.com/sanity-io/vscode-sanity

Visual Studio Code extension for developing applications powered by Sanity.io
https://github.com/sanity-io/vscode-sanity

Last synced: 4 months ago
JSON representation

Visual Studio Code extension for developing applications powered by Sanity.io

• Host: GitHub
• URL: https://github.com/sanity-io/vscode-sanity
• Owner: sanity-io
• License: mit
• Created: 2018-12-11T21:50:37.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-09-12T18:18:32.000Z (10 months ago)
• Last Synced: 2025-03-10T08:13:50.032Z (4 months ago)
• Language: TypeScript
• Size: 1.6 MB
• Stars: 51
• Watchers: 10
• Forks: 9
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vscode-sanity

Extension for [Visual Studio Code](https://code.visualstudio.com/) that makes developing applications for [Sanity.io](https://www.sanity.io/) that much more awesome.

## Features

### GROQ syntax highlighting

Syntax highlighting for the GROQ query language is available in the following situations:

- Files with the `.groq` extension

- Fenced code blocks in Markdown with the `groq` tag

- Tagged template literals with the `groq` tag

- Queries using the `defineQuery` method

- Template literals prefixed with the `/* groq */` comment

- Template literals starting with a `// groq` comment

### Execute GROQ-queries

When GROQ-queries are detected, the extension will allow you to run the query and displays the result as JSON in a separate tab.

The project ID and dataset used is determined by finding `sanity.cli.ts` in the workspace. If multiple files are found, the extension will prompt you to select one.

If the GROQ file/query has any variables, then extension asks for a relative filename of a JSON-file containing an object of key-value mappings. It autofills the param filename based on the current file with a `.json` extension, if it exists.

![Execute GROQ in VS Code](https://raw.githubusercontent.com/sanity-io/vscode-sanity/main/screenshots/previewofquery.png)

## Usage

Install the [VSCode Sanity.io Extension](https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity). This extension adds syntax highlighting for GROQ-files and `groq` tags.

## Development

1.  Clone the repository - https://github.com/sanity-io/vscode-sanity

2.  `npm install`

3.  Open it in VSCode

4.  Go to the debugging section and run the launch program "Extension"

5.  This will open another VSCode instance with extension enabled

6.  Open a file that should be syntax highlighted

7.  Make changes to the extension code, then press (`Ctrl+R` or `Cmd+R` on Mac) in the syntax highlighted file to test the changes

## License

MIT