Svelte中HTML模板字面量如何实现语法高亮与自动格式化等编辑器服务？

{
        content: `
            <p>
                Some content
            </p>
        `,
        ...
    },
...

...
{@html item.content}
...

已通过扩展解决语法高亮问题，但需要实现**模板字面量内HTML的自动格式化**，试过添加`/* html */`注释和多款扩展未成功，求可行配置。

## 可行解决方案

### 方案1：Prettier配合注释标记实现格式化
1. 确保VS Code已安装`Prettier - Code formatter`扩展，项目依赖中包含`prettier`和`prettier-plugin-svelte`
2. 在模板字面量前添加`/* html */`注释，明确标记嵌入内容为HTML：
   ```typescript
   content: /* html */ `
       <p>
           Some content
       </p>
   `,

3. 项目根目录创建.prettierrc配置文件，添加以下规则：

   {
       "plugins": ["prettier-plugin-svelte"],
       "overrides": [
           {
               "files": "*.svelte",
               "options": {
                   "parser": "svelte"
               }
           },
           {
               "files": ["*.ts", "*.js"],
               "options": {
                   "embeddedLanguageFormatting": "auto"
               }
           }
       ]
   }
   

4. 打开VS Code设置，搜索并开启Prettier: Embedded Language Formatting，确保允许Prettier格式化嵌入的HTML内容

方案2：ESLint+插件实现格式化与校验 #

1. 安装依赖：eslint、svelte-eslint-parser、@typescript-eslint/parser、eslint-plugin-html
2. 项目根目录创建.eslintrc.json配置文件：

   {
       "env": {
           "browser": true,
           "es2021": true
       },
       "extends": [
           "eslint:recommended",
           "plugin:@typescript-eslint/recommended"
       ],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
           "ecmaVersion": "latest"
       },
       "plugins": ["@typescript-eslint", "html"],
       "overrides": [
           {
               "files": ["*.svelte"],
               "parser": "svelte-eslint-parser",
               "parserOptions": {
                   "parser": "@typescript-eslint/parser"
               }
           }
       ],
       "rules": {
           "html/indent": ["error", 2],
           "html/indent-attributes": ["error", 2]
       }
   }
   

3. 开启VS Code的ESLint: Auto Fix On Save设置，保存时自动修复HTML缩进与格式问题

方案3：专用嵌入语言扩展 #

安装Inline HTML VS Code扩展，该扩展支持识别模板字面量中的HTML内容：

1. 安装后，在VS Code设置中添加以下配置：

   "inline-html.includeLanguages": {
       "svelte": "html"
   },
   "inline-html.formatOnSave": true
   

2. 保存文件时，扩展会自动格式化模板字面量内的HTML内容

内容的提问来源于stack exchange，提问作者yairchu