Description
Before You File a Bug Report Please Confirm You Have Done The Following...
- 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?
8.56.0
What version of eslint-plugin-svelte
are you using?
2.36.0-next.4
What did you do?
Configuration
/** @type { import("eslint").Linter.Config } */
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};
<script lang="ts">
const mySnippetInDisguise = mySnippet;
</script>
{#snippet mySnippet()}
<p>Hello World!</p>
{/snippet}
{@render mySnippetInDisguise()}
What did you expect to happen?
No errors.
What actually happened?
ESLint reported two contractory errors:
- Line 2:22 reported an error: 'mySnippet' is not defined (no-undef).
- Line 5:11 reported an error: 'mySnippet' is defined but never used (@typescript-eslint/no-unused-vars).
Link to GitHub Repo with Minimal Reproducible Example
https://github.com/nicksulkers/eslint-svelte5-snippets-bug-repro
Additional comments
My initial assumption is that snippets in Svelte 5 act like hoisted functions. However, it appears that ESLint does not recognize them as such. As a result, when these snippets are utilized within a <script> tag, ESLint mistakenly identifies them as undefined. Moreover, following their declaration, ESLint incorrectly marks them as unused.