eslint-plugin-svelte3
eslint-plugin-svelte3 copied to clipboard
eslint --fix messing up file, adding duplicated content
- Get this file: https://github.com/KeiferJu/svelma-pro/blob/2.0.0/src/components/Slider/Thumb.svelte
- 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
}
}
- Run
eslint --fixon the file - 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!
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
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.