eslint-plugin-vue-sort-components

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

Installation

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

or

1$ 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.

1{
2  "extends": [
3    // ...
4    "plugin:@jay-es/vue-sort-components/recommended"
5  ]
6}

Custom Configuration

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

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

Then configure the rule under the rules section.

1{
2  "rules": {
3    "@jay-es/vue-sort-components/vue-sort-components": "error"
4  }
5}

Rule Details

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

:thumbsdown: Examples of incorrect code for this rule:

1export default defineComponent({
2  components: { Foo, Bar, Baz },
3});
4
5// spreads must be grouped at the top
6export default defineComponent({
7  components: { Bar, Baz, Foo, ...others },
8});
9
10// not only in Vue-specific context
11const myObject = {
12  components: { Foo, Bar, Baz },
13};

:thumbsup: Examples of correct code for this rule:

1export default defineComponent({
2  components: { Bar, Baz, Foo },
3});
4
5// spreads must be grouped at the top
6export default defineComponent({
7  components: { ...others, Bar, Baz, Foo },
8});
9
10// not only in Vue-specific context
11const myObject = {
12  components: { Bar, Baz, Foo },
13};

Options

This rule accepts a configuration object:

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

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

sortSpreads

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

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

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

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