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 install

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

How to use

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

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

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

Changelog

0.6.0

• Support nested <script> and <style> tags
• Add svelteSortOrder option
• Fix printing of HTML entities
• Add option to add newline to closing angle bracket
• Support all <svelte:*> elements
• Throw Svelte parsing errors in format Prettier expects
• Add handling for |local transition modifier
• Prevent {#if} blocks nested in an {#each}/{:else} from being converted into an {:else if}
• Fix whitespace trimming for lonely wrapped mustache tags