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 bindingson:click="", and more
- e.g. expressions inside of
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.
- Default:
-
svelteStrictMode- Default:
false - More strict HTML syntax: self-closed tags, quotes in attributes, no attribute shorthand (overrules
svelteAllowShorthand).
- Default:
-
svelteAllowShorthand- Default:
true - Option to enable/disable component attribute shorthand if attribute name and expression are same.
- Default:
-
svelteBracketNewLine- Default:
false - Put the
>of a multiline element on a new line (svelte equivalent of jsxBracketSameLine rule)
- Default:
-
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}> - Default:
.prettierrc example
{
"svelteSortOrder" : "styles-scripts-markup",
"svelteStrictMode": true,
"svelteBracketNewLine": true,
"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 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