### Install Prettier and Svelte Plugin

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

Installs `prettier-plugin-svelte` and `prettier` as development dependencies using npm.

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

--------------------------------

### JavaScript Constant Declarations

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-none.html

Example of declaring multiple constant variables on a single line in JavaScript.

```JavaScript
const name = "world"; const name1 = "world";
```

--------------------------------

### Svelte Component Text Interpolation

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-markup-options-scripts.html

This example shows a basic Svelte component template with text and a variable interpolation. The `{name}` syntax is used to display the value of the `name` variable within the component's output.

```svelte
Hello {name}!
```

--------------------------------

### JavaScript JSON Stringify Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/output.html

Demonstrates the use of JSON.stringify to pretty-print a JavaScript object, often used for debugging or serialization.

```javascript
JSON.stringify({ foo: "bar" }, null, 2)
```

--------------------------------

### JavaScript Variable Declaration Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/script-only-extra-whitespace/output.html

A simple JavaScript code snippet demonstrating a constant variable declaration. This example illustrates basic syntax that might be found within a Svelte project context.

```JavaScript
const name = "world";
```

--------------------------------

### Prettier Configuration Example for Svelte Plugin

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

This JSON snippet provides an example `.prettierrc` file demonstrating how to configure various `prettier-plugin-svelte` options. It includes settings for `svelteSortOrder`, `svelteBracketNewLine`, `svelteAllowShorthand`, and `svelteIndentScriptAndStyle` to customize Svelte file formatting.

```JSON
{
    "svelteSortOrder": "options-styles-scripts-markup",
    "svelteBracketNewLine": false,
    "svelteAllowShorthand": false,
    "svelteIndentScriptAndStyle": false
}
```

--------------------------------

### Importing Svelte Components

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-style-script-snipping.html

Demonstrates how to import a Svelte component from a relative path. This is a common pattern for structuring Svelte applications, allowing modularity and reusability of UI elements.

```JavaScript
import MyFunction from "./this_is_a_long_import_path/this_is_a_long_import_name.svelte"; // a long, and useless comment
```

--------------------------------

### JavaScript Variable Declaration Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/single-attribute-per-line-bracket-no-new-line.html

A basic JavaScript example demonstrating constant variable declaration. This snippet initializes a constant variable named 'hi' with an empty string. It serves as a minimal illustration of JavaScript syntax.

```JavaScript
const hi = ""; const hi = "";
```

--------------------------------

### Apply Basic CSS Styling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-styles-scripts-markup.html

This snippet demonstrates how to apply a basic CSS rule to an HTML 'h1' element, setting its color to red. This is a fundamental styling technique.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Allow Shorthand Example (Enabled)

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

Demonstrates the Svelte component attribute shorthand when the `svelteAllowShorthand` option is set to `true`. This results in a more concise syntax for attributes.

```html
<!-- allowShorthand: true -->
<input type="text" {value} />
```

--------------------------------

### Svelte Object Literal Expression

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/input.html

An example of a simple object literal within a Svelte expression block, illustrating how Prettier formats short inline objects.

```Svelte
{{a: true}}
```

--------------------------------

### Basic CSS Styling Rule

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/style.html

This snippet defines a simple CSS rule that sets the text color of `div` elements to red. It serves as a fundamental example of CSS syntax for applying styles.

```CSS
div { color: red; }
```

--------------------------------

### Basic H1 Styling in CSS

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-markup-scripts-options.html

This CSS rule applies a red color to all <h1> HTML elements. It's a fundamental example of how to style text using CSS.

```css
h1 { color: red; }
```

--------------------------------

### Basic JavaScript Statement

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-tag-generics.html

A simple JavaScript statement demonstrating basic syntax. This snippet illustrates how a single expression might be formatted.

```JavaScript
hello;
```

--------------------------------

### JavaScript Constant Variable Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-options-scripts-styles.html

This JavaScript snippet declares a constant variable named 'name' and assigns it the string value 'world'. It's a fundamental example of variable initialization.

```JavaScript
const name = "world";
```

--------------------------------

### Svelte Template String

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-none.html

A simple Svelte template string demonstrating basic text and variable interpolation.

```Svelte
Hello {name}!
```

--------------------------------

### JavaScript Constant Variable Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-only.html

This snippet illustrates the declaration of a constant variable `name` initialized with the string value `"world"` in JavaScript. It's a fundamental syntax example.

```JavaScript
const name = "world";
```

--------------------------------

### Svelte Template String Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-options-markup-scripts.html

An example of a Svelte template string demonstrating variable interpolation. The '{name}' placeholder will be dynamically replaced by a JavaScript variable named 'name' defined in the component's script section.

```svelte
Hello {name}!
```

--------------------------------

### Styling HTML Elements with CSS

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-scripts-markup-options.html

Demonstrates a basic CSS rule to set the color of an H1 element to red. This snippet illustrates fundamental styling within a web project.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Key Block with Store Subscription

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/key-block.html

Illustrates using a Svelte store subscription ($store) as the key. This is useful for re-rendering a component whenever the value of the subscribed store changes, ensuring the component reacts to global state updates.

```Svelte
{#key $store}

hello

{/key}
```

--------------------------------

### Svelte Bracket New Line Formatting Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

This example demonstrates the effect of the `svelteBracketNewLine` option on HTML/Svelte code formatting. It shows the code before formatting and then after formatting with the option set to `true` and `false`, highlighting how multiline elements are affected.

```HTML
<!-- before formatting -->
<span><div>foo</div><span>bar</span></span>
<div pretend break>content</div>
```

```HTML
<!-- after formatting, svelteBracketNewLine true -->
<span
    ><div>foo</div>
    <span>bar</span></span
>
<div
     pretend
     break
>
    content
</div>
```

```HTML
<!-- after formatting, svelteBracketNewLine false -->
<span
    ><div>foo</div>
    <span>bar</span></span>
<div
     pretend
     break>
    content
</div>
```

--------------------------------

### Svelte Await Block Variations for Async Handling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/svelte-await-block-break/output.html

These snippets showcase different ways to implement the `{#await}` block in Svelte. They illustrate the standard structure with separate `{:then}` and `{:catch}` blocks, a variation with multiple content lines, and a shorthand syntax where the `then` clause is included directly in the opening `{#await}` tag.

```Svelte
{#await bla}

loooooooooooooooooooooong

{:then blubb}

loooooooooooooooooooooong

{:catch}

loooooooooooooooooooooong

{/await}
```

```Svelte
{#await bla}

loooooooooooooooooooooong

loooooooooooooooooooooong

{:then blubb}

loooooooooooooooooooooong

loooooooooooooooooooooong

{:catch}

loooooooooooooooooooooong

loooooooooooooooooooooong

{/await}
```

```Svelte
{#await bla then blubb}

loooooooooooooooooooooong

{:catch}

loooooooooooooooooooooong

{/await}
```

--------------------------------

### JavaScript Variable Declaration Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/single-attribute-per-line/output.html

This snippet demonstrates a basic variable declaration in JavaScript. It initializes a constant variable named 'hi' with an empty string. The declaration is repeated twice, which might indicate a copy-paste error or a simplified example.

```JavaScript
const hi = ""; const hi = "";
```

--------------------------------

### Svelte Each Block Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/each-block.html

This Svelte code snippet demonstrates how to iterate over a list of items using the `{#each}` block. It takes an array named `animals` and displays each `animal` within the template.

```Svelte
{#each animals as animal}

{animal}

{/each}
```

--------------------------------

### Svelte Key Block with Simple Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/key-block.html

Demonstrates how to use a simple variable as the key for a {#key} block. When 'value' changes, the content inside this block will be re-rendered, effectively resetting its state.

```Svelte
{#key value}

hello

hello

{/key}
```

--------------------------------

### Basic Svelte Component Structure

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-scripts-options-styles-markup.html

This snippet illustrates the fundamental parts of a Svelte component, including JavaScript for reactivity, CSS for styling, and HTML-like template syntax for rendering. It defines a variable 'name', applies a red color to 'h1' elements, and displays a greeting using the defined variable.

```Svelte
<script>
  const name = "world";
</script>

<style>
  h1 { color: red; }
</style>

<h1>Hello {name}!</h1>
```

--------------------------------

### Svelte Component Styling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-markup-styles-scripts.html

A basic CSS rule defining the color for h1 elements, typically used within the <style> block of a Svelte component.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Template Control Flow Examples

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/long-control-blocks-dont-break.html

This snippet showcases various Svelte template control flow structures, including conditional rendering (`{#if}`), list iteration (`{#each}`), reactive block (`{#key}`), and asynchronous handling (`{#await}`). It demonstrates how complex expressions within these blocks are formatted.

```Svelte
{#if andIiiiiiiiiiiiiiiiiiiiiiiiiiiWillNeverBreaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak === true && cool} a {:else if andIiiiiiiiiiiiiiiiiiiiiiiiiiiWillNeverBreaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak === true && cool} b {/if} {#each \[1, andIiiiiiiiiiiiiiiiiiiiiiiiiiiWillNeverBreaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak\] as { cool, veryCool }} a {/each} {#key andIiiiiiiiiiiiiiiiiiiiiiiiiiiWillNeverBreaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak.no.no.no} a {/key} {#await Promise.resolve(andIiiiiiiiiiiiiiiiiiiiiiiiiiiWillNeverBreaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaak) then cool} a {/await}
```

--------------------------------

### Svelte Component CSS Styling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-styles-scripts-options.html

An example of CSS styling applied to an HTML element, typically defined within the <style> block of a Svelte component.

```CSS
h1 { color: red; }
```

--------------------------------

### Basic Svelte Component Syntax

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-scripts-styles-markup.html

This snippet illustrates a fundamental Svelte component, showcasing how to declare a JavaScript variable, apply CSS styling to an HTML element, and interpolate the variable's value into the template.

```Svelte
const name = "world";
h1 { color: red; }

Hello {name}!
```

--------------------------------

### Svelte Variable Declaration and Interpolation

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-type-typescript.html

This snippet illustrates how to define a variable using JavaScript/TypeScript syntax and then display its value within a Svelte template using curly braces for interpolation. It's a fundamental 'Hello World' type of example for Svelte.

```JavaScript
const name: string = "world";
```

```Svelte
Hello {name}!
```

--------------------------------

### Svelte Await Block with Pending, Then, and Catch States

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/svelte-await-block-break/input.html

Demonstrates the full syntax of the Svelte `{#await}` block, including separate sections for pending, resolved (`then`), and rejected (`catch`) states. This pattern is used for handling asynchronous operations and conditionally rendering UI based on their status.

```Svelte
{#await promise}
  <!-- Content for pending state -->
{:then value}
  <!-- Content for resolved state, 'value' is the resolved promise value -->
{:catch error}
  <!-- Content for rejected state, 'error' is the error object -->
{/await}
```

--------------------------------

### Apply Red Color to H1 Elements with CSS

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-scripts-styles-options.html

This CSS snippet illustrates how to select all H1 HTML elements and set their text color to red. This is a basic example of applying style rules to elements using a type selector.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Await Block Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/await-block-without-pending.html

This Svelte snippet illustrates the basic syntax of the {#await} block. It's used to render different content based on the state of a JavaScript Promise: pending, fulfilled, or rejected. In this example, it shows content once 'thePromise' resolves, displaying 'theValue'.

```Svelte
{#await thePromise then theValue}

the value is {theValue}

{/await}
```

--------------------------------

### Define a basic CSS class rule

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/script-style-tags-multiple-nested/input.html

A simple CSS rule defining the '.a' class with a 'color' property set to 'blue'. This demonstrates basic CSS syntax for styling elements.

```css
.a { color: blue; }
```

--------------------------------

### JSON-LD Schema Definition in Svelte

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/no-tag-snippings.html

An example of embedding a JSON-LD schema markup directly within a Svelte component or HTML context. This is typically used for structured data to improve SEO.

```JSON
{ "@context": "https://schema.org", "@type": "etc..." }
```

--------------------------------

### Svelte Text Interpolation Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/let.html

This snippet illustrates a basic example of text interpolation within Svelte templates. It demonstrates how to embed dynamic values, such as 'id' and 'title', directly into the markup using curly braces {}. This is a fundamental Svelte feature for displaying reactive data.

```Svelte
Thing #{id}: {title}
```

--------------------------------

### Define CSS Rule for H1 Elements

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-scripts-options-markup.html

This snippet shows a basic CSS rule that sets the color of `h1` elements to red. It's a fundamental example of inline styling within a component or a stylesheet.

```CSS
h1 { color: red; }
```

--------------------------------

### Handle Asynchronous Operations with Svelte Await Block

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/await-block-no-args.html

Demonstrates the Svelte `{#await}` block for handling asynchronous operations, showing states for loading, success, and error. It allows displaying different content based on the promise's resolution, providing a clean way to manage UI for promises.

```Svelte
{#await thePromise}

loading...

{:then}

the value is {theValue}

{:catch}

oh no! {theError.message}

{/await}
```

--------------------------------

### Basic Svelte Template Interpolation

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-options-scripts-styles.html

A simple Svelte template snippet demonstrating how to interpolate a JavaScript variable into HTML content using curly braces.

```Svelte
Hello {name}!
```

--------------------------------

### JavaScript Constant Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/output.html

A simple JavaScript constant declaration demonstrating variable assignment with an embedded variable placeholder.

```javascript
const asd = {variable};
```

--------------------------------

### Basic CSS Rule for H1 Element

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-markup-options-scripts.html

This snippet defines a simple CSS rule to set the color of `<h1>` elements to red. It demonstrates fundamental CSS syntax for styling HTML elements.

```css
h1 { color: red; }
```

--------------------------------

### Configure Prettier for Svelte in .prettierrc

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

Example `.prettierrc` configuration file to enable the Svelte plugin and set the Svelte parser for `.svelte` files. This configuration allows Prettier to properly format Svelte components.

```jsonc
// .prettierrc
{
    // ..
    "plugins": ["prettier-plugin-svelte"],
    "pluginSearchDirs": ["."], // should be removed in v3
    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}
```

--------------------------------

### Svelte Each Block with Destructuring and Default Value

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/each-await-block-destructuring/input.html

Demonstrates iterating over an array in Svelte using an `{#each}` block, applying object destructuring to array elements, and providing a default empty string value for property `b` if it's undefined.

```Svelte
{#each arr as { a,b =''}} {a} {b} {/each}
```

--------------------------------

### JavaScript Constant Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-styles-markup-scripts.html

Demonstrates the declaration of a constant variable named 'name' with a string value 'world' in JavaScript.

```javascript
const name = "world";
```

--------------------------------

### Svelte Allow Shorthand Example (Disabled)

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

Demonstrates the expanded Svelte component attribute syntax when the `svelteAllowShorthand` option is set to `false`. This explicitly shows the attribute name and its bound value.

```html
<!-- allowShorthand: false -->
<input type="text" value={value} />
```

--------------------------------

### HTML Whitespace Sensitivity Example in Svelte

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

This code example demonstrates how Prettier formats inline HTML elements like `<span>` due to whitespace sensitivity, which can lead to a 'hugging' appearance. It shows the original code and its formatted version, explaining the underlying reason for the output.

```HTML
<!-- before formatting -->
<span><span>assume very long text</span></span>
```

```HTML
<!-- after formatting -->
<span
      ><span>assume very long text</span
    ></span
>
```

--------------------------------

### Declare JavaScript Variable 'name1'

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-none2.html

Another example of declaring a constant string variable, named 'name1' with the value 'world'. This demonstrates similar variable declaration syntax, useful for distinct variable instances.

```JavaScript
const name1 = "world";
```

--------------------------------

### Define Basic CSS Style for H1 Element

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-options-scripts-markup.html

This snippet demonstrates how to apply a basic CSS style to an `<h1>` HTML element, setting its text color to red. This is a common way to define component-scoped styles within Svelte or other web frameworks.

```css
h1 { color: red; }
```

--------------------------------

### Svelte Each Block Iteration with Key

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/animation.html

This snippet demonstrates the basic usage of the `{#each}` block in Svelte for iterating over an array or iterable. The `(thing)` part specifies a key, which helps Svelte efficiently re-render list items when the data changes, preventing unnecessary DOM manipulations.

```Svelte
{#each things as thing (thing)}

flips

{/each}
```

--------------------------------

### Svelte Template Object Literal

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/output.html

An example of an object literal within Svelte's mustache-like template syntax, often used for passing props or defining reactive values. The formatting, including newlines and indentation, is preserved.

```svelte
{{
        a: true,
    }}
```

--------------------------------

### JavaScript Template Literal Whitespace Preservation

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/input.html

Illustrates Prettier's behavior regarding internal whitespace within a JavaScript template literal. The example demonstrates that significant whitespace inside template literals is preserved.

```JavaScript
nested          should          stay          as is
```

--------------------------------

### Declare JavaScript Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/indent-script-and-style.html

This snippet declares a simple variable 'x' and assigns it an integer value of 5 in JavaScript.

```JavaScript
let x = 5;
```

--------------------------------

### Apply Basic CSS Styling to a Div Element

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/trim-whitespace-after-style/output.html

This snippet illustrates a simple CSS rule targeting a 'div' HTML element. It sets the 'color' property to 'red', demonstrating a basic style declaration.

```CSS
div { color: red; }
```

--------------------------------

### Malformed Svelte HTML Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/markdown.md

This snippet presents an intentionally malformed Svelte HTML block, specifically missing a closing tag for the `<h1>` element. It serves as an example of code that a formatting tool like Prettier would typically identify and correct.

```svelte
<h1>{greeting}, {name}!</h1
```

--------------------------------

### CSS H1 Styling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-styles-markup-scripts.html

A basic CSS rule to set the color of an H1 element to red.

```css
h1 { color: red; }
```

--------------------------------

### Basic CSS Rule

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-tag-generics.html

A simple CSS rule defining the color property for a div element. This snippet shows fundamental CSS syntax for styling HTML elements.

```CSS
div { color: red; }
```

--------------------------------

### JavaScript Constant Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-and-module.html

This snippet illustrates the declaration of constants in JavaScript using both `export` for module-level availability and `const` for block-scoped immutability.

```JavaScript
export const Foo = "Bar";
const name = "world";
```

--------------------------------

### TypeScript Type and Declaration Examples

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/typescript-without-lang-attr.html

This snippet illustrates a variety of TypeScript constructs. It defines an interface, demonstrates conditional and template literal types, declares variables with explicit types, defines a standard function, an arrow function, an abstract class, and an enum. This covers core aspects of type definition and declaration in TypeScript.

```TypeScript
interface A { b: string; } type Foo<T> = T extends true ? A & { b: boolean } : string; type SeussFish = `${Quantity | Color} fish`; const a: A = { b: "" }; function foo(a: A): void { const foo = <Foo<true>>a; return null as any; } const bar: () => void = () => {}; abstract class B<T> { t: T; } enum E { a = 1, }
```

--------------------------------

### Apply CSS style to a div element

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/trim-whitespace-after-style/input.html

This snippet illustrates a basic CSS rule to set the text color of all 'div' elements to red.

```CSS
div { color: red; }
```

--------------------------------

### Svelte Each Block Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/each-block-else.html

This Svelte template snippet shows how to iterate over an array named `animals` using the `{#each}` block. It also includes an `{:else}` block to display content when the `animals` array is empty.

```Svelte
{#each animals as animal}

{animal}

{:else}

no animals

{/each}
```

--------------------------------

### Basic Svelte Component Structure

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-scripts-styles-markup-options.html

This snippet provides a minimal Svelte component demonstrating variable declaration in JavaScript, basic CSS styling for an H1 tag, and interpolation of the variable within the Svelte template. It showcases the core structure of a Svelte single-file component.

```Svelte
const name = "world"; h1 { color: red; }\n\nHello {name}!
```

--------------------------------

### CSS H1 Styling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-markup-scripts-styles.html

A CSS rule targeting H1 elements to set their text color to red, illustrating basic style application.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Await Block with Shorthand Then and Catch

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/svelte-await-block-break/input.html

Illustrates a Svelte `{#await}` block where the `then` clause is defined directly in the opening tag, implicitly handling the pending state. This is a more concise way to manage asynchronous data when the pending state doesn't require distinct UI.

```Svelte
{#await promise then value}
  <!-- Content for resolved state, 'value' is the resolved promise value -->
{:catch error}
  <!-- Content for rejected state, 'error' is the error object -->
{/await}
```

--------------------------------

### Svelte HTML Injection with getCssText()

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/no-tag-snippings.html

Demonstrates how to inject raw HTML content into a Svelte component using the `{@html ...}` directive. This is often used for dynamic styling, external content, or when rendering pre-formatted HTML strings.

```Svelte
{@html `${getCssText()}`}
```

--------------------------------

### CSS Heading Style

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-none.html

A basic CSS rule targeting the h1 element to set its text color to red.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Await Block with Destructuring and Default Value (Then Block)

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/each-await-block-destructuring/input.html

Shows handling a promise in Svelte using an `{#await}` block. The `then` block destructures the resolved value, providing a default empty string for property `b` if it's undefined.

```Svelte
{#await promise then { a,b =''}} {a} {b} {/await}
```

--------------------------------

### Svelte Component JavaScript Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-markup-styles-scripts.html

A JavaScript constant declaration, typically found within the <script> block of a Svelte component to define reactive variables.

```JavaScript
const name = "world";
```

--------------------------------

### Svelte Template with Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-styles-markup-scripts.html

An example of a Svelte template string that includes an embedded JavaScript variable using curly braces.

```svelte
Hello {name}!
```

--------------------------------

### Svelte Key Block with Object Property

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/key-block.html

Shows how to use an object property (expr.obj) as the key. This allows for fine-grained control over re-rendering, triggering an update only when the specific property of an object changes, rather than the entire object.

```Svelte
{#key expr.obj}

hello

{/key}
```

--------------------------------

### JavaScript Constant Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-markup-scripts-styles.html

A basic JavaScript snippet showing the declaration of a constant variable named 'name' with a string value.

```JavaScript
const name = "world";
```

--------------------------------

### Svelte Await Block with Loading State and Destructuring (Then Block)

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/each-await-block-destructuring/input.html

Illustrates an `{#await}` block in Svelte that displays a 'Loading' state while a promise is pending. Once resolved, the `then` block destructures the result, assigning a default empty string to property `b`.

```Svelte
{#await promise} Loading {:then { a,b =''}} {a} {b} {/await}
```

--------------------------------

### Displaying a Basic Alert in JavaScript

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-inside-element.html

This snippet shows the most basic usage of the `alert()` function in JavaScript. It takes a single argument, which is converted to a string and displayed in a modal dialog box. This function is typically used for simple notifications or debugging purposes in web browsers.

```JavaScript
alert(1);
```

--------------------------------

### Apply CSS Pseudo-element Content

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/indent-script-and-style.html

This CSS snippet uses the `::after` pseudo-element to add generated content 'No indent' to a `div` element.

```CSS
div::after { content: "No indent"; }
```

--------------------------------

### Declare a JavaScript constant variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/trim-whitespace-after-style/input.html

This snippet demonstrates the declaration of a constant variable named 'name' with a string value 'world' in JavaScript.

```JavaScript
const name = "world";
```

--------------------------------

### Basic Svelte Component Structure

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-options-styles-scripts.html

A simple Svelte component demonstrating the combination of HTML-like templating, CSS styling, and JavaScript logic. This snippet shows fragments typically found within a .svelte file.

```Svelte
Hello {name}!
```

```CSS
h1 { color: red; }
```

```JavaScript
const name = "world";
```

--------------------------------

### Svelte Template Variable Display

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-options-markup-scripts-styles.html

A simple Svelte template snippet demonstrating how to embed a JavaScript variable within HTML using curly braces.

```Svelte
Hello {name}!
```

--------------------------------

### Iterating with Svelte #each Block

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/animation-with-expression.html

This Svelte template snippet illustrates how to use the `#each` block to iterate over an array named `things`. It binds each item to the variable `thing` and uses `thing` as the key for efficient list rendering. Inside the loop, it displays the `name` property of each `thing`.

```Svelte
{#each things as thing (thing)}

{thing.name}

{/each}
```

--------------------------------

### Svelte Template String Interpolation

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/element-with-multi-mustache-no-space.html

This snippet shows a basic Svelte template string that interpolates two variables, `greeting` and `name`. This is a common pattern in Svelte components for displaying dynamic content.

```Svelte
{greeting}{name}!
```

--------------------------------

### Format Project with Prettier CLI

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/README.md

Uses the Prettier command-line interface to format all files in the current directory. This is a common way to apply formatting across a project.

```bash
npx prettier --write .
```

--------------------------------

### Svelte Await Block for Asynchronous Operations

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/await-block.html

This Svelte template snippet demonstrates how to use the `{#await}` block to gracefully handle asynchronous operations. It shows the `loading...` state while the promise is pending, displays `the value is {theValue}` upon successful resolution, and catches errors with `oh no! {theError.message}` if the promise rejects.

```Svelte
{#await thePromise}

loading...

{:then theValue}

the value is {theValue}

{:catch theError}

oh no! {theError.message}

{/await}
```

--------------------------------

### Svelte Await Block with Promise Handling and Destructuring

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/await-then-destruct-rest.html

This snippet demonstrates the Svelte `{#await}` block's capabilities. It initializes four promises: two resolving with an object and an array, and two rejecting with an object and an array. The `{#await}` blocks then show how to destructure values from resolved promises in the `then` block and from rejected promises in the `catch` block, using both object and array destructuring syntax.

```Svelte
let object = Promise.resolve({ a: 1, b: 2, c: 3 }); let array = Promise.resolve([1, 2, 3, 4, 5, 6]); let objectReject = Promise.reject({ a: 1, b: 2, c: 3 }); let arrayReject = Promise.reject([1, 2, 3, 4, 5, 6});

{#await object then { a, ...rest }}
a: {a}
rest: {JSON.stringify(rest)}
{/await}

{#await array then [a, b, ...rest]}
a: {a}
b: {b}
rest: {JSON.stringify(rest)}
{/await}

{#await objectReject then value} resolved {:catch { a, ...rest }}
a: {a}
rest: {JSON.stringify(rest)}
{/await}

{#await arrayReject then value} resolved {:catch [a, b, ...rest]}
a: {a}
b: {b}
rest: {JSON.stringify(rest)}
{/await}
```

--------------------------------

### Complete Svelte Component Structure

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/markdown.md

This snippet illustrates a full Svelte single-file component, including a module script for global context, a regular script for component logic, HTML templating with expressions, and scoped CSS styling. It demonstrates the typical layout of a Svelte component.

```svelte
<script context="module">
    const greeting = "Hello";
</script>

<script>
    const name = "world";
</script>

<h1>{greeting}, {name}!</h1>

<style>
    h1 {
        color: green;
    }
</style>
```

--------------------------------

### Svelte Each Block with Const Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/const/output.html

Demonstrates the use of an #each block for iterating over an array, combined with a @const declaration to assign a new variable within the loop's scope.

```Svelte
{#each \[1, 2\] as foo} {@const bar = foo} {foo}{bar} {/each}
```

--------------------------------

### Basic CSS Styling for Iframes

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/script-style-script-snipping.html

Illustrates a simple CSS rule to set the width of an iframe element to 100% of its parent container. This is a fundamental CSS property for ensuring responsive layouts and proper display of embedded content.

```CSS
iframe { width: 100%; }
```

--------------------------------

### Declaring a Constant Variable in JavaScript

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-scripts-markup-options.html

Illustrates the declaration of a constant string variable named 'name' with the value 'world' using JavaScript. This is a common pattern for defining static data.

```JavaScript
const name = "world";
```

--------------------------------

### Svelte Conditional Block Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/if-inline.html

Demonstrates a basic conditional block in Svelte using the {#if} directive. This syntax allows rendering content based on a boolean expression.

```Svelte
{#if foo}bar{/if}
```

--------------------------------

### Svelte HTML Templating

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-styles-scripts-options.html

Demonstrates basic HTML markup within a Svelte component, including how to display reactive variables using curly braces.

```HTML
Hello {name}!
```

--------------------------------

### Svelte Await Block for Asynchronous Operations

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/await-block-with-only-pending.html

This Svelte template snippet illustrates how to use the `{#await}` block to manage asynchronous operations. It displays 'loading...' while `thePromise` is pending and will render its resolved content once the promise settles. This pattern is essential for handling data fetching or other async tasks in Svelte components.

```Svelte
{#await thePromise}

loading...

{/await}
```

--------------------------------

### Declare a JavaScript Constant Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/trim-whitespace-after-style/output.html

This snippet demonstrates the declaration of a constant variable in JavaScript, assigning it a string value. This is a fundamental syntax element in modern JavaScript.

```JavaScript
const name = "world";
```

--------------------------------

### Basic JavaScript Console Log

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/single-quote.html

A simple JavaScript example showing the use of `console.log()` to print a string to the console. This function is widely used for debugging and displaying information during development.

```JavaScript
console.log('hi')
```

--------------------------------

### CSS Style Rule for H1 Element

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-options-scripts-styles.html

A basic CSS rule that targets the H1 HTML element and sets its text color to red. This demonstrates a simple inline style definition.

```CSS
h1 { color: red; }
```

--------------------------------

### Iterating over key-value pairs in Svelte

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/each-block-destructured.html

Demonstrates how to iterate over an array of arrays (or a Map-like structure) in Svelte, destructuring each item into `key` and `value` variables. This is useful for displaying data where both an identifier and its corresponding value are needed.

```Svelte
{#each animals as \[key, value\]}

{key}: {value}

{/each}
```

--------------------------------

### Render List with Svelte Each Block

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/each-inline.html

This snippet illustrates a fundamental Svelte templating construct: the `{#each}` block. It iterates over an array named `animals`, making each `animal` available within the block to be rendered. This is commonly used for displaying dynamic lists or collections of data.

```Svelte
{#each animals as animal}{animal}{/each}
```

--------------------------------

### Svelte Component Text Interpolation

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-markup-scripts-options.html

This snippet shows a basic Svelte template where the {name} variable is interpolated into the text. This is a common pattern for displaying dynamic data in Svelte components.

```svelte
Hello {name}!
```

--------------------------------

### JavaScript Variable Declaration and Global Assignment

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/svelte-head-script-content.html

This snippet declares a local variable `foo` and initializes it with the string value 'bar'. Subsequently, it assigns the value of this local variable to `window.foo`, making it a globally accessible property in a browser environment. This pattern is often used for debugging or exposing internal state.

```JavaScript
let foo = "bar"; window.foo = foo;
```

--------------------------------

### Svelte Template: Displaying Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-scripts-options-styles.html

This Svelte template snippet demonstrates how to embed a JavaScript variable's value directly into the HTML output using curly braces `{}`. This is a core feature for dynamic content in Svelte components.

```Svelte
Hello {name}!
```

--------------------------------

### Svelte Await Block for Promise Handling

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/await-block-with-catch-without-pending.html

This Svelte template snippet demonstrates how to use the {#await} block to elegantly handle promises. It shows content while the promise is pending, displays the resolved value upon success, and catches any errors, providing a user-friendly message.

```Svelte
{#await thePromise then theValue}

the value is {theValue}

{:catch}

oh no! {theError.message}

{/await}
```

--------------------------------

### Svelte Conditional Rendering

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/if-inline-elseif-else.html

This snippet illustrates how to implement conditional logic in Svelte templates using the {#if} {:else if} {:else} {/if} block structure. It renders different content based on the truthiness of 'foo' or 'baz'.

```Svelte
{#if foo}bar{:else if baz}qux{:else}foobar{/if}
```

--------------------------------

### Svelte Await Block for Asynchronous Operations

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/nested-destructuring.html

This Svelte template snippet illustrates the use of the `{#await}` block to manage asynchronous operations. It shows how to display a loading state while a promise is pending, render data upon successful resolution using `{:then}`, and catch and display errors using `{:catch}`. It expects `thePromise` to be a Promise and handles nested data structures for success and error.

```Svelte
{#await thePromise}

loading...

{:then { data: [theValue] }}

the value is {theValue}

{:catch { data: [{ data: [theError] }] }}

oh no! {theError.message}

{/await}
```

--------------------------------

### Basic CSS Styling for Div Elements

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/style-inside-element.html

This CSS snippet applies a red color to all 'div' HTML elements. It's a fundamental example of how to style elements using CSS.

```css
div { color: red; }
```

--------------------------------

### Svelte Await Block with Const Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/const.html

Illustrates handling asynchronous operations with `{#await}` in Svelte. It captures the resolved `result` of a promise and declares a new constant `bar` from it using `{@const}` within the block.

```Svelte
{#await aPromise then result} {@const bar = result} {/await}
```

--------------------------------

### JavaScript: Declaring a Constant Variable

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-scripts-options-styles.html

This JavaScript snippet, typically found within the <script> block of a Svelte component, declares a constant variable named 'name' and initializes it with the string 'world'. This variable can then be used in the component's template.

```JavaScript
const name = "world";
```

--------------------------------

### Declare a Constant Variable in JavaScript

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/single-attribute-per-line.html

This snippet shows how to declare and initialize a constant variable named 'hi' with an empty string value in JavaScript. The declaration is repeated twice in the provided context.

```JavaScript
const hi = ""; const hi = "";
```

--------------------------------

### Svelte Each Block with Const Declaration

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/const.html

Demonstrates iterating over an array using `{#each}` in Svelte. It shows how to declare a new constant variable `bar` within the block using `{@const}` and then display both the iteration variable `foo` and the new constant `bar`.

```Svelte
{#each \[1, 2\] as foo} {@const bar = foo} {foo}{bar} {/each}
```

--------------------------------

### Generic String Literal with Preserved Spacing

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/output.html

A string literal demonstrating the preservation of internal whitespace, which is crucial for formatting tools like Prettier. This could represent a template literal or a multi-line string.

```text
nested          should          stay          as is
```

--------------------------------

### Svelte Variable Interpolation Example

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/element-with-multi-mustache.html

This snippet illustrates the fundamental way to display dynamic content in a Svelte template. Variables enclosed in curly braces `{}` are automatically rendered as part of the HTML output.

```Svelte
{greeting} {name}!
```

--------------------------------

### Svelte Expression with JSON Stringification

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/pre-mustache/input.html

Demonstrates an inline Svelte expression that uses JavaScript's JSON.stringify method to format an object into a string, showing how Prettier might handle such constructs.

```Svelte
{JSON.stringify({ foo:'bar'},null, 2)}
```

--------------------------------

### Svelte Key Block for Forced Re-rendering

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/svelte-key-block-break/output.html

This snippet illustrates the Svelte `{#key ...}` block. It is used to force a component or element to re-render when the value of the `key` expression changes. This is particularly useful for animations or when you need to reset a component's state, as Svelte will destroy and recreate the block's content.

```Svelte
{#key bla}
loooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooong
{/key}
```

--------------------------------

### Define a CSS Class Style

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/script-style-tags-multiple-nested/output.html

This CSS snippet defines a style rule for a class selector named 'a', setting its 'color' property to 'blue'. This is a basic example of applying styles to HTML elements using CSS classes.

```css
.a { color: blue; }
```

--------------------------------

### CSS: Styling an Element in Svelte

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-markup-scripts-options-styles.html

This CSS snippet, usually placed within the <style> block of a Svelte component, defines a style rule for `h1` elements. It sets the text color to red. In Svelte, styles defined this way are typically scoped to the component.

```CSS
h1 { color: red; }
```

--------------------------------

### Svelte Each Block with Else Condition

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/formatting/samples/svelte-each-block-break/input.html

Demonstrates the basic structure of a Svelte `{#each}` block, which is used for iterating over an array or iterable. It also includes the `{:else}` block, which provides content to render when the iterable is empty.

```Svelte
{#each bla as blubb}

loooooooooooooooooooooooooooooong

{:else}

loooooooooooooooooooooooooooooong

{/each} {#each bla as blubb}

loooooooooooooooooooooooooooooong

{:else}

loooooooooooooooooooooooooooooong

{/each} {#each bla as blubb}

loooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooong

{:else}

loooooooooooooooooooooooooooooong

loooooooooooooooooooooooooooooong

{/each}
```

--------------------------------

### Apply CSS Style to H1 Elements

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-none2.html

Defines a basic CSS rule to set the text color of all <h1> HTML elements to red. This styling is typically placed within a <style> block in a web component or HTML file to apply visual styles.

```CSS
h1 { color: red; }
```

--------------------------------

### SCSS Variable Definition and Usage

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/style-type-scss.html

This snippet illustrates how to define a variable using SCSS syntax ("$color: red;") and then use that variable within a CSS rule ("div { color: $color; }"). This pattern promotes reusability and maintainability in stylesheets.

```SCSS
$color: red; div { color: $color; }
```

--------------------------------

### Displaying a Variable in Svelte Template

Source: https://github.com/sveltejs/prettier-plugin-svelte/blob/master/test/printer/samples/sort-order-styles-scripts-markup-options.html

Shows how to embed a JavaScript variable 'name' directly into a Svelte component's HTML template for dynamic content display. This highlights Svelte's reactive syntax for data binding.

```Svelte
Hello {name}!
```