CODEWITHSUNDEEP
visual-studio-codeeslintsvelteprettiersvelte-3
Moshe
Moshe

Reputation: 7007

Set HTML Before Script Tags in Svelte on VS Code

I am using the Svelte Plugin for vs code: https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode

I also have the eslint and prettier plugins installed:

In addition, I have set up .eslintrc.js and .prettierrc files as follows:

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['prettier'],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  plugins: ['prettier', 'svelte3'],
  rules: {
    'prettier/prettier': 'error',
    'svelte3/lint-template': 2
  }
}


// .prettierrc
{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "plugins": [
    "svelte"
  ],
}

Now everything seems to work like it supposed to. But there is one functionality that I would like to change. I would like to have my html on top of the style tags in my .svelte file (and, if possible, also on top of the script tags).

However, when I click on save, it automatically moves all of my html to the bottom of the file.

How can I override this?

Thanks.

Upvotes: 0

Views: 934

Answers (1)

rixo
rixo

Reputation: 25031

prettier-plugin-svelte has a svelteSortOrder option, that can be added to your .prettierrc file.

In your case, it would become:

// .prettierrc
{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "plugins": [
    "svelte"
  ],

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

Upvotes: 4

Related Questions