Svelte 5 Snippets
A comprehensive collection of Svelte 5 code snippets for Visual Studio Code, featuring the latest runes system and modern Svelte features.
Features
āØ Complete Svelte 5 Support - All the latest runes and features
šÆ Runes System - State, derived, effect, props, and more
š§ TypeScript Ready - Full TypeScript snippets included
ā” Fast Development - Speed up your Svelte 5 workflow
š Well Documented - Clear descriptions for every snippet
Installation
- Open Visual Studio Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Svelte 5 Snippets"
- Click Install
Or install from the command line:
code --install-extension imlargo.svelte-5-snippets
Snippets Overview
Runes System
| Prefix |
Description |
s5state |
Create reactive state with $state() |
s5derived |
Create derived value with $derived() |
s5effect |
Create side effect with $effect() |
s5props |
Define component props with $props() |
Component Structure
| Prefix |
Description |
s5comp |
Basic Svelte 5 component structure |
s5compprops |
Component with props |
s5ts |
TypeScript component |
Control Flow
| Prefix |
Description |
s5if |
Conditional if block |
s5ifelse |
If-else block |
s5each |
Each iteration block |
s5eachi |
Each block with index |
Snippets & Rendering
| Prefix |
Description |
s5snippet |
Define reusable snippet |
s5render |
Render snippet with args |
s5html |
Render raw HTML |
s5const |
Local constant definition |
Directives & Events
| Prefix |
Description |
s5on |
Event handler |
s5bind |
Bind directive |
s5class |
Class directive |
Transitions & Animations
| Prefix |
Description |
s5in |
Entrance transition |
s5out |
Exit transition |
s5transition |
Bidirectional transition |
s5animate |
Animation directive |
Stores & State Management (Coming soon...)
| Prefix |
Description |
s5store |
Writable store |
s5readable |
Readable store |
s5derivedstore |
Derived store |
s5customstore |
Custom store with methods |
Component Lifecycle (Coming soon...)
| Prefix |
Description |
s5mount |
Mount component (new API) |
s5unmount |
Unmount component |
s5class |
Component instantiation |
TypeScript Specific (Coming soon...)
| Prefix |
Description |
s5tstate |
Typed state variable |
s5tprops |
Typed props interface |
s5tcomp |
Component type definition |
s5tevent |
Typed event handler |
s5tstore |
Typed store |
s5taction |
Typed action |
s5tsnippet |
Typed snippet prop |
s5tgeneric |
Generic component |
s5tmount |
Typed component mount |
Requirements
- Visual Studio Code 1.74.0 or higher
- Svelte 5.0 or higher (for full feature support)
Language Support
This extension provides snippets for:
.svelte files.js files (for Svelte-related JavaScript).ts files (for Svelte-related TypeScript)
Contributing
Contributions are welcome! Please feel free to submit issues and pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-snippet)
- Commit your changes (
git commit -m 'Add amazing snippet')
- Push to the branch (
git push origin feature/amazing-snippet)
- Open a Pull Request
Changelog
1.0.0
- Initial release
- Complete Svelte 5 runes system support
- TypeScript snippets
- Component lifecycle snippets
- Store management snippets
License
MIT License - see the LICENSE file for details.
Support
If you find this extension helpful, please consider:
- ā Star the repository
- š Report issues
