sveltejs / eslint-plugin-svelte

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

Comments are outdented incorrectly in script blocks #557

Open garraflavatra opened 1 year ago

garraflavatra 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.46.0

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

2.32.4

What did you do?

I linted the following outdented code using the enclosed ESLint configuration.

<script>

function demo1() {
// This should be indented with 4 spaces
console.log('ok');
}

function demo2() {
// This should be indented with 4 spaces
}

function demo3() {
// This should be indented with 4 spaces
// Another line
console.log('ok');
}

function demo4() {
// This should be indented with 4 spaces
// Another line
}

demo1();
demo2();
demo3();
demo4();

</script>
{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "ignorePatterns": [
    "/expected.svelte",
    "/original.svelte"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:svelte/recommended"
  ],
  "plugins": [
    "svelte"
  ],
  "rules": {
    "svelte/indent": "error"
  }
}

What did you expect to happen?

I expected ESLint to indent the code correctly; in my opinion, that is:

<script>

  function demo1() {
    // This should be indented with 4 spaces
    console.log('ok');
  }

  function demo2() {
    // This should be indented with 4 spaces
  }

  function demo3() {
    // This should be indented with 4 spaces
    // Another line
    console.log('ok');
  }

  function demo4() {
    // This should be indented with 4 spaces
    // Another line
  }

  demo1();
  demo2();
  demo3();
  demo4();

</script>

What actually happened?

Fixing it by running eslint --fix changed it to the following:

<script>

  function demo1() {
    // This should be indented with 4 spaces
    console.log('ok');
  }

  function demo2() {
  // This should be indented with 4 spaces
  }

  function demo3() {
    // This should be indented with 4 spaces
    // Another line
    console.log('ok');
  }

  function demo4() {
  // This should be indented with 4 spaces
    // Another line
  }

  demo1();
  demo2();
  demo3();
  demo4();

</script>

Link to GitHub Repo with Minimal Reproducible Example

Repository: https://github.com/garraflavatra/svelte-eslint-comment-repro.

The original code is in original.svelte, the expected result is in expected.svelte, and the actual output is in actual.svelte. The .eslintrc.json file contains the used (minimal) configuration.

Additional comments

I tried looking for similar issues before creating this one, but found none.

Thank you for maintaining this plugin. I use it frequently, and this is the only issue I've encountered.

thenbe commented 8 months ago

In objects, this bug only happens on the first commented out key.

Here, it will complain only about the c key.

Repro

<script>
  /* eslint svelte/indent: "error" */
  const obj1 = {
    a: '',
    b: '',
    // c: '',
    // d: '',
    // e: '',
  }
</script>

I tried creating a playground link but the indent rule doesn't work at all there (I disabled all rules except svelte/indent). But if you paste my snippet into the rule's example page you can reproduce the issue.