Parser failed to recognize variables used in Pug template

[thanhdatvo]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I'm using eslint-plugin-svelte. (*.svelte file linting does not work with the parser alone. You should also use eslint-plugin-svelte with it.)
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-svelte repo and open the issue in eslint-plugin-svelte repo if there is no solution.
• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

9.18.0

What version of eslint-plugin-svelte and svelte-eslint-parser are you using?

• svelte-eslint-parser@1.3.0
• eslint-plugin-svelte@3.0.0

What did you do?

Configuration

eslint.config.js

import prettier from 'eslint-config-prettier';
import { includeIgnoreFile } from '@eslint/compat';
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';

const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

export default ts.config(
	includeIgnoreFile(gitignorePath),
	js.configs.recommended,
	...ts.configs.recommended,
	...svelte.configs.recommended,
	prettier,
	...svelte.configs.prettier,
	{
		languageOptions: {
			globals: { ...globals.browser, ...globals.node }
		},
		rules: {
			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
			'no-undef': 'off'
		}
	},
	{
		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
		languageOptions: {
			parserOptions: {
				projectService: true,
				extraFileExtensions: ['.svelte'],
				parser: ts.parser,
				svelteConfig
			}
		}
	}
);

tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler"
	}
	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

+page.svelte

<script lang="ts">
	// import '../app.css';
	let say: { data: { title: string } } = $props();
	// function hello() {
	// 	console.log('Hello World');
	// }
	const hello = () => {
		console.log('Hello World');
	};
	let count = $state(0);
	const increment = () => (count += 1);
</script>

<!-- <div class="text-red-500">Oh</div> -->
<template lang="pug">

  .bg-gray-200.p-4.text-center
    | hello world

  .text-blue-600.p-4.bg-gray-100.text-center 
    | {say.data.title}

  p 
    | hello

  button(onclick!="{hello}").text-blue-100 
    | Click

  div

      h1  
        | Counter:{count}

      button(onclick!="{increment}") 
        | Click me

</template>

What did you expect to happen?

There should be no warning in eslint about:

'say' is assigned a value but never used.
'hello' is assigned a value but never used.
'increment' is assigned a value but never used.

These warning appears when I use template with lang="pug", this does not happen when I use template with lang="html"

What actually happened?

There are warning

'say' is assigned a value but never used.
'hello' is assigned a value but never used.
'increment' is assigned a value but never used.

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/thanhdatvo/svelte5-with-pug

Additional comments

I ran the code in +page.svelte in the playground website and the same warnings appeared

https://sveltejs.github.io/svelte-eslint-parser/playground/#eJyFUTtPwzAQ/ivXCKmpkJ0UAUObdmFhY2TJkjomjXBty77wUMh/xxcnhUpIJIMf3+PO3/WJMLVMNknhhWstgqp0sysT9GWyL3WJWQbtyRqHsOQ8q6zlwvvlliAlEXz1uYEe6gorWrENtxvw6FrdwBD+HVxZZ6xPV9vJ7qXTAluj4SiVMukK+gkoURjtjZJcmSZdPhIMz8apenkWD7QSDaM8+AeH3T6a/OswnBsXptNI3XmsUKZ5xKNzq4WTJzni0T2N9OsdrIlYZDEtSkgXC8agqNs3EKrynsKTH8icrNldnocYn45FFuA9MBYEBcqTVaHmHLXtmpi1BuCHhjWu+mQ3ec4tu+WjlQitSEc4wNf07nd61SQaSQfVSXY/yWabdTj/soDZow9z4zQ0Pk5siEYWLmrEy0OHaHRqtFCteF2EhvsRHcpk9atyqHRWPxAzqsO744a+4xpg3o88ClW6TT+mO/wQ/6h5ngnVvXQhDpzkOItsTjcEmgzfkDTwFw==

[baseballyama]

Since Pug uses its own AST, it is difficult to properly perform checks that need to look at both <template> and <script>. (It is possible, but requires a lot of time and is not practical.)

For better compatibility with other ecosystems, we recommend using HTML.