Giter VIP home page Giter VIP logo

prettier-plugin-svelte's Introduction

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 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.

How to install manually

npm i --save-dev prettier-plugin-svelte prettier

How to use (CLI)

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.

Options

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.

Svelte Sort Order

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 options order option only exists since version 2. If you use version 1 of prettier-plugin-svelte, omit that option (so for example only write scripts-markup-styles).

Svelte Strict Mode

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>

Svelte Allow Shorthand

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>

Svelte Bracket New Line

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>

Svelte Indent Script And Style

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
}

Usage with Tailwind Prettier Plugin

There's a Tailwind Prettier Plugin to format classes in a certain way. This plugin bundles prettier-plugin-svelte, so if you want to use the Tailwind plugin, uninstall prettier-plugin-svelte and use the Tailwind plugin instead. If you are using VS Code, make sure to have the Prettier extension installed and switch the default formatter for Svelte files to it.

More info: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

prettier-plugin-svelte's People

Contributors

andrewlester avatar benmccann avatar bluwy avatar bryanjswift avatar chrisbrown-io avatar clebert avatar clitetailor avatar conduitry avatar dependabot[bot] avatar dummdidumm avatar ecogels avatar ehrencrona avatar ematipico avatar guidobouman avatar hyrious avatar jamesbirtles avatar jarrodldavis avatar jesseskinner avatar orlov-vo avatar oscard0m avatar ryanatkn avatar ryeballar avatar taylorzane avatar toerndev avatar tqwewe avatar xla avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.