Rule Proposal: order-in-computed

[lennoximus]

Please describe what the rule should do:

Allows to choose order of computed properties which can be defined in several manners, such as:

• "Typical" computed. Properties that were defined by using a simple return expression like

computed: {
  messages () {
    return this.$store.state.user.messages
  }
}

• Computed properties with custom getters/setters. E.g.

computed: {
  messages: {
    get () {
      return this.$store.state.user.messages
    },
    set (newValue) {
      this.$store.commit('SET_USER_MESSAGES', newValue)
    }
  }
}

• Computed properties described by Vuex mapState and mapGetters helpers.

computed: {
  ...mapGetters(['isAuthorized']),
  ...mapState({
    userStatus: state => state.user.status
  })
}

Rule should add an opportunity to enforce the same code style by ordering these different definition types of computed properties in desired sequence.

What category should the rule belong to?

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

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

• With order: ['mapGetters', 'mapState', 'getters/setters', 'normal'] passed as configuration.

// Bad.

messages: {
  get () {
    return this.$store.state.user.messages
  },
  set (newValue) {
    this.$store.commit('SET_USER_MESSAGES', newValue)
  }
},
hideHeader () {
  return this.$route.meta.hideHeader
},
...mapGetters(['isAuthorized']),
...mapState({
  userStatus: state => state.user.status,
  nextStep: state => state.user.next_step
}),
noAuthRequired () {
  return this.$route.meta.noAuthRequired
}

// Good.

...mapGetters(['isAuthorized']),
...mapState({
  userStatus: state => state.user.status,
  nextStep: state => state.user.next_step
}),
messages: {
  get () {
    return this.$store.state.user.messages
  },
  set (newValue) {
    this.$store.commit('SET_USER_MESSAGES', newValue)
  }
},
hideHeader () {
  return this.$route.meta.hideHeader
},
noAuthRequired () {
  return this.$route.meta.noAuthRequired
}