sveltejs / eslint-plugin-svelte3

An ESLint plugin for Svelte v3 components.
MIT License
372 stars 43 forks source link

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

Open CherryDT opened 2 years ago

CherryDT commented 2 years ago
  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
    }
    }
  3. Run eslint --fix on the file
  4. 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 commented 2 years ago

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 commented 1 year ago

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.