Svelte Snippets for VS Code

A comprehensive collection of Svelte snippets for Visual Studio Code that covers all the latest Svelte features and functionality, including TypeScript and JavaScript support.

⚠️ Disclaimer ⚠️

This extension is not an official Svelte product. It is a third-party extension created to enhance the Svelte development experience in VS Code.

Credits

Svelte - The official Svelte framework
Visual Studio Code - Microsoft's code editor

Features

This extension provides snippets for:

Basic Svelte component structure
Svelte stores and state management (including derived stores)
Svelte actions and directives
Transitions and animations
Control flow blocks (if, each, await, key)
Lifecycle functions
Event handling
Component props and slots
Reactive statements
TypeScript support with type-safe snippets
JavaScript support with language-specific snippets
And more!

Snippets

Svelte Snippets

Prefix	Description
`svelte`	Create a new Svelte component
`store`	Create a new Svelte store
`store-derived`	Create a new Svelte derived store
`action`	Create a new Svelte action
`transition`	Add a Svelte transition
`animate`	Add a Svelte animation
`each`	Create a Svelte each block
`if`	Create a Svelte if block
`await`	Create a Svelte await block
`key`	Create a Svelte key block
`$`	Create a Svelte reactive statement
`$store`	Subscribe to a Svelte store
`props`	Define Svelte component props
`onMount`	Add Svelte onMount lifecycle function
`onDestroy`	Add Svelte onDestroy lifecycle function
`beforeUpdate`	Add Svelte beforeUpdate lifecycle function
`afterUpdate`	Add Svelte afterUpdate lifecycle function
`on`	Add a Svelte event handler
`class`	Add a Svelte class directive
`use`	Add a Svelte use directive
`bind`	Add a Svelte bind directive
`slot`	Add a Svelte slot
`slotfallback`	Add a Svelte slot with fallback content

TypeScript Snippets

Prefix	Description
`svelte-ts`	Create a new Svelte component with TypeScript
`store-ts`	Create a new Svelte store with TypeScript
`store-derived-ts`	Create a new Svelte derived store with TypeScript
`action-ts`	Create a new Svelte action with TypeScript
`props-ts`	Define Svelte component props with TypeScript
`on-ts`	Add a Svelte event handler with TypeScript
`$store-ts`	Subscribe to a Svelte store with TypeScript
`$-ts`	Create a Svelte reactive statement with TypeScript
`lifecycle-ts`	Add a Svelte lifecycle function with TypeScript
`bind-ts`	Add a Svelte bind directive with TypeScript
`class-ts`	Add a Svelte class directive with TypeScript
`transition-ts`	Add a Svelte transition with TypeScript
`animate-ts`	Add a Svelte animation with TypeScript

JavaScript Snippets

Prefix	Description
`svelte-js`	Create a new Svelte component with JavaScript
`store-js`	Create a new Svelte store with JavaScript
`store-derived-js`	Create a new Svelte derived store with JavaScript
`action-js`	Create a new Svelte action with JavaScript
`props-js`	Define Svelte component props with JavaScript
`on-js`	Add a Svelte event handler with JavaScript
`$store-js`	Subscribe to a Svelte store with JavaScript
`$-js`	Create a Svelte reactive statement with JavaScript
`lifecycle-js`	Add a Svelte lifecycle function with JavaScript
`bind-js`	Add a Svelte bind directive with JavaScript
`class-js`	Add a Svelte class directive with JavaScript
`transition-js`	Add a Svelte transition with JavaScript
`animate-js`	Add a Svelte animation with JavaScript

Usage

Install the extension
Open a .svelte, .ts, or .js file
Type the prefix of the snippet you want to use
Press Tab or Enter to insert the snippet
Use Tab to navigate through the placeholders

Requirements

Visual Studio Code 1.60.0 or higher
Svelte project
TypeScript (optional, for TypeScript support)

Extension Settings

This extension contributes the following settings:

No additional settings required

Known Issues

None at the moment. Please report any issues you find to the extension author.

Release Notes

See CHANGELOG.md for release notes.

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Svelte Snippets SP

SMIT_PATEL_SP