{"_id":"@bradley-developyn/developyn-prettier-plugin-svelte","_rev":"1-0b3f15105bcb647041e121c6f63ee8a7","name":"@bradley-developyn/developyn-prettier-plugin-svelte","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bradley-developyn/developyn-prettier-plugin-svelte","version":"1.0.0","description":"Svelte plugin for prettier with some Developyn specific rules.","main":"plugin.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./plugin.js"},"./package.json":"./package.json"},"scripts":{"build":"rollup -c","test":"ava","prepare":"npm run build","prepublishOnly":"npm test"},"keywords":["prettier","svelte"],"author":{"name":"James Birtles","email":"jameshbirtles@gmail.com"},"license":"MIT","devDependencies":{"@rollup/plugin-commonjs":"14.0.0","@rollup/plugin-node-resolve":"11.0.1","@types/node":"^14.0.0","ava":"3.15.0","prettier":"^3.0.0","rollup":"2.36.0","rollup-plugin-typescript":"1.0.1","svelte":"^3.57.0","ts-node":"^10.1.1","tslib":"^2.6.0","typescript":"5.1.3"},"peerDependencies":{"prettier":"^3.0.0","svelte":"^3.2.0 || ^4.0.0-next.0"},"gitHead":"abaa6c386edf385d573e52be27f8152fef3b2bbe","_id":"@bradley-developyn/developyn-prettier-plugin-svelte@1.0.0","_nodeVersion":"16.15.1","_npmVersion":"9.6.5","dist":{"integrity":"sha512-ZKVupxJPVIK1AmFtyULvS469hNrEHfsPEIrORSO5bPE1OI11dZoXIOtl6gFIlhIzNTSQSN7NJZjdMUEi+sRAJQ==","shasum":"a2c4adda79fb7eabb9d5856ba6bf01c1b0ddb7ab","tarball":"https://registry.npmjs.org/@bradley-developyn/developyn-prettier-plugin-svelte/-/developyn-prettier-plugin-svelte-1.0.0.tgz","fileCount":6,"unpackedSize":1371068,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwsslzmCqyB/n/HGsjiUUCHp4uHRRuS4SFOznGfmjSFAiAJiOo3dI+Lt6TvU25CD+XVuU+80vcww7vG03Pv3lSuhg=="}]},"_npmUser":{"name":"bradley-developyn","email":"bradley.marsh@developyn.com"},"directories":{},"maintainers":[{"name":"bradley-developyn","email":"bradley.marsh@developyn.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/developyn-prettier-plugin-svelte_1.0.0_1698757663891_0.725742085378051"},"_hasShrinkwrap":false},"1.0.1":{"name":"@bradley-developyn/developyn-prettier-plugin-svelte","version":"1.0.1","description":"Svelte plugin for prettier with some Developyn specific rules.","main":"plugin.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./plugin.js"},"./package.json":"./package.json"},"scripts":{"build":"rollup -c","test":"ava","prepare":"npm run build","prepublishOnly":"npm test"},"keywords":["prettier","svelte"],"author":{"name":"James Birtles","email":"jameshbirtles@gmail.com"},"license":"MIT","devDependencies":{"@rollup/plugin-commonjs":"14.0.0","@rollup/plugin-node-resolve":"11.0.1","@types/node":"^14.0.0","ava":"3.15.0","prettier":"^3.0.0","rollup":"2.36.0","rollup-plugin-typescript":"1.0.1","svelte":"^3.57.0","ts-node":"^10.1.1","tslib":"^2.6.0","typescript":"5.1.3"},"peerDependencies":{"prettier":"^3.0.0","svelte":"^3.2.0 || ^4.0.0-next.0"},"gitHead":"37557fd4e5d44728b7b991724dccbbb413da7d29","_id":"@bradley-developyn/developyn-prettier-plugin-svelte@1.0.1","_nodeVersion":"16.15.1","_npmVersion":"9.6.5","dist":{"integrity":"sha512-uDJhJ4xiaTa06Ude3R2j+thYOHhysf8uEE7XD5+cxnc1s5EvfFH2jd2tDDCuO+fk+/Tf61whIMcD14Qsnq1viw==","shasum":"87a3cde53a141eae60d8ca5e9b6287d48818de92","tarball":"https://registry.npmjs.org/@bradley-developyn/developyn-prettier-plugin-svelte/-/developyn-prettier-plugin-svelte-1.0.1.tgz","fileCount":6,"unpackedSize":1371496,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAKJTGqmM3ASQhyj+NQ4WXfh7PDJPx3FCcWaInALI65gIgVMci6fzL92TXRWtitAIUtvqrUr9xmX4o8035V6WCooI="}]},"_npmUser":{"name":"bradley-developyn","email":"bradley.marsh@developyn.com"},"directories":{},"maintainers":[{"name":"bradley-developyn","email":"bradley.marsh@developyn.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/developyn-prettier-plugin-svelte_1.0.1_1698758184278_0.6711596794984078"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-31T13:07:43.832Z","1.0.0":"2023-10-31T13:07:44.194Z","modified":"2023-10-31T13:16:24.762Z","1.0.1":"2023-10-31T13:16:24.600Z"},"maintainers":[{"name":"bradley-developyn","email":"bradley.marsh@developyn.com"}],"description":"Svelte plugin for prettier with some Developyn specific rules.","keywords":["prettier","svelte"],"author":{"name":"James Birtles","email":"jameshbirtles@gmail.com"},"license":"MIT","readme":"# Prettier for Svelte components\n\nFormat your Svelte components using Prettier.\n\n## Developyn\n\nThis is a fork of the original `prettier-plugin-svelte` available [here](https://www.npmjs.com/package/prettier-plugin-svelte) with some Developyn\nspecific formatting rules. This will mainly be used by Developyn.\n\n## Features\n\n-   Format your HTML, CSS, and JavaScript using prettier\n-   Format Svelte syntax, e.g. each loops, if statements, await blocks, etc.\n-   Format the JavaScript expressions embedded in the Svelte syntax\n    -   e.g. expressions inside of `{}`, event bindings `on:click=\"\"`, and more\n\n## How to use in your IDE\n\nThis plugin comes bundled with the [Svelte for VS Code](https://github.com/sveltejs/language-tools). If you only format through the editor, you therefore don't need to do anything in addition.\n\nIf you want to\n\n-   customize some formatting behavior\n-   use the official VS Code Prettier extension to format Svelte files instead\n-   use a different editor\n-   also want to use the command line to format\n\nthen you need to install the plugin and setup a Prettier configuration file as described in the next section.\n\nSome 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.\n\n## How to install manually\n\nFirst install Prettier and the plugin as a dev dependency:\n\n```bash\nnpm i --save-dev prettier-plugin-svelte prettier\n```\n\nThen create a `.prettierrc` file to tell Prettier about the plugin:\n\n```json\n{\n    \"plugins\": [\"prettier-plugin-svelte\"]\n}\n```\n\nIf you're using `prettier-plugin-svelte` version 2 with `pnpm` and have problems getting it to work, you may need to use a `.prettierrc.cjs` file instead to point Prettier to the exact location of the plugin using `require.resolve`:\n\n```js\nmodule.exports = {\n    pluginSearchDirs: false, // you can omit this when using Prettier version 3\n    plugins: [require('prettier-plugin-svelte')],\n    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],\n\n    // Other prettier options here\n};\n```\n\n> Do NOT use the above with version 3 of the plugin\n\nIf you want to customize some formatting behavior, see section \"Options\" below.\n\n## How to use (CLI)\n\nFormat your code using Prettier CLI.\n\nAs a one-time run:\n\n```\nnpx prettier --write --plugin prettier-plugin-svelte .\n```\n\nAs part of your scripts in `package.json`:\n\n```\n\"format\": \"prettier --write  --plugin prettier-plugin-svelte .\"\n```\n\n> There's currently [an issue with Prettier 3](https://github.com/prettier/prettier/issues/15079) which requires the seemingly redundant `--plugin` setting\n\nIf you want to customize some formatting behavior, see section \"Options\" below.\n\n## Options\n\n`Configurations are optional`\n\nMake 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.\n\n### Svelte Sort Attributes\n\nSort attributes in the order `attribute`, `bindings`, `events`. These will also be order alphabetically.\n\nFormat: `true` or `false`\n\n| Default  | CLI Override                         | API Override                      |\n| -------- | ------------------------------------ | --------------------------------- |\n| `false`  | `--svelte-sort-attributes <boolean>` | `svelteSortAttributes: <boolean>` |\n\n\n### Svelte Sort Order\n\nSort order for `svelte:options`, scripts, markup, and styles.\n\nFormat: 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.\n\n| Default                         | CLI Override                   | API Override                |\n| ------------------------------- | ------------------------------ | --------------------------- |\n| `options-scripts-markup-styles` | `--svelte-sort-order <string>` | `svelteSortOrder: <string>` |\n\n> 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`).\n\n### Svelte Strict Mode\n\nMore strict HTML syntax: Quotes in attributes and no self-closing DOM elements (except void elements).\n\n> In version 2 this overruled `svelteAllowShorthand`, which is no longer the case.\n\nExample:\n\n<!-- prettier-ignore -->\n```html\n<!-- svelteStrictMode: true -->\n<div foo=\"{bar}\"></div>\n\n<!-- svelteStrictMode: false -->\n<div foo={bar} />\n```\n\n| Default | CLI Override                  | API Override               |\n| ------- | ----------------------------- | -------------------------- |\n| `false` | `--svelte-strict-mode <bool>` | `svelteStrictMode: <bool>` |\n\n### Svelte Allow Shorthand\n\nOption to enable/disable component attribute shorthand if attribute name and expression are same.\n\nExample:\n\n<!-- prettier-ignore -->\n```html\n<!-- allowShorthand: true -->\n<input type=\"text\" {value} />\n\n<!-- allowShorthand: false -->\n<input type=\"text\" value={value} />\n```\n\n| Default | CLI Override                      | API Override                   |\n| ------- | --------------------------------- | ------------------------------ |\n| `true`  | `--svelte-allow-shorthand <bool>` | `svelteAllowShorthand: <bool>` |\n\n### Svelte Bracket New Line\n\n> Deprecated since 2.5.0. Use Prettier 2.4.0 and [bracketSameLine](https://prettier.io/docs/en/options.html#bracket-line) instead.\n\nPut the `>` of a multiline element on a new line. Roughly the Svelte equivalent of the [jsxBracketSameLine](https://prettier.io/docs/en/options.html#jsx-brackets) 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](https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting). You can adjust whitespace sensitivity through [this setting](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity).\n\nExample:\n\n<!-- prettier-ignore -->\n```html\n<!-- before formatting -->\n<span><div>foo</div><span>bar</span></span>\n<div pretend break>content</div>\n\n<!-- after formatting, svelteBracketNewLine true -->\n<span\n    ><div>foo</div>\n    <span>bar</span></span\n>\n<div\n     pretend\n     break\n>\n    content\n</div>\n\n<!-- after formatting, svelteBracketNewLine false -->\n<span\n    ><div>foo</div>\n    <span>bar</span></span>\n<div\n     pretend\n     break>\n    content\n</div>\n```\n\n| Default | CLI Override                       | API Override                   |\n| ------- | ---------------------------------- | ------------------------------ |\n| `true`  | `--svelte-bracket-new-line <bool>` | `svelteBracketNewLine: <bool>` |\n\n### Svelte Indent Script And Style\n\nWhether 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.\n\n| Default | CLI Override                              | API Override                         |\n| ------- | ----------------------------------------- | ------------------------------------ |\n| `true`  | `--svelte-indent-script-and-style <bool>` | `svelteIndentScriptAndStyle: <bool>` |\n\n### `.prettierrc` example\n\n```json\n{\n    \"svelteSortOrder\": \"options-styles-scripts-markup\",\n    \"svelteStrictMode\": true,\n    \"svelteBracketNewLine\": false,\n    \"svelteAllowShorthand\": false,\n    \"svelteIndentScriptAndStyle\": false\n}\n```\n\n## Usage with Tailwind Prettier Plugin\n\nThere is a [Tailwind Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to format classes in a certain way. This plugin must be loaded last, so if you want to use the Tailwind plugin, disable Prettier auto-loading and place `prettier-plugin-tailwindcss` in the end of the plugins array. If you are using VS Code, make sure to have the Prettier extension installed and switch the default formatter for Svelte files to it.\n\n```json5\n// .prettierrc\n{\n    // ..\n    plugins: [\n        'prettier-plugin-svelte',\n        'prettier-plugin-tailwindcss', // MUST come last\n    ],\n    pluginSearchDirs: false, // you can omit this when using Prettier version 3\n}\n```\n\nMore info: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins\n\nSince 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:\n\n```json5\n// settings.json\n{\n    // ..\n    'prettier.documentSelectors': ['**/*.svelte'],\n}\n```\n\n## FAQ\n\n### Why is the closing or opening tag (`>` or `<`) hugging the inner tag or text?\n\nIf you are wondering why this code\n\n<!-- prettier-ignore -->\n```html\n<span><span>assume very long text</span></span>\n```\n\nbecomes this\n\n<!-- prettier-ignore -->\n```html\n<span\n      ><span>assume very long text</span\n    ></span\n>\n```\n\nit's because of whitespsace 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).\n\n### Which versions are compatibly with which Prettier version?\n\n`prettier-plugin-svelte` v2 is compatible with Prettier v2 and incompatible with Prettier v3.\n`prettier-plugin-svelte` v3 is compatible with Prettier v3 and incompatible with lower Prettier versions.\n\n### How to migrate from version 2 to 3?\n\nVersion 3 contains the following breaking changes:\n\n-   Whether or not empty elements/components should self-close is now left to the user - in other words, if you write `<div />` or `<Component />` that stays as is, and so does `<div></div>`/`<Component></Component>`. If `svelteStrictMode` is turned on, it will still only allow `<div></div>` notation for elements (but it will leave your components alone)\n-   `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior. Set `svelteAllowShorthand` to `false` to get back the v2 behavior\n-   Some deprecated `svelteSortOrder` options were removed, see the the options section above for which values are valid for that options\n\nVersion 3 of this plugin requires Prettier version 3, it won't work with lower versions. Prettier version 3 contains some changes to how it loads plugins which may require you to adjust your configuration file:\n\n-   Prettier no longer searches for plugins in the directory automatically, you need to tell Prettier specifically which plugins to use. This means you need to add `\"plugins\": [\"prettier-plugin-svelte\"]` to your config if you haven't already. Also remove the deprecated option `pluginSearchDirs`. When invoking Prettier from the command line, you currently need to pass `--plugin prettier-plugin-svelte` in order to format Svelte files [due to a bug in Prettier](https://github.com/prettier/prettier/issues/15079)\n-   Prettier loads plugins from the plugin array differently. If you have used `require.resolve(\"prettier-plugin-svelte\")` in your `.prettierrc.cjs` to tell Prettier where to find the plugin, you may need to remove that and just write `\"prettier-plugin-svelte\"` instead\n","readmeFilename":"README.md"}