jetbrains-svelte-templates

Svelte and SvelteKit Live Templates for JetBrains IDEs. Accelerate your workflow and reduce boilerplate code!

Introduction 🚀

jetbrains-svelte-templates is a compact collection of Live Templates for JetBrains IDEs (like WebStorm and IntelliJ IDEA Ultimate) designed to speed up your Svelte & SvelteKit development. Use these templates to quickly insert essential code and boost your workflow.

Features 💡

The plugin provides a wide range of Live Templates, which you can use with simple abbreviations (sv-* or svk-*) in your code. Just type the abbreviation and press Tab to expand the template.

Live Templates for Svelte 5

• sv-attach (svelte attach)
• sv-await-catch (svelte await catch)
• sv-await-then (svelte await then)
• sv-await-wp-then (svelte await with pending then)
• sv-await-wp-then-catch (svelte await with pending then catch)
• sv-const (svelte const)
• sv-derived (svelte rune derived)
• sv-each (svelte each)
• sv-each-el (svelte each else)
• sv-each-el-index (svelte each else with index)
• sv-each-el-keyed (svelte each else keyed)
• sv-each-el-keyed-index (svelte each else keyed index)
• sv-each-el-wo-item (svelte each else without item)
• sv-each-el-wo-item-index (svelte each else without item index)
• sv-each-index (svelte each with index)
• sv-each-keyed (svelte each keyed)
• sv-each-keyed-index (svelte each keyed index)
• sv-each-wo-item (svelte each without item)
• sv-each-wo-item-index (svelte each without item index)
• sv-effect (svelte rune effect)
• sv-host (svelte rune host)
• sv-html (svelte html)
• sv-if (svelte if)
• sv-if-el (svelte if else)
• sv-if-el-if (svelte if else if)
• sv-inspect (svelte rune inspect)
• sv-inspect-trace ( svelte rune inspect trace)
• sv-inspect-with (svelte rune inspect with)
• sv-key (svelte key)
• sv-props (svelte rune props)
• sv-props-fallback-val (svelte rune props with fallback value)
• sv-props-id (svelte rune props id)
• sv-props-typed (svelte rune props typed)
• sv-props-typed-interface (svelte rune props typed with interface)
• sv-render (svelte render)
• sv-render-optional (svelte render optional)
• sv-render-optional-fallback (svelte render optional with fallback)
• sv-render-optional-params (svelte render optional with params)
• sv-render-params (svelte render params)
• sv-snippet (svelte snippet)
• sv-snippet-params (svelte snippet params)
• sv-state (svelte rune state)

Live Templates for SvelteKit

• svk-config (sveltekit config)
• svk-csr (sveltekit csr)
• svk-error (sveltekit error)
• svk-form-action-default (sveltekit form action default)
• svk-form-action-named (sveltekit form action named)
• svk-form-action-wrapper (sveltekit form action wrapper)
• svk-get-route (sveltekit get route)
• svk-hooks (sveltekit hooks)
• svk-layoutload (sveltekit layout load)
• svk-pageload (sveltekit page load)
• svk-pageserverload (sveltekit page server load)
• svk-post-route (sveltekit post route)
• svk-prerender (sveltekit prerender)
• svk-ssr (sveltekit ssr)
• svk-trailingslash (sveltekit trailingslash)

Installation ⚙️

This section guides you through the process of installing and getting started with the 'jetbrains-svelte-templates' plugin for JetBrains IDEs.

Prerequisites

Ensure you have a compatible JetBrains IDE (e.g., WebStorm, IntelliJ IDEA Ultimate) installed, version 2025.1 or later.

Method 1: From the JetBrains Marketplace (Recommended)

1. Open your IDE and go to Settings (Preferences on macOS).
2. Navigate to Plugins and select the Marketplace tab.
3. Search for Svelte Templates.
4. Click Install and restart your IDE to complete the installation.

or install directly from the Marketplace page.

Method 2: Manual Installation

1. Download the latest .jar or .zip file from the GitHub Releases page.
2. In your IDE, go to the Plugins settings (as described above).
3. Click the gear icon (⚙️) and select Install Plugin from Disk....
4. Choose the downloaded .jar or .zip file and restart your IDE.

Usage ⌨️

The Live Templates are ready to use immediately. When you type an abbreviation into your Svelte or SvelteKit code and press Tab, the code will be inserted, and you can customize the placeholders (e.g., variable names).

Important Note: If your IDE's automated HTML tag closing is too aggressive, use the Enter key to switch between the placeholders in the Live Templates.

Tip: You can find a complete list of all available templates and their shortcuts in your IDE under Settings > Editor > Live Templates > Svelte or SvelteKit.

Contributing & Support ❤️

We welcome all forms of support!

• Contributions: If you'd like to add new templates, improve existing ones, or report issues, please check out our CONTRIBUTING.md guide.
• Support: Give us a Star here on GitHub and review the plugin on the JetBrains Marketplace. Your feedback and stars help us reach more developers!
• Sponsoring: You can also support the project with a small donation via the Ko-fi button.

Thank you for your support! 🙏

Logo Notice / Disclaimer

The logo for this project was generated with an AI tool. No manual or copyrighted works were used as direct templates.