Compatibility with Svelte

[pikeas]

sveltejs/eslint-plugin-svelte3#75

When using this plugin with eslint-plugin-svelte3, this code:

<script>
    import {dev} from "$app/env" // eslint-disable-line import/no-unresolved
    import CookieConsent from "$lib/layout/CookieConsent.svelte"
    import Footer from "$lib/layout/Footer.svelte"
    import Nav from "$lib/layout/Nav.svelte"

    import "../app.css"
</script>

Becomes:

<script>
    import "../app.css"

import {dev} from "$app/env" // eslint-disable-line import/no-unresolved
import CookieConsent from "$lib/layout/CookieConsent.svelte"
import Footer from "$lib/layout/Footer.svelte"
import Nav from "$lib/layout/Nav.svelteport "../app.css"
</script>

Is this fixable on the simple-import-sort side of things?

I'd also be happy to fix manually if there were an option to disable autofix.

[lydell]

Hi!

This reminds me of #22, which was about compatibility with eslint-plugin-mardown. Investigating that issue resulted in this bugfix in eslint-plugin-markdown: eslint/eslint-plugin-markdown#119

My guess would be that this will play out similarly. eslint-plugin-svelte3 has some tricky fix range rewriting going on here it seems: https://github.com/sveltejs/eslint-plugin-svelte3/blob/259263ccaf69c59e473d9bfa39706b0955eccfbd/src/postprocess.js. That could be the culprit. Or it could be something else, in either plugin.

The thing with eslint-plugin-markdown was that autofixes on the very first line of a piece of JS were broken, and nobody had noticed because you usually get fixable lint errors further down in your file, while import sorting very likely touches the first line.

If you’d like to help without diving into the code, you could try some other ESLint rules – preferably core rules – and cause an error (possibly multi-line) on the very first line of the JS and see if that fails too.

But eventually someone has to deep-dive into the code of both plugins and do a debugging session. It doesn’t sound too difficult since both code bases aren’t super big. I’m not sure when I’ll get the time to do this myself, though. I don’t use Svelte myself and currently I have some other projects I’d rather spend my time on.

[pikeas]

If you’d like to help without diving into the code, you could try some other ESLint rules – preferably core rules – and cause an error (possibly multi-line) on the very first line of the JS and see if that fails too.

I just tested no-extra-boolean-cast:

<script>
    const a = !!!true
    console.log(a)
</script>

The first line correctly and successfully autofixes to !true. I've spent some time looking for a multi-line rewrite rule to try and haven't yet found one.

I don't think my JS is strong enough to directly solve this - I've taken a look at both code bases and nothing jumps out at me. I asked on the linked issue whether the Svelte plugin can or should preprocess the Svelte file into multiple virtual files for ESLint, but I'm not sure whether that will actually help with this issue.

Please let me know if there's anything else I can do to help debug and troubleshoot this!

[lydell]

I found the issue causing this: sveltejs/eslint-plugin-svelte3#110

[lydell]

Update: The issue I reported in eslint-plugin-svelte was closed by sveltejs/eslint-plugin-svelte3#160

But there hasn’t been a new release of eslint-plugin-svelte yet

[lydell]

eslint-plugin-svelte3@3.3.0 or later fixes this! At least the cases in my repro repo.