rule: `vue/sort-keys-fix`, the same as `vue/sort-keys` but with autofix

[hugoattal]

Please describe what the rule should do:
This should do the exact same thing as vue/sort-keys, but also autofix it (with --fix flag).

I think it should still be a different rule because this kind of fix is unsafe, meaning it can break/change the behavior of the code.
Here's an example:

const music = {
    title: "Africa",
    author: "Toto"
}
console.log(Object.values(music)[0]); // "Africa"

After fix:

const music = {
    author: "Toto",
    title: "Africa"
}
console.log(Object.values(music)[0]); // "Toto"

Still, this kind of breaking should never happen with clean code. And fixing the sort-keys manually is really tedious... That's why I suggest to add a new rule with an autofix like this one: https://github.com/leo-buneev/eslint-plugin-sort-keys-fix.

What category should the rule belong to?

• Enforces code style (layout)
• Warns about a potential error (problem)
• Suggests an alternate way of doing something (suggestion)
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

Example 1:

// BAD
<script lang="ts">
export default defineComponent({
    components: { B, A }
});
</script>

// GOOD
<script lang="ts">
export default defineComponent({
    components: { A, B }
});
</script>

Example 2:

// BAD
<script lang="ts">
export default defineComponent({
    methods: {
        B(){
            // ...
        },
        A(){
            // ...
        }
    }
});
</script>

// GOOD
<script lang="ts">
export default defineComponent({
    methods: {
        A(){
            // ...
        },
        B(){
            // ...
        }
    }
});
</script>

[hugoattal]

I ended up building an ESLint plugin myself: https://github.com/hugoattal/eslint-plugin-sort-keys-custom-order
I'm closing this, but feel free to reopen it if you think it's worth it.

Keep up the good work 👍 !

[laddi-netapp]

I just don't get why there's no auto-fix for vue/sort-keys, it's easy to implement and if sorting objects potentially breaks someone's code then that's caused by irregularities in that codebase and not the sorting, imo.

Was there any reasoning for not implementing an auto-fix for this rule, because I haven't found any justification anywhere, at least...?

const music = {
    title: "Africa",
    author: "Toto"
}
console.log(Object.values(music)[0]); // "Africa"

If your code looks like this, then you don't really need to use an object anyway because why wouldn't you just fetch music.title directly? 🤷🏻

[hugoattal]

If your code looks like this, then you don't really need to use an object anyway because why wouldn't you just fetch music.title directly? 🤷🏻

I 100% agree with you (and I would add that this would be a pretty bad code), but applying this ESLint rule would still break that code. And ESLint rules shouldn't change code behavior, I guess... That's why I added:

Still, this kind of breaking should never happen with clean code.

---

(In my case, I don't have this problem anymore since I now use <script setup>)