VS Code中Svelte文件ESLint无快速修复，TypeScript文件正常

VS Code中，鼠标悬停在Svelte文件的ESLint问题上时，编辑器能识别问题，但提示“no quick fixes available”；但TypeScript文件可正常使用“Quick Fix”功能。此前该功能正常，突然失效后，即使完全重装VS Code也无法解决。

环境信息 #

项目开发依赖（package.json） #

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.50.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-svelte": "^2.15.0",
  "prettier": "^2.8.3",
  "prettier-plugin-svelte": "^2.8.1",
}

注：使用eslint-plugin-svelte而非官方eslint-plugin-svelte3，因eslint-plugin-prettier推荐该插件

ESLint配置（.eslint.cjs） #

extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:svelte/recommended',
  'plugin:prettier/recommended',
],
plugins: ['@typescript-eslint'],
ignorePatterns: ['*.cjs', '*.config.js'],
parser: '@typescript-eslint/parser',
parserOptions: {
  extraFileExtensions: ['.svelte'],
  project: './tsconfig.json',
},
overrides: [
  {
    files: ['*.svelte'],
    parser: 'svelte-eslint-parser',
    // Parse the script tag in Svelte as TypeScript
    parserOptions: {
      parser: '@typescript-eslint/parser',
      project: './tsconfig.json',
    },
  },
],

VS Code用户设置 #

{
  "eslint.validate": [
    "svelte",
    "typescript"
    "javascript",
  ],
  "svelte.enable-ts-plugin": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "css.validate": false,
  "scss.validate": false
}

注：尝试过新的eslint.probe配置方式，无效

解决步骤 #

1. 修复配置语法错误 #

• 修正VS Code设置中eslint.validate的数组格式（typescript后缺少逗号）：

  "eslint.validate": [
    "svelte",
    "typescript",
    "javascript"
  ]
  

2. 调整ESLint解析器配置 #

• 移除根级的parser: '@typescript-eslint/parser'，避免干扰Svelte文件的解析逻辑
• 在Svelte文件的overrides配置中添加svelte插件，确保ESLint能识别Svelte的修复规则：

  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      plugins: ['svelte'], // 新增该行
      parserOptions: {
        parser: '@typescript-eslint/parser',
        project: './tsconfig.json',
      },
    },
  ],
  

3. 清除缓存并重启服务 #

• 执行命令清除ESLint缓存：npx eslint --clear-cache
• 在VS Code打开命令面板（Ctrl+Shift+P），执行ESLint: Restart ESLint Server

4. 确认依赖完整性 #

• 手动安装svelte-eslint-parser（eslint-plugin-svelte的核心依赖）：npm install svelte-eslint-parser --save-dev
• 更新相关插件到稳定版：npm update eslint-plugin-svelte eslint-plugin-prettier prettier-plugin-svelte

5. 启用自动修复（可选） #

在VS Code设置中添加自动修复配置，确保保存时自动应用ESLint修复：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

内容的提问来源于stack exchange，提问作者D-Marc