visual-studio-code - 在VS Code上的Svelte中在脚本标签之前设置HTML(Set HTML Before Script Tags in Svelte on VS Code)

Question

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

(我正在将Svelte插件用于vs代码： https ://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode)

I also have the eslint and prettier plugins installed:

(我还安装了eslint和更漂亮的插件：)

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

  (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

  (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

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

(此外，我还设置了.eslintrc.js和.prettierrc文件，如下所示：)

// .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).

(我想将我的html放在我的.svelte文件中的样式标签之上（如果可能，也可以在脚本标签之上）。)

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

(但是，当我单击“保存”时，它将自动将所有html移至文件底部。)

How can I override this?

(如何覆盖呢？)

Thanks.

(谢谢。)

  ask by Moshe translate from so

Answer 1

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

(svelteSortOrder prettier-plugin-svelte具有svelteSortOrder 选项 ，可以将其添加到您的.prettierrc文件中。)

In your case, it would become:

(在您的情况下，它将变为：)

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

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