eslint-plugin-svelte3 icon indicating copy to clipboard operation
eslint-plugin-svelte3 copied to clipboard

eslint --fix messing up file, adding duplicated content

Open CherryDT opened this issue 3 years ago • 2 comments

  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!

CherryDT avatar May 05 '22 00:05 CherryDT

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

AndrewKirkovski avatar Aug 08 '22 18:08 AndrewKirkovski

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.

lvqq avatar Sep 22 '22 15:09 lvqq