Eslint-plugin-vue: vue/order-in-components doesn't fix warnings

[jean-moldovan]

105:5  warning  The "computed" property should be above the "created" property on line 73  vue/order-in-components

Expected: vue/order-in-components is supposed to be fixable
(https://github.com/vuejs/eslint-plugin-vue/issues/299)
Current: not fixable

eslint-plugin-vue v5.0.0
node v9.11.1

Thanks!

[michalsnik]

Hi @jean-moldovan This rule is fixable actually, but not in all cases. We explicitly disable auto-fix, when we detect that some of the nodes might contain side-effects. We want you to be safe and not break your app in hard to debug way - so we suggest you to consciously fix order by yourself.

[jean-moldovan]

Thanks, @michalsnik. Mind sharing an example of a possible side-effect when "computed" goes above "created"?

Thanks again!

[jean-moldovan]

My example:

<template>
  <div />
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    mounted () {
      console.info(this.welcomeMsg, this.versionMsg)
    },
    computed: {
      ...mapGetters(['companyName', 'version']),

      welcomeMsg () {
        return `Welcome to ${this.companyName}! `
      },
      versionMsg () {
        return `v${this.version}`
      }
    }
  }
</script>

<style scoped>

</style>

The "computed" property should be above the "mounted" property on line 9

What is the algorithm for the side-effect detection here, @michalsnik ?

Thanks!

[armano2]

@jean-moldovan we are not auto sorting it because of spread operator. live demo

[deka]

Hi
Why this issue is closed ?

We explicitly disable auto-fix, when we detect that some of the nodes might contain side-effects.

Can you explain more ? update doc ? or fix side effects ?

[kaantureyyen]

@jean-moldovan we are not auto sorting it because of spread operator. live demo

What is the side effect caused by the spread operator? Sorry if this is a newbie question 😅

[wrabit]

I for 1 would really find this feature useful.

[clustersnake]

I extracted my javascript code to a .js file visual studio code fixes the code aplying the recommended rules, I just had to wrap my component with Vue.extend(

export default Vue.extend({
  name: "PageIndex",
  mixins: [ClienteHttp],
...
});

I know it's not a real fix, but... it's something! ¯\_(ツ)_/¯