Svelte文件着色与格式异常问题求助

我是Svelte新手，最近在Svelte文件中遇到了着色与格式混乱的问题，已经严重影响工作。问题截图如下：

我的VS Code配置文件截图如下：

当前使用的VS Code配置代码如下：

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "svelte.svelte-vscode",
  "editor.formatOnSave": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "explorer.confirmDelete": false,
  "editor.accessibilitySupport": "off",
  "svelte.enable-ts-plugin": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",
  "files.associations": {
    "*.svelte": "html"
  }
}

修复方案 #

1. 删除错误的文件关联配置 #

配置里的"files.associations": {"*.svelte": "html"}是核心问题——它让VS Code把Svelte文件当成普通HTML处理，无法识别Svelte特有的语法标签，直接导致着色失效，删掉这一项即可解决大部分着色问题。

2. 修正后的完整配置 #

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "svelte.svelte-vscode",
  "editor.formatOnSave": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "explorer.confirmDelete": false,
  "editor.accessibilitySupport": "off",
  "svelte.enable-ts-plugin": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "workbench.iconTheme": "material-icon-theme"
}

3. 额外检查与优化 #

• 确保已安装官方的Svelte for VS Code插件（扩展ID：svelte.svelte-vscode），安装完成后重启VS Code。
• 如果格式化仍有异常，给项目添加Prettier的Svelte支持：
  1. 在项目终端执行命令安装依赖：

     npm install --save-dev prettier prettier-plugin-svelte
     

  2. 在项目根目录创建prettier.config.js文件，写入以下配置：

     module.exports = {
       plugins: ['prettier-plugin-svelte'],
       overrides: [
         {
           files: '*.svelte',
           options: { parser: 'svelte' }
         }
       ]
     }
     

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