
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
prettier-plugin-svelte
Advanced tools
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.
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 extension for your favorite editor and enjoy.
Configurations are optional
Make .prettierrc
file in your project directory (Read more about prettier config files here)
and add your preferred configuration options:
svelteSortOrder
options-scripts-markup-styles
svelteStrictMode
false
svelteAllowShorthand
).svelteAllowShorthand
true
svelteBracketNewLine
true
>
of a multiline element on a new line (svelte equivalent of jsxBracketSameLine rule)svelteIndentScriptAndStyle
true
<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
}
npm i --save-dev prettier-plugin-svelte prettier
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
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:
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:
<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{tag}
is too long, break it up if possible (excluding {#if}
/{#await}
/etc. blocks). This is a breaking change (#170)<script>
/<style>
tag is completely empty (no whitespace), don't put the closing tag on a new line (#87)FAQs
Svelte plugin for prettier
The npm package prettier-plugin-svelte receives a total of 357,398 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 3 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.