2019-04-15-setting-up-your-editor.md

title	description	author	authorURL	draft
Setting up your editor	Instructions for configuring linting and syntax highlighting	Rich Harris	https://twitter.com/Rich_Harris	true

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

To 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

To treat *.svelte files as HTML, add the following lines to your settings.json file:

  "files.associations": {
    "*.svelte": "html"
  }

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.