eslint-plugin-import: `import/order` fixer breaks Svelte script imports

This source:

<script lang="typescript">
    import { AlertTypes, icons } from "./alert-types";
    import Icon from "ui/library/components/icon/icon.svelte";

    export let type = AlertTypes.Info;
</script>

produces one warning on each of the import lines. The first line produces “There should be at least one empty line between import groups - eslint (import/order)” and the second line produces “ui/library/components/icon/icon.svelte import should occur before import of ./alert-types - eslint (import/order)”.

Fixing the first warning works just fine. A newline is inserted between the imports:

<script lang="typescript">
    import { AlertTypes, icons } from "./alert-types";

    import Icon from "ui/library/components/icon/icon.svelte";

    export let type = AlertTypes.Info;
</script>

Unfortunately, fixing the remaining warning with ESLint results in this broken output:

<script lang="typescript">
    import { AlIcon from "ui/library/components/icon/icon.svelte";
import { AlertTypes, icons } from "./alert-types";


    export let type = AlertTypes.Info;
</script>

Note the double whitespace below the two imports.

Any idea what’s going on? My goal is to get the autofix to correctly swap those two import lines and not break the source code.

About this issue

Original URL
State: open
Created 2 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Use https://github.com/ota-meshi/eslint-plugin-svelte instead of hacky https://github.com/sveltejs/eslint-plugin-svelte.

JounQin on Aug 23, 2022

@callmeaponte just like with vue, you’d need a svelte-specific eslint parser to be able to handle that.

ljharb on Aug 23, 2022

Oh yes, it’s no difficulty at all. In .eslintrc.js:

"use strict";

const aliases = require("./scripts/aliases.js");

module.exports = {
    extends : [...],

    env : { ... },

    rules : { ... },

    overrides : [
        // svelte components
        {
            files : [ "antechamber-ui/**/*.svelte" ],

            extends : [ "plugin:@typescript-eslint/recommended" ],

            processor : "svelte3/svelte3",

            env : { browser : true },

            plugins : [
                "html",
                "svelte3",
                "import",
                "@typescript-eslint",
            ],

            settings : {
                // pass the Typescript package to the svelte plugin/
                "svelte3/typescript" : require("typescript"),

                // Allow for eslint-plugin-import to understand our aliased module roots
                "import/resolver" : {
                    "./scripts/eslint/import-resolver.js" : { aliases },
                },

                // We ignore some warnings because we're bad people
                "svelte3/ignore-warnings" : require("./scripts/eslint/svelte3-warnings.js"),
            },

            parser        : "@typescript-eslint/parser",

            parserOptions : {
                ecmaVersion                 : 8,
                sourceType                  : "module",
                allowImportExportEverywhere : true,
            },

            rules : {
                // Svelte3 uses mutable exports to represent component props
                "import/no-mutable-exports"    : "off",
                "import/prefer-default-export" : "off",

                // Can't get eslint resolver to play nice with TS.
                // Turning this off so we can still have a linter in svelte files.
                "import/no-unresolved" : "off",

                // Exported component props should be at the top of the component
                "import/exports-last" : "off",

                // Exports can't be combined in svelte3
                "import/group-exports" : "off",

                // Freaks out with svelte3
                "import/first" : "off",

                // Disable due to let & reactive statements
                "newline-after-var" : "off",

                // Adjusting due to let & reactive statements
                "padding-line-between-statements" : [ "warn",
                    {
                        blankLine : "any", prev : "let", next : "*",
                    },
                ],
            },
        },
    ],
};

ivanjonas on Mar 22, 2022