azat-io / eslint-plugin-perfectionist

🦄 ESLint plugin for sorting various data such as objects, imports, types, enums, JSX props, etc.
https://eslint-plugin-perfectionist.azat.io
MIT License
1.67k stars 30 forks source link

Bug: invalid import sorting when importing a relative .vue and an internal-type from @/ #155

Closed TotomInc closed 2 weeks ago

TotomInc commented 2 weeks ago

Describe the bug

It doesn't sort and is broken in an infinite loop when there is a relative .vue file import and an import type {} from "@/xxx".

Code example

Using ESLint flat-config, here's the eslint-plugin-perfectionist related configuration:

rules: {
  "perfectionist/sort-imports": [
    "error",
    {
      type: "natural",
      "newlines-between": "always",
      "internal-pattern": ["@/**", "~/**"],
      "custom-groups": {
        value: { "vue-components": ["**/*.vue"] },
      },
      groups: [
        ["side-effect", "side-effect-style", "style"],
        ["builtin-type", "builtin"],
        ["external-type", "external"],
        ["internal-type", "internal"],
        ["parent-type", "sibling-type", "index-type", "parent", "sibling", "index"],
        "vue-components",
        "object",
        "unknown",
      ],
    },
  ]
},

Here's the non-working code-sample, from a .vue SFC:

<script setup lang="ts">
import FilterLocationButton from "./FilterLocationButton.vue";
import type { LocationType } from "@/locations";

defineProps<{
  locationType: LocationType[];
}>();

const emit = defineEmits<{
  (e: "add", value: LocationType): void;
  (e: "remove", value: LocationType): void;
  (e: "addAll"): void;
}>();
</script>

ESLint version

v8.57.0

ESLint Plugin Perfectionist version

v2.10.0

Additional comments

When fixing the issue, it causes a double empty line:

CleanShot 2024-06-13 at 16 16 37

CleanShot 2024-06-13 at 16 16 57

Validations

TotomInc commented 2 weeks ago

I've fixed the double line-return issue with the following:

- "internal-pattern": ["@/**", "~/**"],
+ "internal-pattern": ["@/**", "~/**", "!**.vue"],

However, I still have the invalid import sorting loop error.

TotomInc commented 2 weeks ago

Alright the issue was totally on my end. Sorry for creating this useless issue.

Since my config extends antfu's ESLint config, I totally forgot that there is also the "import/order" rule enabled.

After setting "import/order": "off", it works as intended.

It should have tickled my mind that an ESLint error loop is the cause of conflicting rules.

Thanks for this awesome plugin!