Svelte 3 Snippets for VS Code

Visual Studio Code Extension that adds Svelte 3 snippets to your favorite IDE.

All code snippets are based on and follow the official Svelte documentation.

Svelte VS Code Snippets Demo

Available for VSCodium at Svelte 3 Snippets.

Using Snippets in VS Code

Type part of a snippet, press Enter, and the snippet unfolds.

Contributing

Contributions are welcome! See Contribution Guidelines to get started.

Snippets Documentation

Prefix	Description
`s-`	Svelte Snippets

Table of Content

Snippets Documentation
- Svelte
- Javascript
- Css

Svelte

Prefix	Description
s-component-format	add a script to your svelte file
s-script	add a script to your svelte file
s-script-context	add a script with context="module" to your svelte file
s-style	add styles to your svelte file
s-expression	basic expression
s-expression-html	html content expression
s-expression-debug	html content expression
s-if-block	if block
s-if-else-block	if else block
s-else-block	else block
s-if-else-if-block	if else if block
s-else-if-block	else if block
s-each-block	each block
s-each-else-block	each else block
s-each-index-block	each index block
s-each-key-block	each index block
s-each-index-key-block	each index key block
s-await-then-block	await then block
s-then-block	then block
s-await-short-block	await short block
s-await-catch-block	await catch block
s-catch-block	catch block
s-on-event	on event
s-on-event-foward	on event foward
s-on-event-modifiers	on event w/ modifiers
s-on-event-inline	on event inline
s-modifier	modifier
s-bind	bind property
s-bind-property	bind property
s-bind-video	bind property
s-bind-block-level	bind property
s-bind-group	bind group
s-bind-this	bind this
s-class	class
s-class-short	class shorthand
s-use	use action
s-use-parameters	use action w/ parameters
s-transition	transition
s-transition-params	transition-params
s-transition-events	transition-events
s-transition-local	transition local
s-transition-all	transition
s-animate	animate
s-slot	slot
s-slot-name	slot w/ name
s-slot-prop	slot w/ prop
s-self	svelte:self
s-self-prop	svelte:self
s-component	svelte:component
s-window	svelte:window
s-window-bind	svelte:window bind properties
s-body	svelte:body
s-head	svelte:head
s-options	svelte:options

Javascript

Prefix	Description
s-create-component	svelte create component
s-reactive-statement	reactive statement
s-reactive-block	reactive block
s-action	action function
s-action-parameters	action function
s-action-update	action w/ update function
s-lifecycle-mount	onMount lifecycle function
s-lifecycle-before-update	beforeUpdate lifecycle function
s-lifecycle-after-update	afterUpdate lifecycle function
s-lifecycle-destroy	onDestroy lifecycle function
s-tick	svelte tick function
s-set-content	svelte setContext
s-get-content	svelte getContext
s-dispatch	svelte dispatch
s-dispatch-event	svelte dispatch event
s-writeable	svelte writeable
s-writeable-set	svelte writeable w/ set function
s-readable	svelte readable (set function required)
s-derived	svelte derived store
s-derived-multiple	svelte derived store
s-derived-set	svelte derived store
s-derived-multiple-set	svelte derived store
s-store-get-value	svelte get value from store
s-component-set	svelte component api $set
s-component-on	svelte component api $on
s-component-destroy	svelte component api $destroy
s-render-component	svelte render component
s-tweened	svelte create tweened store
s-spring	svelte create spring store
s-register	svelte register

Css

Prefix	Description
s-global-style	add global styles to your style tag

⬆ back to top

Svelte 3 Snippets

fivethree