ESLint+TypeScript解析Svelte组件报错：Unexpected keyword or identifier

错误现象 #

运行命令 pnpm eslint src/lib/components/SEO.svelte --debug 时，出现 TSError: Unexpected keyword or identifier 解析错误，错误定位在SEO.svelte第19行44位。

错误日志 #

...
  eslint:eslint Lint /home/seba/project/src/lib/components/SEO.svelte +831ms
  eslint:linter Linting code for /home/seba/project/src/lib/components/SEO.svelte (pass 1) +0ms
  eslint:linter Verify +0ms
  eslint:linter With flat config: /home/seba/project/src/lib/components/SEO.svelte +0ms
  eslint:linter Apply the processor: { meta: { name: 'eslint-plugin-svelte', version: '2.46.1' }, supportsAutofix: true, preprocess: [Function: preprocess], postprocess: [Function: postprocess] } +0ms
  eslint:linter A code block was found: '(unnamed)' +2ms
  eslint:languages:js Parsing: /home/seba/project/src/lib/components/SEO.svelte +0ms
  eslint:languages:js Unexpected keyword or identifier.
  eslint:languages:js TSError: Unexpected keyword or identifier.
    at createError (/home/seba/project/node_modules/.pnpm/@typescript-eslint+typescript-estree@8.23.0_typescript@5.7.3/node_modules/@typescript-eslint/typescript-estree/dist/node-utils.js:572:12)
    at convertError (/home/seba/project/node_modules/.pnpm/@typescript-eslint+typescript-estree@8.23.0_typescript@5.7.3/node_modules/@typescript-eslint/typescript-estree/dist/convert.js:51:41)
    at astConverter (/home/seba/project/node_modules/.pnpm/@typescript-eslint+typescript-estree@8.23.0_typescript@5.7.3/node_modules/@typescript-eslint/typescript-estree/dist/ast-converter.js:15:42)
    at parseAndGenerateServices (/home/seba/project/node_modules/.pnpm/@typescript-eslint+typescript-estree@8.23.0_typescript@5.7.3/node_modules/@typescript-eslint/typescript-estree/dist/parser.js:162:66)
    at Object.parseForESLint (/home/seba/project/node_modules/.pnpm/@typescript-eslint+parser@8.23.0_eslint@9.20.0_jiti@2.4.2__typescript@5.7.3/node_modules/@typescript-eslint/parser/dist/parser.js:101:80)
    at parseScriptWithoutAnalyzeScope (/home/seba/project/node_modules/.pnpm/svelte-eslint-parser@0.43.0_svelte@5.19.9/node_modules/svelte-eslint-parser/lib/parser/script.js:49:18)
    at analyzeTypeScriptInSvelte (/home/seba/project/node_modules/.pnpm/svelte-eslint-parser@0.43.0_svelte@5.19.9/node_modules/svelte-eslint-parser/lib/parser/typescript/analyze/index.js:19:64)
    at parseTypeScriptInSvelte (/home/seba/project/node_modules/.pnpm/svelte-eslint-parser@0.43.0_svelte@5.19.9/node_modules/svelte-eslint-parser/lib/parser/typescript/index.js:12:59)
    at parseAsSvelte (/home/seba/project/node_modules/.pnpm/svelte-eslint-parser@0.43.0_svelte@5.19.9/node_modules/svelte-eslint-parser/lib/parser/index.js:48:52)
    at Object.parseForESLint (/home/seba/project/node_modules/.pnpm/svelte-eslint-parser@0.43.0_svelte@5.19.9/node_modules/svelte-eslint-parser/lib/parser/index.js:37:12) +48ms
  eslint:linter Generating fixed text for /home/seba/project/src/lib/components/SEO.svelte (pass 1) +49ms
  eslint:source-code-fixer Applying fixes +0ms
  eslint:source-code-fixer shouldFix parameter was false, not attempting fixes +0ms

/home/seba/project/src/lib/components/SEO.svelte
  19:44  error  Parsing error: Unexpected keyword or identifier

✖ 1 problem (1 error, 0 warnings)

ESLint配置（eslint.config.js） #

import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

export default ts.config(
    includeIgnoreFile(gitignorePath),
    js.configs.recommended,
    ...ts.configs.recommended,
    ...svelte.configs['flat/recommended'],
    prettier,
    ...svelte.configs['flat/prettier'],
    {
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.node,
            },
        },
    },
    {
        files: ['**/*.svelte'],

        languageOptions: {
            parserOptions: {
                parser: ts.parser,
            },
        },
    },
    {
        rules: {
            'no-unused-vars': 'off',
            '@typescript-eslint/no-unused-vars': [
                'warn',
                {
                    argsIgnorePattern: '^_[^_].*$|^_$',
                    varsIgnorePattern: '^_[^_].*$|^_$',
                    caughtErrorsIgnorePattern: '^_[^_].*$|^_$',
                },
            ],
        },
    },
);

SEO.svelte组件代码 #

import type { Language, Locale } from '$lib/i18n';

    type Props = { locale: Locale['seo']; lang: Language; page: keyof Locale['seo'] };
    const { locale, lang, page }: Props = $props();

    const ld = {
        '@context': 'https://schema.org',
        '@type': 'Organization',
        name: 'aid-ly',
        url: `https://aid-ly.org/${lang}/`,
        logo: 'https://aid-ly.org/logo.svg',
        description: locale[page].description,
    };
</script>

<svelte:head>
    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
    {@html `&lt;script type=&quot;application/ld+json&quot;&gt;${JSON.stringify(ld)}&lt;/script&gt;`}
</svelte:head>

解决建议 #

1. 修正ESLint配置中的Svelte解析器设置 #

当前配置中给Svelte文件直接指定parser: ts.parser是错误的，应该用svelte.parser作为主解析器，再在parserOptions中指定TypeScript解析器。修改对应配置块：

{
    files: ['**/*.svelte'],
    languageOptions: {
        parser: svelte.parser,
        parserOptions: {
            parser: ts.parser,
            tsconfigRootDir: import.meta.dirname,
            project: ['./tsconfig.json'],
            extraFileExtensions: ['.svelte']
        }
    },
}

2. 修复组件中的HTML转义问题 #

{@html}标签内的模板字符串不需要使用HTML转义字符，直接用双引号即可，避免解析混淆：

{@html `<script type="application/ld+json">${JSON.stringify(ld)}</script>`}

3. 检查版本兼容性 #

确保svelte-eslint-parser、eslint-plugin-svelte与Svelte 5版本兼容，建议升级到最新适配版本：

pnpm update svelte-eslint-parser eslint-plugin-svelte

4. 清除ESLint缓存 #

缓存可能导致异常解析错误，执行以下命令清除：

pnpm eslint --clear-cache

5. 检查tsconfig.json配置 #

确保tsconfig.json包含Svelte文件的引用：

{
    "include": ["src/**/*.ts", "src/**/*.svelte"],
    "compilerOptions": {
        // 确保target、module等设置符合项目需求，比如target: "ES2020"
    }
}

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