eslint-plugin-vue-sort-components

A plugin for ESLint to keep order of component names.
The rule is auto-fixable.

Installation

$ npm install --save-dev eslint @jay-es/eslint-plugin-vue-sort-components

or

$ yarn add -dev @jay-es/eslint-plugin-vue-sort-components

Usage

Add plugin:@jay-es/vue-sort-components/recommended to the extends section of your .eslintrc configuration file.

{
  "extends": [
    // ...
    "plugin:@jay-es/vue-sort-components/recommended"
  ]
}

Custom Configuration

Add @jay-es/vue-sort-components to the plugins section of your .eslintrc configuration file.

{
  "plugins": ["@jay-es/vue-sort-components"]
}

Then configure the rule under the rules section.

{
  "rules": {
    "@jay-es/vue-sort-components/vue-sort-components": "error"
  }
}

Rule Details

This rule checks property definitions of object expressions named components and verifies that all keys are sorted alphabetically.

👎 Examples of incorrect code for this rule:

export default defineComponent({
  components: { Foo, Bar, Baz },
});

// spreads must be grouped at the top
export default defineComponent({
  components: { Bar, Baz, Foo, ...others },
});

// not only in Vue-specific context
const myObject = {
  components: { Foo, Bar, Baz },
};

👍 Examples of correct code for this rule:

export default defineComponent({
  components: { Bar, Baz, Foo },
});

// spreads must be grouped at the top
export default defineComponent({
  components: { ...others, Bar, Baz, Foo },
});

// not only in Vue-specific context
const myObject = {
  components: { Bar, Baz, Foo },
};

Options

This rule accepts a configuration object:

{
  "@jay-es/vue-sort-components/vue-sort-components": ["error", { sortSpreads: false }]
}

• sortSpreads - if true, enforce spread properties to be sorted. Default is false.

sortSpreads

👎 Examples of incorrect code for the { sortSpreads: true } option:

export default defineComponent({
  components: { ...others2, ...others1, Bar, Baz },
});

👍 Examples of correct code for the { sortSpreads: true } option:

export default defineComponent({
  components: { ...others1, ...others2, Bar, Baz },
});