Question: Configure `vue/order-in-components` to play nice with `sort-keys`?

[Xotic750]

I have vue/order-in-components set, but I also have sort-keys enabled for natural sort order.

I wanted to know if there is some configuration that I can use to make the two rules play nicely together?

Currently when I sort vue components in order, then sort-keys errors about natural sort order. I know that I can litter my components with eslint disable comments, but I would prefer no to do that if it is at all possible?

[michalsnik]

I'm afraid we can't do anything about that. One rule does not know anything about any other, and we can't interfere with what other rules should or shouldn't lint. You have to either disable sort-keys per component or disable it completely.

[Xotic750]

That's a pity. Thanks for the reply.

[jcastrov]

Yeah, it's a pity. I achieved to keep this rule enabled in all *.js files but *.vue files. My solution was to add an inner .eslintrc.js file inside components directory and extend the main .eslintrc.js file. App.vue and other files outside of components directory must have the comment for disabling sort-keys rule at the start of <script> tag

./src/components/.eslintrc.js

const eslint = {
  root: false,
  extends: ["../../.eslintrc.js"],
  rules: {
    "sort-keys": [0]
  }
};

module.exports = eslint;

./src/App.vue

<template></template>
<script>
/* eslint-disable sort-keys */
export default {}
</script>

<style></style>

I know, this is not the best solution, but I hope this works for you

[Xotic750]

Thanks, I am also able to do this with eslint comments but that is something that we wish to avoid. And of course that disables the rule for every object, not just the vue object, that requires many more disable/enables.

[cantoute]

or disable the rule for *.vue

.eslintrc.js

overrides: [
    {
        files: ['*.vue'],
        // files: ['index.vue', 'components/**/*.vue'],
        rules: {
            'sort-keys': 'off',
        },
    },

[Xotic750]

Thanks, but not the solution we were looking for as then the rule is off for standard objects.

[cantoute]

I haven't found a bettor option... most of my code is in imported from .js files where the filter works.
And as the rule sort-keys don't --fix it's not such a use full rule.

[Xotic750]

We disabled the rule a while back after, and a colleague wrote a sorter using jscodeshift.