sveltejs / eslint-plugin-svelte

ESLint plugin for Svelte using AST
https://sveltejs.github.io/eslint-plugin-svelte/
MIT License
290 stars 33 forks source link

Enabling svelte/comment-directive rule not honoring eslint-disable comments when configured using eslint's new flat config #553

Closed mpellegrini closed 1 year ago

mpellegrini commented 1 year ago

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

What version of ESLint are you using?

8.45.0

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

2.32.4

What did you do?

Configuration ```javascript import { defineFlatConfig } from 'eslint-define-config' import typescript from '@typescript-eslint/eslint-plugin' import svelte from 'eslint-plugin-svelte' import tsParser from '@typescript-eslint/parser' import svelteParser from 'svelte-eslint-parser' export default defineFlatConfig([ { files: ['**/*.svelte'], plugins: { svelte, '@typescript-eslint': typescript, }, languageOptions: { parser: svelteParser, parserOptions: { parser: tsParser, }, }, rules: { 'svelte/comment-directive': [ 'error', { reportUnusedDisableDirectives: true, }, ], 'svelte/no-at-html-tags': 'error', }, }, { ignores: ['.svelte-kit'], }, ]) ```
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

{result}

<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html '<p><b>Hello</b></p>'}

What did you expect to happen?

Expected the rule svelte/no-at-html-tags to be disabled on the next line

What actually happened?

rule svelte/no-at-html-tags was not disabled on the next line

received the following error

  5:1  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

✖ 1 problem (1 error, 0 warnings)

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/mpellegrini/eslint-config-svelte-issue-repro

If it helps here is a pre-configured stackblitz project - https://stackblitz.com/edit/vitejs-vite-ladvbz

Additional comments

I have also included a .eslintrc.cjs file that I believe I configured exactly the same way as the eslint.confg.js file. If you rename eslint.confg.js to eslint.confg.js.disable and run eslint, the rule is disabled.

I have tried to pair down eslint configuration to the bare minimum for both files. I also compared the results of

 eslint --print-config src/routes/+page.svelte

agianst both configs and they appear to be the same (but obviously the format is different). I just can't figure out what is causing this not to work in the new eslint flat config model.

Thanks you in advance.

ota-meshi commented 1 year ago

Thank you for posting the issue. I've been busy and haven't tried it yet, but I suspect missing processor settings in your configuration.

{
   // ...
   processor: "svelte/svelte",`
   // ...
}
mpellegrini commented 1 year ago

@ota-meshi Thank you very much! That was it!! I wish the eslint --print-config... would show the configured processors as well, would have made tracking this down easier. But that is for the eslint team.

For completeness this was the final eslint.config.js with your suggested change (Note: this is not a complete working config, just the bare min config for this issue.)

import { defineFlatConfig } from 'eslint-define-config'
import typescript from '@typescript-eslint/eslint-plugin'
import svelte from 'eslint-plugin-svelte'
import tsParser from '@typescript-eslint/parser'
import svelteParser from 'svelte-eslint-parser'

export default defineFlatConfig([
  {
    files: ['**/*.svelte'],
    plugins: {
      svelte,
      '@typescript-eslint': typescript,
    },
    processor: 'svelte/svelte',
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: tsParser,
      },
    },
    rules: {
      'svelte/comment-directive': [
        'error',
        {
          reportUnusedDisableDirectives: true,
        },
      ],
      'svelte/no-at-html-tags': 'error',
    },
  },
  {
    ignores: ['.svelte-kit'],
  },
])