Multiple empty lines error when there are none in <script> tags

[ghost]

I'm not sure if this is actually a eslint-plugin-svelte3 problem or just a general eslint or babel-eslint problem, but it's happening in .svelte files so I thought I'd share it here.

I've installed eslint and extend the "standard" rule set, and then on top of that I've installed this plugin for Svelte 3.

In a .svelte file if I use both a <script context="module"> tag and a normal <script> tag in the same file I get the following lint error:

More than 1 blank line not allowed no-multiple-empty-lines

When I remove one of the script blocks the error goes away. It also goes away if I move the ending </script> tag onto the end of the last line of JS in the context="module" tags.

For example:

<script context="module">
export const foo = ['bar']
</script>

<script>
const baz = 1

console.log(baz)
</script>

This will produce the multiple empty lines error at the beginning of the </script> tag after ['bar']`.

If I change it to this:

<script context="module">
export const foo = ['bar']</script>

<script>
const baz = 1

console.log(baz)
</script>

The error goes away.

This is my .eslintrc.js file:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    'standard'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: [
    'svelte3'
  ],
  overrides: [
    {
      files: ['**/*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  rules: {
  }
}

I don't think I've set anything up incorrectly, and so far I've only seen the problem in .svelte files.

[pioug]

I am facing the same issue. The latest update of eslint (https://github.com/eslint/eslint/releases/tag/v6.8.0) fixed the line count for this rules so now I have lint errors popping up in my Svelte files too.

I am trying to corner the problem... so this tiny snippet:

<script>
  let a = 1;
</script>

is processed by eslint-plugin-svelte3 as follows:

{
  transformed_code: '\n\nlet a = 1;\n\n',
}

@Conduitry Maybe we can ~~remove~~ make conditional the extra new lines added here : https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/src/block.js#L8 https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/src/block.js#L19

~~At first glance, those lines don't seem necessary 🤔~~

[distantcam]

I had the same problem with the airbnb rules. In the end I just defined a custom no-multiple-empty-lines rule.

'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 2, maxEOF: 0 }] // standard
'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2, maxEOF: 0 }] // airbnb

[alexdilley]

If you use Prettier, you can silence this with eslint-config-prettier.

[mckravchyk]

I have used something like this to get around it:

<script context="module">
  // ...
  /* eslint-disable no-multiple-empty-lines */
</script>

<script>
  /* eslint-enable no-multiple-empty-lines */

  // ....
</script>

Note that you cannot use esline-disable-line because the comment would have to be put right after the script tag and it would make eslint think that the indentation for the whole block should start at 0 spaces (rather than e.g. 2 spaces).

[srcrip]

I still seem to get this problem as of May 2022 with the combination of this package, the eslint typescript packages, and standard.

I believe that standard is actually the 'problem', as removing it seems to make it go away, but I have a feeling they may just say the issue is on this packages end.

Is there any clues as to why this is happening @Conduitry ? I can provide a reproduce able example if you need it.

[quoid]

I am also seeing this, even when using the fix mentioned in this issue. I've included a code snippet and screenshot of when I see it.

I don't have much idea on how the linter works here, but I took a quick look at the package's code. When there are multiple script blocks in a template, it looks like there's an "extra" \n added around here.

Using the example below, dedented is \nconsole.log("foo")\n which gets added to \n export const prerender = true;\n\n and results in \n export const prerender = true;\n\n\nconsole.log("foo");\n\n. Removing the extra \n from dedented before it's added to block.transformed_code will stop the issue but I noticed it can also screw up where your errors get shown in the editor.

I found that if the block.transformed_code that gets passed to get_translation has a trailing \n and you remove that in the preprocess function, it seems to resolve the issue and not cause any other problems, but I haven't tested it thoroughly. It's kind of hacky, but right here I just added block.transformed_code = block.transformed_code.replace(/\n$/, '');.

I am still trying to figure out why all those new lines get added in get_translation, but I am assuming it has something to do with warnings/errors showing on the proper lines.

Example:

<script context="module" lang="ts">
    export const prerender = true;
</script>

<script lang="ts">
    console.log("foo");
</script>