New Pluggin for Svelte (0.22.1)

Svelte provides a radical new approach to building user interfaces. If you use the Svelte language in your projects, you will be happy to read that we are adding support through this plugin to the IDE of your choice.

The Svelte Plugin is compatible with IntelliJ IDEA Ultimate, AppCode, CLion, GoLand, PhpStorm, PyCharm Professional, Rider, RubyMine and WebStorm.

Latest version (0.22.1) adds compatibility with the 2022.2 platforms.

The rest of this blog will guide you through the installation and some of the most notorious features this plugin will enable.

Instalation

First, let’s start with the installation.

As with any other plugin our IDE supports, you can find it directly from the IDE or the Welcome page.

or navigating from the setting

Note: This plugin is also available from the MarketPlace.

Main Features

Once installed, this plugin will enable great features that will increase your development productivity, such as Syntax highlighting, Code Formatting, and Auto Import of components.

Let’s see some of these features in action.

For the examples, we will be using WebStorm IDE.

1. Opening a Svelte Project and run it

Use WebStorm to open your Svelte project.

Note: If you don’t have the plugin installed but open a Svelte project, WebStorm will recognize this and allow you to install the plugin.

You can start your project using the integrated Terminal on WebStorm.

2. Syntax highlighting

The Svelte Plugin will highlight fields, local variables, types and other identifiers with configurable colors.

3. Typing Assistance and Auto import components

The Svelte Plugin not only saves you time by providing you with smart suggestions but it will also Auto Import components based on your selection.

4. Easily navigate the code from components to their definition

Go to the Type Declaration by Ctrl+Click (on Windows) or Cmd+Click on MacOS.

5. Debugger Integration

Debugging is an integral part of WebStorm, and using the Svelte Plugin will allow you to examine the runtime behaviour of your application step by step.

Use the debugger to set breakpoints and inspect the value of the elements.

Tip: You can start a debugger session from WebStorm by Ctrl+Shift+Click (on Windows) or Cmd+Shift+Click (on MacOS) the Url.

Conclusion

As we saw, this plugin not only brings Svelte Support into your IDE but also makes you more productive by enabling the features described above.

Feedback

We would be grateful for any feedback you have, and all ideas are welcome! Contact us at webstorm-support@jetbrains.com or via our issue tracker.

Your WebStorm team