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:

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

How can i change the order of the sections?

user_14808988 · Answer

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"
}