visual-studio-code - 在 VS Code 上的 Svelte 中在脚本标记之前设置 HTML

Question

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

我还安装了 eslint 和 prettier 插件：

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

另外，我设置了 .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"
  ],
}

现在一切似乎都按预期进行。但是有一个功能我想改变。我想将我的 html 放在 .svelte 文件中的样式标签之上（如果可能的话，也放在脚本标签之上）。

但是，当我单击保存时，它会自动将我的所有 html 移动到文件的底部。

我怎样才能覆盖这个？

谢谢。

Answer 1

prettier-plugin-svelte有一个svelteSortOrder 选项，可以添加到您的.prettierrc文件中。

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

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

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