diff --git a/README.md b/README.md index 76ed32fb..1664ba13 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,8 @@ yarn add --dev @trivago/prettier-plugin-sort-imports **Note: If formatting `.vue` sfc files please install `@vue/compiler-sfc` if not in your dependency tree - this normally is within Vue projects.** +**Note: If formatting `.svelte` sfc files please install `prettier-plugin-svelte` and configure it in the Prettier plugin before this plugin - this normally is within Svelte projects.** + ### Usage Add an order in prettier config file. @@ -222,7 +224,7 @@ Having some trouble or an issue ? You can check [FAQ / Troubleshooting section]( | React | ✅ Everything | - | | Angular | ✅ Everything | Supported through `importOrderParserPlugins` API | | Vue | ✅ Everything | `@vue/compiler-sfc` is required | -| Svelte | ⚠️ Soon to be supported. | Any contribution is welcome. | +| Svelte | ✅ Everything | `prettier-plugin-svelte` is required | ### Used by diff --git a/package.json b/package.json index 618cea51..513ad772 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@babel/core": "7.26.0", + "@babel/core": "^7.26.0", "@types/chai": "5.0.1", "@types/jest": "29.5.14", "@types/lodash": "4.17.13", @@ -49,12 +49,14 @@ "@vue/compiler-sfc": "^3.5.12", "jest": "29.7.0", "prettier": "3.3.3", + "prettier-plugin-svelte": "^3.2.6", "ts-jest": "29.2.5", "typescript": "5.6.3" }, "peerDependencies": { "@vue/compiler-sfc": "3.x", - "prettier": "2.x - 3.x" + "prettier": "2.x - 3.x", + "prettier-plugin-svelte": "3.x" }, "engines": { "node": ">18.12" @@ -62,6 +64,9 @@ "peerDependenciesMeta": { "@vue/compiler-sfc": { "optional": true + }, + "prettier-plugin-svelte": { + "optional": true } } } diff --git a/src/index.ts b/src/index.ts index 4aa85b7e..fd2f8feb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,6 +5,23 @@ import { parsers as typescriptParsers } from 'prettier/plugins/typescript'; import { defaultPreprocessor } from './preprocessors/default-processor'; import { vuePreprocessor } from './preprocessors/vue-preprocessor'; +const svelteParsers = createSvelteParsers(); + +function createSvelteParsers() { + try { + var { parsers } = require('prettier-plugin-svelte'); + var { sveltePreprocessor } = require('./preprocessors/svelte-preprocessor'); + } catch { + return {}; + } + return { + svelte: { + ...parsers.svelte, + preprocess: sveltePreprocessor, + }, + }; +} + const options = { importOrder: { type: 'path', @@ -67,6 +84,7 @@ module.exports = { ...htmlParsers.vue, preprocess: vuePreprocessor, }, + ...svelteParsers, }, options, }; diff --git a/src/preprocessors/svelte-preprocessor.ts b/src/preprocessors/svelte-preprocessor.ts new file mode 100644 index 00000000..a756fd95 --- /dev/null +++ b/src/preprocessors/svelte-preprocessor.ts @@ -0,0 +1,17 @@ +import { PrettierOptions } from '../types'; +import { preprocessor } from './preprocessor'; + +const { parsers } = require('prettier-plugin-svelte'); +const scriptRegex = + /|'"\/\s]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"\/\s]+)*\s*)>([^]*?)<\/script>/g; + +export function sveltePreprocessor(code: string, options: PrettierOptions) { + code = code.replace(scriptRegex, (match, attributes, content, index) => { + if (match.startsWith('