Svelte v5 启用类型检查后ESLint无法识别SvelteKit生成类型

复现步骤 #

• 执行 npx sv create foo，选择TypeScript + ESLint模板创建最小化应用
• 修改eslint.config.js启用类型检查规则，配置代码如下：

import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import ts from 'typescript-eslint';

export default ts.config(
  {
    ignores: ['*.config.js'],
  },

  js.configs.recommended,
  ...ts.configs.recommendedTypeChecked, // 启用类型检查的改动
  ...svelte.configs['flat/recommended'],
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },

      // 新增的类型检查配置
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
        extraFileExtensions: ['.svelte'],
      },
    },
  },
  {
    files: ['**/*.svelte'],

    languageOptions: {
      parserOptions: {
        parser: ts.parser,
      },
    },
  },
  {
    ignores: ['build/', '.svelte-kit/', 'dist/'],
  }
);

问题现象 #

• tsc能正常识别/routes/[id]/+server.ts中params.id的string类型
• ESLint无法识别SvelteKit自动生成的类型，会提示params.id类型未知
• 手动导入RequestHandler可临时解决，但属于不必要的冗余操作：

import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = ({ params: { id } }) => {
  return json({ id });
};

解决建议 #

1. 明确指定ESLint的TypeScript项目配置 #

修改eslint.config.js中的parserOptions，明确绑定tsconfig.json，确保ESLint能读取SvelteKit生成的类型文件：

parserOptions: {
  project: './tsconfig.json', // 新增此行
  projectService: true,
  tsconfigRootDir: import.meta.dirname,
  extraFileExtensions: ['.svelte'],
}

2. 调整ESLint配置的优先级 #

扁平配置的顺序会影响规则生效，针对.ts文件单独配置TypeScript类型检查，确保规则覆盖正确：

// 在现有配置中添加以下块
{
  files: ['**/*.ts'],
  extends: [...ts.configs.recommendedTypeChecked],
  languageOptions: {
    parserOptions: {
      project: './tsconfig.json',
      tsconfigRootDir: import.meta.dirname,
    },
  },
}

3. 更新依赖版本 #

Svelte v5属于较新版本，可能存在依赖兼容问题，执行以下命令更新相关包：

npm update eslint-plugin-svelte @typescript-eslint/eslint-plugin @typescript-eslint/parser svelte @sveltejs/kit

4. 确保SvelteKit类型文件已生成 #

执行npm run dev或npm run build触发类型生成，确认.svelte-kit/types目录存在且包含对应$types定义——若类型文件未生成，ESLint自然无法识别。

5. 临时禁用无定义规则（权宜之计） #

如果以上方法都无效，可针对SvelteKit路由文件临时禁用no-undef规则，但不推荐长期使用：

{
  files: ['**/+server.ts', '**/+page.ts'],
  rules: {
    'no-undef': 'off',
    '@typescript-eslint/no-undef': 'off',
  },
}

补充说明 #

Svelte v5的类型系统与ESLint扁平配置的结合目前仍存在部分兼容问题，扁平配置是ESLint 9+的新特性，svelte-eslint-parser对其的支持还在迭代完善中。若暂时无法解决，可尝试降级到ESLint 8（与Svelte 4时代一致）规避问题，长期需等待依赖包的更新适配。

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