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

eslint --fix messing up file, adding duplicated content #180

Open
CherryDT opened this issue May 5, 2022 · 2 comments
Open

eslint --fix messing up file, adding duplicated content #180

CherryDT opened this issue May 5, 2022 · 2 comments

Comments

@CherryDT
Copy link
Contributor

CherryDT commented May 5, 2022

  1. Get this file: https://github.com/KeiferJu/svelma-pro/blob/2.0.0/src/components/Slider/Thumb.svelte
  2. Use this config:
module.exports = {
  root: true,
  extends: ['standard'],
  rules: {
    'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 2, maxEOF: 0 }], // See https://github.com/sveltejs/eslint-plugin-svelte3/issues/41
    'import/first': 0 // See https://github.com/sveltejs/eslint-plugin-svelte3/issues/32
  },
  plugins: ['svelte3'],
  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020
  },
  env: {
    browser: true,
    es2017: true,
    node: true
  }
}
  1. Run eslint --fix on the file
  2. Observe that the file gets messed up, followed by a parse error on the now-messed-up part:

Before:

<script>
  import {createEventDispatcher, onMount} from "svelte";
  import handle from "./index.js";

  const dispatch = createEventDispatcher();
  let active;
  export let pos;
  export let value;
  export let tip;

  function dragstart() {
      active = true;
      dispatch('active', true)
  }

  function dragend() {
      active = false;
      dispatch('active', false);
      dispatch('dragEnd', value);
  }

</script>

<style>
  .sli-tip {
      position: absolute;
      bottom: 0px;
      background: #000;

(...and more...)

After:

<script>
  import { createEventDispatcher, onMount } from 'svelte';
  import handle from './index.js';

  const dispatch = createEventDispatcher()
  let active
  export let pos
  export let value
  export let tip

  function dragstart () {
    active = true
    dispatch('active', true)
  }

  function dragend () {
    active = false
    dispatch('active', false)
    dispatch('dragEnd', value)
  }
<script>
  import {createEventDispatcher, onMount} from "svelte";
  import handle from "./index.js";

  const dispatch = createEventDispatcher();
  let active;
  export let pos;
  export let value;

(...and more...)

You can see here that before the closing script tag the whole fixed part of the code got inserted a second time, instead of replacing the existing code!

@AndrewKirkovski
Copy link

Observing same, so far detected no-multiple-empty-lines rule auto-fix steadily breaks code

Also something is also breaking object constants, looking what's root

@lvqq
Copy link

lvqq commented Sep 22, 2022

Facing the same problem, I use the template code like:

<script lang="ts">
  let count = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

With eslint --fix becomes:

<script lang="ts">
  let count = 0
  const increment = () => {
    count += 1;
  };
</script>

<button on:click={increment;<script lang="ts">
  let count = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count;}
</button>

But after I add prettier-plugin-svelte it disappears.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants