Setting up your editor

Instructions for configuring linting and syntax highlighting

Rich Harris

Coming soon

This post will walk you through setting up your editor so that recognises Svelte files:

  • eslint-plugin-svelte3
  • svelte-vscode
  • associating .svelte files with HTML in VSCode, Sublime, etc.

Atom

To treat *.svelte files as HTML, open Edit → Config... and add the following lines to your core section:

"*":
  core:
    …
    customFileTypes:
      "text.html.basic": [
        "svelte"
      ]

Vim/Neovim

You can use the coc-svelte extension which utilises the official language-server.

As an alternative you can treat all *.svelte files as HTML. Add the following line to your init.vim:

au! BufNewFile,BufRead *.svelte set ft=html

To temporarily turn on HTML syntax highlighting for the current buffer, use:

:set ft=html

To set the filetype for a single file, use a modeline:

<!-- vim: set ft=html :-->

Visual Studio Code

We recommend using the official Svelte for VS Code extension.

JetBrains WebStorm

The Svelte Framework Integration can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the WebStorm plugin installation guide on the JetBrains website for more details.

Sublime Text 3

Open any .svelte file.

Go to View → Syntax → Open all with current extension as... → HTML.