prettier-plugin-svelte-quote-free
v1.1.0
Published
Svelte plugin for prettier (sans enforcement of quoting styles)
Downloads
2
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 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.
- 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)
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
}
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