Convex Snippets VS Code Extension

Snippets for Convex in VS Code.

Features

This extension provides code snippets for Convex.

Import Snippets (Use once at top of file)

• cimport-server - Import all server functions (query, mutation, action, internalQuery, internalMutation)
• cimport-values - Import convex values validator
• cimport-react - Import convex react hooks (useQuery, useMutation, useAction)
• cimport-api - Import convex api

Server-side Functions (No imports - use after import snippets)

• cqf - Convex Query Function
• cmf - Convex Mutation Function
• caf - Convex Action Function
• ciqf - Convex Internal Query Function
• cimf - Convex Internal Mutation Function
• cqfid - Convex Query Function with ID
• cmfins - Convex Mutation Insert
• cmfupd - Convex Mutation Update
• cmfdel - Convex Mutation Delete
• cimfins - Convex Internal Mutation Insert
• cimfupd - Convex Internal Mutation Update
• cimfdel - Convex Internal Mutation Delete
• cqffil - Convex Query with Filter
• cqford - Convex Query with Order
• ciqffil - Convex Internal Query with Filter

Server-side Functions with Imports (For new files)

• cqfi - Convex Query Function with imports
• cmfi - Convex Mutation Function with imports
• cafi - Convex Action Function with imports
• ciqfi - Convex Internal Query Function with imports
• cimfi - Convex Internal Mutation Function with imports

Client-side Hooks (No imports)

• cuq - Convex useQuery Hook
• cum - Convex useMutation Hook
• cua - Convex useAction Hook

Client-side Hooks with Imports (For new files)

• cuqi - Convex useQuery Hook with imports
• cumi - Convex useMutation Hook with imports
• cuai - Convex useAction Hook with imports

Installation

1. Press Ctrl+Shift+X to open Extensions
2. Search for "Convex Snippets"
3. Click Install

Usage

Option 1: For existing files (no duplicate imports)

// Step 1: Add imports at top
// Type: cimport-server + Tab
import { query, mutation, action, internalQuery, internalMutation } from "./_generated/server";

// Step 2: Use function snippets
// Type: cqf + Tab
export const myQuery = query({
  args: {
    // cursor stops here
  },
  handler: async (ctx, args) => {
    // cursor stops here
  },
});

// Type: cmf + Tab (no duplicate imports!)
export const myMutation = mutation({
  args: {
    // cursor stops here
  },
  handler: async (ctx, args) => {
    // cursor stops here
  },
});

// Type: ciqf + Tab (internal function)
export const myInternalQuery = internalQuery({
  args: {
    // cursor stops here
  },
  handler: async (ctx, args) => {
    // cursor stops here
  },
});

Option 2: For new files (with imports)

// Type: cqfi + Tab
import { query } from "./_generated/server";
import { v } from "convex/values";

export const myQuery = query({
  args: {
    // cursor stops here
  },
  handler: async (ctx, args) => {
    // cursor stops here
  },
});

Contributing

Contributions are welcome!

License

ISC