Brunobkr/llama.cpp_AlgMor24_github

1> This documentation is for `prettier-plugin-svelte` version 4 which only works with Svelte 5. See [this branch](https://github.com/sveltejs/prettier-plugin-svelte/tree/version-3) for documentation of version 3 which is compatible with Svelte 4.2 3# Prettier for Svelte components4 5Format your Svelte components using Prettier.6 7## Features8 9- Format your HTML, CSS, and JavaScript using prettier10- Format Svelte syntax, e.g. each loops, if statements, await blocks, etc.11- Format the JavaScript expressions embedded in the Svelte syntax12    - e.g. expressions inside of `{}`, event bindings `onclick={...}`, and more13 14## VS Code Extension15 16This plugin is bundled in the [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension. If you only format through the editor, you therefore don't need to do anything in addition.17 18The extension lets you define options through extension-specific configuration. These settings are ignored however if there's any configuration file (`.prettierrc` for example) present.19 20## Prettier Plugin21 22Installing the plugin as a package allows:23 24- customizing the formatting behavior25- using the command line to format26- using a different IDE27- using the official VS Code [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension to format Svelte files28 29### Compatibility30 31- `prettier-plugin-svelte@4` only works with `prettier@3` and Svelte 5+32- `prettier-plugin-svelte@3` only works with `prettier@3`33- `prettier-plugin-svelte@2` only works with `prettier@2`34 35### Setup36 37Install Prettier and the plugin as a dev dependency:38 39```bash40npm i --save-dev prettier-plugin-svelte prettier41```42 43Then create a `.prettierrc` [configuration file](https://prettier.io/docs/en/configuration.html):44 45```jsonc46// .prettierrc47{48    // ..49    "plugins": ["prettier-plugin-svelte"],50    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],51}52```53 54If you want to customize some formatting behavior, see section [Options](#options).55 56### CLI Usage57 58Format your code using the Prettier CLI.59 60```bash61npx prettier --write .62```63 64As part of your scripts in `package.json`:65 66```jsonc67// package.json68{69    // ..70    "scripts": {71        "format": "prettier --write .",72    },73}74```75 76If you want to customize some formatting behavior, see section [Options](#options).77 78## Options79 80`Configurations are optional`81 82Make a `.prettierrc` file in your project directory and add your preferred [options](https://prettier.io/docs/en/options.html) to [configure Prettier](https://prettier.io/docs/en/configuration.html). When using Prettier through the CLI, you can also pass options through CLI flags, but a `.prettierrc` file is recommended.83 84### Svelte Sort Order85 86Sort order for `svelte:options`, scripts, markup, and styles.87 88Format: join the keywords `options`, `scripts`, `markup`, `styles` with a `-` in the order you want; or `none` if you don't want Prettier to reorder anything.89 90| Default                         | CLI Override                   | API Override                |91| ------------------------------- | ------------------------------ | --------------------------- |92| `options-scripts-markup-styles` | `--svelte-sort-order <string>` | `svelteSortOrder: <string>` |93 94> 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`).95 96### Svelte Allow Shorthand97 98Option to enable/disable component attribute shorthand if attribute name and expression are same.99 100Example:101 102<!-- prettier-ignore -->103```html104<!-- allowShorthand: true -->105<input type="text" {value} />106 107<!-- allowShorthand: false -->108<input type="text" value={value} />109```110 111| Default | CLI Override                      | API Override                   |112| ------- | --------------------------------- | ------------------------------ |113| `true`  | `--svelte-allow-shorthand <bool>` | `svelteAllowShorthand: <bool>` |114 115### Svelte Indent Script And Style116 117Whether 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.118 119| Default | CLI Override                              | API Override                         |120| ------- | ----------------------------------------- | ------------------------------------ |121| `true`  | `--svelte-indent-script-and-style <bool>` | `svelteIndentScriptAndStyle: <bool>` |122 123### `.prettierrc` example124 125```json126{127    "svelteSortOrder": "options-styles-scripts-markup",128    "svelteAllowShorthand": false,129    "svelteIndentScriptAndStyle": false130}131```132 133## Usage with Tailwind Prettier Plugin134 135- VS Code Extension: Use it as the default formatter for Svelte files136- Prettier Plugin: Load the Tailwind plugin in the end - [Tailwind docs](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins)137 138```jsonc139// .prettierrc140{141    // ..142    "plugins": [143        "prettier-plugin-svelte",144        "prettier-plugin-tailwindcss", // MUST come last145    ],146}147```148 149Since we are using configuration overrides to handle svelte files, you might also have to configure the [prettier.documentselectors](https://github.com/prettier/prettier-vscode#prettierdocumentselectors) in your VS Code `settings.json`, to tell Prettier extension to handle svelte files, like this:150 151```jsonc152// settings.json153{154    // ..155    "prettier.documentSelectors": ["**/*.svelte"],156}157```158 159## Usage in the browser160 161Usage in the browser is semi-supported. You can import the plugin from `prettier-plugin-svelte/browser` to get a version that depends on `prettier/standalone` and therefore doesn't use any node APIs. What isn't supported in a good way yet is using this without a build step - you still need a bundler like Vite to build everything together as one self-contained package in advance.162 163## Migration164 165> For migration to `prettier-plugin-svelte@3` [see here](https://github.com/sveltejs/prettier-plugin-svelte/tree/version-3?tab=readme-ov-file#migration).166 167- Upgrade to Svelte 5 before upgrading to `prettier-plugin-svelte@4`, as it doesn't support older Svelte versions.168- `svelteStrictMode` option has been removed. Attributes are now never quoted, because this will mean "stringify this attribute value" in a future Svelte version.169- `svelteBracketNewLine` option has been removed. Use Prettier's [bracketSameLine](https://prettier.io/docs/en/options.html#bracket-line) option instead.170 171## FAQ172 173### Why is the closing or opening tag (`>` or `<`) hugging the inner tag or text?174 175If you are wondering why this code176 177<!-- prettier-ignore -->178```html179<span><span>assume very long text</span></span>180```181 182becomes this183 184<!-- prettier-ignore -->185```html186<span187      ><span>assume very long text</span188    ></span189>190```191 192it's because of whitespace sensitivity. For inline elements (`span`, `a`, etc) it makes a difference when rendered if there's a space (or newline) between them. Since we don't know if your slot inside your Svelte component is surrounded by inline elements, Svelte components are treated as such, too. You can adjust this whitespace sensitivity through [this setting](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity). You can read more about HTML whitespace sensitivity [here](https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting).193