Use Svelte VSCode

The svelte-vscode extension does most of what you want, code highlighting for example. But not quite all; after installing it in VSCode, there is still some fiddling to do.

Making prettier-plugin-svelte work with VSCode

There are probably better ways, but his is what worked for me. I set it up on a per-project basis, because it involves downgrading prettier and I don’t want to for those projects where I am not using Svelte

  1. Install prettier-plugin-svelte and a version of prettier smaller than 2. Annoying, but at the time of writing (Apr 2020) the prettier-plugin-svelte wasn’t compatible with prettier 2
# whichever way you do it...
pnpm add prettier@1.19 prettier-plugin-svelte
yarn add prettier@1.19 prettier-plugin-svelte
npm install prettier@1.19 prettier-plugin-svelte
  1. In your project’s .prettierrc file (or whatever you call it), add a reference to the plugin. You can also add svelte-specific settings
{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "printWidth": 80,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "svelteSortOrder" : "styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": true,
  "plugins": ["prettier-plugin-svelte"]
}
  1. In your VSCode’s settings, add
  "[svelte]": {
    "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
  }
  1. Restart VSCode

Hopefully the plugin will soon be upgraded to be compatible with Prettier 2.0