Feature: Add support for Vue order in components rules

[alexkiro]

What rule do you want to change?

sort-objects

Describe the problem

Currently the sort-objects rule is incompatible with the order-in-components.

It would be nice if these two could be used together somehow. As far as I can tell there is no way of making them compatible as is.

Code example

<template>
  <foo-bar></foo-bar>
</template>

<script lang="ts">
import FooBar from "@/components/FooBar.vue";

export default {
  name: "HomeView",
  components: { FooBar },
};
</script>

perfectionist/sort-objects would like to put components first, but vue/order-in-components would like to put name first since it has it's custom hardcoded order.

Additional comments

I tried using ignore-pattern but it doesn't seem to work. Presumably since there is no variable identifier available, so presumably it just skips checking for null names such as this.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[Tragio]

Currently I'm using something like this:

    'perfectionist/sort-vue-attributes': [
      'error',
      {
        // Based on: https://vuejs.org/style-guide/rules-recommended.html#element-attribute-order
        'custom-groups': {
          /* eslint-disable perfectionist/sort-objects */
          DEFINITION: 'is',
          LIST_RENDERING: 'v-for',
          CONDITIONALS: 'v-*(else-if|if|else|show|cloak)',
          RENDER_MODIFIERS: 'v-*(pre|once)',
          GLOBAL: 'id',
          UNIQUE: '*(ref|key)',
          SLOT: '*(v-slot|slot)',
          TWO_WAY_BINDING: 'v-model',
          EVENTS: '*(v-on|@*)',
          CONTENT: 'v-*(html|text)',
          /* eslint-enable perfectionist/sort-objects */
        },
        groups: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          'UNIQUE',
          'SLOT',
          'TWO_WAY_BINDING',
          'unknown',
          'EVENTS',
          'CONTENT',
        ],
        type: 'natural',
      },
    ],