Prettier for Svelte 3 components

Format your svelte components using prettier.

Features

• Format your html, css, and javascript using prettier
• Format Svelte syntax, e.g. each loops, if statements, await blocks, etc.
• Format the javascript expressions embedded in the svelte syntax
  • e.g. expressions inside of {}, event bindings on:click="", and more

How to use in VS Code and Atom

This plugin comes with Svelte for VS Code and Svelte for Atom so just install extension for your favorite editor and enjoy.

Configure for VS Code and Atom

Configurations are optional

Make .prettierrc file in your project directory (Read more about prettier config files here) and add your preferred configuration options:

• svelteSortOrder

  • Default: scripts-styles-markup
  • Sort order for scripts, styles, and markup.

• svelteStrictMode

  • Default: false
  • More strict HTML syntax: self-closed tags, quotes in attributes.

• svelteAllowShorthand

  • Default: true
  • Option to enable/disable component attribute shorthand if attribute name and expression are same.

• svelteBracketNewLine

  • Default: false
  • Put the > of a multiline element on a new line (svelte equivalent of jsxBracketSameLine rule)

  For example:

  <script>
    export let value;
  </script>
  
  <!-- allowShorthand: true -->
  <input type="text" {value}>
  
  <!-- allowShorthand: false -->
  <input type="text" value={value}>

.prettierrc example

{
  "svelteSortOrder" : "styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
}

How to install manually

npm i --save-dev prettier-plugin-svelte prettier

How to use (CLI)

Install prettier-plugin-svelte as a dev dependency in your project.

Then format your code using prettier cli. You may need to add --plugin-search-dir=.

prettier --write --plugin-search-dir=. ./**/*.html

Options (CLI)

svelte-sort-order Sort order for scripts, styles, and markup. Defaults to scripts-styles-markup.

prettier --write --svelte-sort-order scripts-markup-styles ./**/*.svelte

svelte-strict-mode Enable more strict syntax for HTML. Defaults to false.

Main difference in strict mode:

• Not all tags are self closing
• Expressions in attributes are wrapped by double quotes