prettier-plugin-svelte
Advanced tools
Package description
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.
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>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 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 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.
Changelog
Readme
Format your Svelte components using Prettier.
{}, event bindings on:click="", and moreThis plugin comes with Svelte for VS Code and Svelte for Atom so just install the extension for your favorite editor and enjoy.
If you want to customize some formatting behavior, see section "Options" below.
Some of the extensions let you define options through extension-specific configuration. These settings are ignored however if there's any configuration file (.prettierrc for example) present.
npm i --save-dev prettier-plugin-svelte prettier
Install prettier and prettier-plugin-svelte as dev dependencies in your project.
Then format your code using Prettier CLI. You may need to add --plugin-search-dir=.
prettier --write --plugin-search-dir=. ./**/*.html
If you want to customize some formatting behavior, see section "Options" below.
Configurations are optional
Make a .prettierrc file in your project directory and add your preferred options to configure Prettier. When using Prettier through the CLI, you can also pass options through CLI flags, but a .prettierrc file is recommended.
Sort order for svelte:options, scripts, markup, and styles.
Format: join the keywords options, scripts, markup, styles with a - in the order you want.
| Default | CLI Override | API Override |
|---|---|---|
options-scripts-markup-styles | --svelte-sort-order <string> | svelteSortOrder: <string> |
The
optionsorder option only exists since version 2. If you use version 1 ofprettier-plugin-svelte, omit that option (so for example only writescripts-markup-styles).
More strict HTML syntax: less self-closed tags, quotes in attributes, no attribute shorthand (overrules svelteAllowShorthand).
Example:
<!-- svelteStrictMode: true -->
<div foo="{bar}"></div>
<!-- svelteStrictMode: false -->
<div foo={bar} />
| Default | CLI Override | API Override |
|---|---|---|
false | --svelte-strict-mode <bool> | svelteStrictMode: <bool> |
Option to enable/disable component attribute shorthand if attribute name and expression are same.
Example:
<!-- allowShorthand: true -->
<input type="text" {value} />
<!-- allowShorthand: false -->
<input type="text" value={value} />
| Default | CLI Override | API Override |
|---|---|---|
true | --svelte-allow-shorthand <bool> | svelteAllowShorthand: <bool> |
Deprecated since 2.5.0. Use Prettier 2.4.0 and bracketSameLine instead.
Put the > of a multiline element on a new line. Roughly the Svelte equivalent of the jsxBracketSameLine rule. Setting this to false will have no effect for whitespace-sensitive tags (inline elements) when there's no whitespace between the > of the start tag and the inner content, or when there's no whitespace after the > of the end tag. You can read more about HTML whitespace sensitivity here. You can adjust whitespace sensitivity through this setting.
Example:
<!-- before formatting -->
<span><div>foo</div><span>bar</span></span>
<div pretend break>content</div>
<!-- after formatting, svelteBracketNewLine true -->
<span
><div>foo</div>
<span>bar</span></span
>
<div
pretend
break
>
content
</div>
<!-- after formatting, svelteBracketNewLine false -->
<span
><div>foo</div>
<span>bar</span></span>
<div
pretend
break>
content
</div>
| Default | CLI Override | API Override |
|---|---|---|
true | --svelte-bracket-new-line <bool> | svelteBracketNewLine: <bool> |
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.
| Default | CLI Override | API Override |
|---|---|---|
true | --svelte-indent-script-and-style <bool> | svelteIndentScriptAndStyle: <bool> |
.prettierrc example{
"svelteSortOrder" : "options-styles-scripts-markup",
"svelteStrictMode": true,
"svelteBracketNewLine": false,
"svelteAllowShorthand": false,
"svelteIndentScriptAndStyle": false
}
FAQs
Svelte plugin for prettier
The npm package prettier-plugin-svelte receives a total of 266,682 weekly downloads. As such, prettier-plugin-svelte popularity was classified as popular.
We found that prettier-plugin-svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Emerging ransomware groups drive a surge in activity in early 2024, with increasing software supply chain attacks predicted to impact critical industries reliant on third-party software.
Security News
In June 2023, Google sold all Google Domains accounts to Squarespace but more than a dozen customers have had their domains hijacked in the last week due to weak security defaults and migration issues.
![Massive Automated Spam Campaign Abuses GitHub to Flood npm Registry with Thousands of Garbage Tea[.]xyz Packages](https://cdn.sanity.io/images/cgdhsj6q/production/a74d1072ff2bb5cb96a404be58a649931ced2ba5-1024x1024.webp?w=400&fit=max&auto=format)
Security News
In a reprisal of their previous Tea[.]xyz spam campaign, a new wave of thousands of garbage packages are hitting npm, to artificially inflate the number of dependents for spammers' projects.