prettier-plugin-svelte

What is prettier-plugin-svelte?

The prettier-plugin-svelte npm package is a plugin for Prettier that adds support for formatting Svelte files. It ensures that your Svelte code is consistently styled according to Prettier's rules, making it easier to maintain and read.

What are prettier-plugin-svelte's main functionalities?

Format Svelte Files

This feature allows you to format Svelte files using Prettier. By including the plugin in your Prettier configuration, you can ensure that your Svelte code is consistently styled.

/* .prettierrc */
{
  "plugins": ["prettier-plugin-svelte"]
}

/* Example Svelte file before formatting */
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

<h1 on:click={increment}>Count: {count}</h1>

/* Example Svelte file after formatting */
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

<h1 on:click={increment}>Count: {count}</h1>

Integration with Prettier CLI

You can use the Prettier CLI to format all Svelte files in your project. This command will recursively find and format all .svelte files in the src directory.

/* Command to format Svelte files using Prettier CLI */
npx prettier --write "src/**/*.svelte"

Support for Svelte-specific Syntax

The plugin supports Svelte-specific syntax such as reactive statements, bindings, and event handlers, ensuring that these are also formatted correctly.

/* Example Svelte file with Svelte-specific syntax */
<script>
  export let name = 'world';
</script>

<style>
  p {
    font-size: 1.5em;
  }
</style>

<p>Hello {name}!</p>

Other packages similar to prettier-plugin-svelte

eslint-plugin-svelte3

eslint-plugin-svelte3 is an ESLint plugin that provides linting for Svelte files. While it focuses on linting rather than formatting, it can be used alongside prettier-plugin-svelte to ensure both code quality and consistent styling.

svelte-preprocess

svelte-preprocess is a preprocessor for Svelte that allows you to use various languages like TypeScript, SCSS, and PostCSS in your Svelte components. While it doesn't handle formatting, it can be used in conjunction with prettier-plugin-svelte to preprocess and format your Svelte code.

svelte-check

svelte-check is a command-line tool that provides type-checking and linting for Svelte projects. It complements prettier-plugin-svelte by ensuring that your Svelte code is not only well-formatted but also free of type errors and common issues.

README

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: options-scripts-markup-styles
  • Sort order for svelte:options, scripts, markup, and styles.

• svelteStrictMode

  • Default: false
  • More strict HTML syntax: self-closed tags, quotes in attributes, no attribute shorthand (overrules svelteAllowShorthand).

• svelteAllowShorthand

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

• svelteBracketNewLine

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

• svelteIndentScriptAndStyle

  • Default: true
  • Whether or not to indent the code inside <script> and <style> tags in Svelte files. This saves an indentation level, but might break code folding in your editor.

  For example:

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

.prettierrc example

{
  "svelteSortOrder" : "options-styles-scripts-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": false,
  "svelteAllowShorthand": false,
  "svelteIndentScriptAndStyle": 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 svelte:options, scripts, styles, and markup. Defaults to options-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

Changelog

2.0.0

This release comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. This is also why svelteBracketNewLine now defaults to true. Another notable default change is the sort order: svelte:options is now part of the sort order and the default changed to options-scripts-markup-styles, which is in line with how the majority of users like to order the code blocks.

The complete list of changes:

• Rework the tag breaking logic with the goal to be more in line with how Prettier formats standard HTML. This includes respecting the user's decision to have child tags in separate lines even if they don't exceed the maximum line width (#143, #117). This is a breaking change because tags are broken up differently now than before.
• <svelte:options> is now part of svelteSortOrder. Default sort order is now options-scripts-markup-styles. This is a breaking change. (#73)
• svelteBracketNewLine defaults to true now to be more in line with how Prettier formats standard HTML. This is a breaking change
• Fix formatting of fenced Svelte code blocks inside Markdown (#129)
• Everything that is not explicitly a block element is now treated as an inline element, including components. This is a breaking change (#159)
• Single quotes are no longer forced except inside quoted attributes/events/etc. This is a breaking change (#94)
• If the content inside a {tag} is too long, break it up if possible (excluding {#if}/{#await}/etc. blocks). This is a breaking change (#170)
• If the content of a <script>/<style> tag is completely empty (no whitespace), don't put the closing tag on a new line (#87)