Config for SvelteKit

[babakfp]

Get Started

First, install the library:

pnpm add -D @ianvs/prettier-plugin-sort-imports

Then, create a file named prettier.config.js.

Configuration

Copy and paste the following configuration into prettier.config.js:

/** @type {import("prettier").Config & import("prettier-plugin-svelte").PluginConfig & import("@ianvs/prettier-plugin-sort-imports").PluginConfig} */
export default {
    plugins: ["prettier-plugin-svelte", "@ianvs/prettier-plugin-sort-imports"],
    importOrder: ["^@(?!/)", "<THIRD_PARTY_MODULES>", "^\\$", "^@/", "^[.]"],
}

Breakdown of importOrder

1. "^@(?!/)": Matches imports starting with @ not followed by /.

   • This regex is used to differentiate from the "^@/" regex. If you don't use the { "@": "./src" } alias in SvelteKit config, you can replace "^@(?!/)" with "^@".

2. "<THIRD_PARTY_MODULES>": Placeholder for everything else that is not matched by the regexes in importOrder. For more details, refer to the documentation.

3. "^\\$": Matches imports starting with $.

   • Useful for SvelteKit-specific imports that are relative to project source code. Example: "$env/static/public".

4. "^@/": Matches imports starting with @/.

   • Commonly used as an alias for directories like the src folder.
   • If you use the { "@": "./src" } alias, this regex is applicable. Otherwise, you can remove it, and replace "^@(?!/)" with "^@".

5. "^[.]": Matches relative imports starting with . (e.g., ./, ../, ../../).

Before and After:

My commit after applying the changes:

babakfp/angle-berry-client@82514fc

Customizing for $lib Alias

If you'r using the { $lib: "./src/lib" } alias in your SvelteKit config, adjust the importOrder as follows:

/** @type {import("prettier").Config & import("prettier-plugin-svelte").PluginConfig & import("@ianvs/prettier-plugin-sort-imports").PluginConfig} */
export default {
    plugins: ["prettier-plugin-svelte", "@ianvs/prettier-plugin-sort-imports"],
    importOrder: [
        "^@",
        "<THIRD_PARTY_MODULES>",
        "^\\$(?!lib/)",
        "^\\$lib/",
        "^[.]",
    ],
}

1. "^@": Imports that start with @. Example "@sveltejs/adapter-vercel".
2. "<THIRD_PARTY_MODULES>": Placeholder for everything else that is not matched by the regexes in importOrder. For more details, refer to the documentation.
3. "^\\$(?!lib/)": Matches imports starting with $ but not followed by lib/. Example "$env/static/public"
4. "^\\$lib/": Matches import statements that start with $lib/.
5. "^[.]": Matches relative imports starting with . (e.g., ./, ../, ../../).

That's all! Now you can run prettier --write . to format your code according to the new configuration.

More customization?

Just copy and paste one of the above configs to ChatGPT and ask it to make the changes for you :)

[IanVS]

Good idea, thanks for the suggestion, @babakfp. Feel free to edit the title to better describe the config you're sharing.

[babakfp]

Awesome
Updated the post 👍

[BahaaZidan]

Much appreciated