Boost Your Workflow with VSCode Snippets for SanityPress

Read time: 2 minutes
Mitchell Christ
Mitchell Christ
a cubicle covered in sticky notes all over the wall and room. a fat worker with an afro typing on his old PC computer with the text "VSCode Snippets" on the computer screen, IMAX 70mm
GitHub Copilot? Nah, I have Sticky Note Copilot.

Building dynamic websites can be time-consuming, but the right tools can streamline your process and elevate your productivity. That’s why I’m excited to announce the latest enhancement for SanityPress (the best Next.js + Sanity.io starter template): custom VSCode snippets designed to make development faster and easier.

What Are VSCode Snippets?

VSCode snippets are pre-defined templates of code you can insert with just a few keystrokes. Instead of repeatedly typing boilerplate code or referencing documentation, snippets let you focus on building your project by handling the repetitive tasks for you.

What's New?

This update introduces:

  1. Boilerplate for new module schema (Sanity code): Quickly scaffold new module schemas in your Sanity Studio with a single snippet. These schemas include placeholders for fields, validation, and configuration, ensuring consistency across your project.
  2. Boilerplate for module components (Next.js Code): Generate Next.js module components pre-wired with essential props and structures. These snippets align with the Sanity schema, reducing the chance of mismatched data handling.
  3. Primitives for schema fields: Insert field templates into your schemas effortlessly. Whether you’re adding text, images, arrays, or references, these snippets simplify the process by including common options like validation and descriptions.

How to Use the Snippets

Triggering the snippets: The snippets are included by default as of v5.6.0 of the SanityPress (view the snippets file). Open any .ts or .tsx file and start typing the prefix for a snippet. For example:

  • schema-module: generates a new module schema.
  • component-module: generates a Next.js module component.
  • field-portable-text, field-image, field-items-array: quickly add field definitions.

Hit Tab to insert the snippet and fill in placeholders as prompted. To see it in action, check out this short screen recording that demonstrates how easy it is to use these snippets.

.vscode/.code-snippets file:

Snippets in action:

VSCode snippets in action inside Cursor. Notice that the schema and component names are auto-generated based on the filename.

Why These Snippets Matter

  1. Faster development: Skip the repetitive typing and boilerplate code. Focus on customizing your components and schemas.
  2. Consistency across projects: With pre-defined templates, your codebase maintains uniformity, reducing the chances of errors.
  3. Beginner-friendly: These snippets guide new developers by including recommended configurations and best practices.

Get Started Today

Ready to enhance your workflow? Supercharge your development with the SanityPress starter template.

Visit SanityPress.dev to learn more, or check out the GitHub repository to dive into the code.

Let me know how the snippets are working for you or if there’s more you’d like to see added. Your feedback is always appreciated!

exaggerated poster for an orange energy drink with the logo "SanityPress" and "VSCode" and "Snippets", blonde asian male muscular salaryman wearing business attire sweating like an athlete
Tired of slow coding? One sip of this, and autocomplete will finish projects before you even start them.