Setting prettier sections order in .svelte file

Question

Whenever i save a .svelte component file in visual studio code Prettier formatter is formating my file in this order:

• Script
• Style
• HTML Markup

I want to change the order of the sections to be:

• script
• HTML
• Style

How can i change the order of the sections?

Answer 1

This should be the default sort order with v2 of the Svelte Prettier plugin. If you can, install the latest version of prettier-plugin-svelte.

If you can't update, you can use the svelteSortOrder setting in your Prettier config.

{
  "svelteSortOrder": "scripts-markup-styles"
}