Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ghost opened this issue Sep 26, 2019 · 6 comments
Open

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

ghost opened this issue Sep 26, 2019 · 6 comments
Labels
bug Something isn't working

Comments

@ghost
Copy link

ghost commented Sep 26, 2019

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.

@Conduitry Conduitry added the bug Something isn't working label Nov 5, 2019
@pioug
Copy link

pioug commented Dec 29, 2019

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
Copy link

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
Copy link

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

marlosin added a commit to runme-io/website that referenced this issue May 11, 2020
marlosin added a commit to runme-io/website that referenced this issue May 12, 2020
* build: add eslint,standard,prettier libs

* build: add config files for eslint/prettier

* fix(eslint): issue with svelte plugin

sveltejs/eslint-plugin-svelte3#41

* build: add hysky and lint staged with pre-push hook
peterhil added a commit to peterhil/spellbook that referenced this issue Nov 20, 2020
@mckravchyk
Copy link

mckravchyk commented May 1, 2021

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
Copy link

srcrip commented May 4, 2022

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
Copy link

quoid commented Jul 17, 2022

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>

Screen Shot 2022-07-16 at 8 19 08 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants