Installations

npm install @dylanvann/prettier-plugin-svelte

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.2.0

NPM Version

6.14.5 Score

70.2

Supply Chain

98.1

Quality

75.2

Maintenance

50

Vulnerability

99.6

License

Pull Requests

Open

5

Total

215

Closed

42

Merged

168

Issues

Open

48

Total

269

Closed

221

Releases

Unable to fetch releases

Contributors

44

Unable to fetch Contributors

View All 44 Contributors

Languages

3

TypeScript

HTML

JavaScript

TypeScript (64.61%)

HTML (34.44%)

JavaScript (0.95%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

sveltejs

Download Statistics

Total Downloads

488

Last Day

1

Last Week

2

Last Month

9

Last Year

85

GitHub Statistics

MIT License

757 Stars

348 Commits

98 Forks

14 Watchers

5 Branches

44 Contributors

Updated on Feb 16, 2025

Bundle Size

12.06 kB

Minified

4.50 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

1.1.1

Package Id

@dylanvann/prettier-plugin-svelte@1.1.1

Unpacked Size

110.47 kB

Size

26.29 kB

File Count

6

NPM Version

6.14.5

Node Version

14.2.0

Total Downloads

Cumulative downloads

Total Downloads

488

Last Day

0%

1

Compared to previous day

Last Week

100%

2

Compared to previous week

Last Month

28.6%

9

Compared to previous month

Last Year

-23.4%

85

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

2

prettier svelte

Dev Dependencies

12

@types/node @types/prettier ava prettier rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-typescript svelte ts-node tslib typescript

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 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.
svelteStrictMode
- Default: false
- More strict HTML syntax: self-closed tags, quotes in attributes.
svelteAllowShorthand
- Default: true
- Option to enable/disable component attribute shorthand if attribute name and expression are same.

svelteBracketNewLine

Default: false
Put the > of a multiline element on a new line (svelte equivalent of jsxBracketSameLine rule)

For example:

1<script>
2  export let value;
3</script>
4
5<!-- allowShorthand: true -->
6<input type="text" {value}>
7
8<!-- allowShorthand: false -->
9<input type="text" value={value}>
10

`.prettierrc` example

1{
2  "svelteSortOrder" : "styles-scripts-markup",
3  "svelteStrictMode": true,
4  "svelteBracketNewLine": true,
5  "svelteAllowShorthand": false
6}

How to install manually

1npm 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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Maintained

Determines if the project is "actively maintained".

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.9

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@dylanvann/prettier-plugin-svelte

Installations

Developer Guide

No

CommonJS

14.2.0

6.14.5

Score

Pull Requests

5

215

42

168

Issues

48

269

221

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

sveltejs

Download Statistics

GitHub Statistics

Bundle Size

12.06 kB

4.50 kB

Maintainers

Package Meta Information

Total Downloads

488

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Prettier for Svelte 3 components

Features

How to use in VS Code and Atom

Configure for VS Code and Atom

.prettierrc example

How to install manually

How to use (CLI)

Options (CLI)

10

10

10

6

5

3

2

0

0

0

0

0

0

3.9

/10

`.prettierrc` example