Rule Proposal: Prohibit calling computed properties like methods

[manniL]

Please describe what the rule should do:
This rule should prohibit calling computed properties like methods. The only exception would be when a method is returned by that computed property. Not sure if this is actually "easily detectable" though.

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:

<template>
  <h1>
    <!-- .... -->
  </h1>
</template>

<script>
export default {
  props: {
    user: {
      type: [Object, Boolean],
      required: true
    }
  },
  computed: {
    isUserPresent () {
      return this.user
    },
  },
  methods: {
    greetUser () {
      if(this.isUserPresent()) { // oh oh! called the computed prop like a method
	   console.log('Hi user')
      }
    }
  }
}
</script>

[tyankatsu0105]

If the computed item return function(imported from another file), I think ESLint can't realize whether it's a function.

<template>
  <div>
    <button type="button" @click="judgeName">button</button>
  </div>
</template>

<script>
import { func } from "./func";
export default {
  computed: {
    getAlert() {
      return func; // this type is Identifier...
    }
  },
  methods: {
    judgeName() {
      this.getAlert();
    }
  }
};
</script>

export const func = () => {
  alert('aaaaaaa')
}

@ota-meshi
Is there a way to judge whether it's a function?

[ota-meshi]

May not be able to track whether it is a function as you say.

Hmm.. this rule may cannot be implemented.

[manniL]

Oh, right. I totally forgot the use case that computed props could be functions too when I was making my mind up about the rule. 🙈

Could we "limit" the detection then to computed properties without "external dependencies" somehow?

[tyankatsu0105]

Hi @manniL

Could we "limit" the detection then to computed properties without "external dependencies" somehow?

Yes. It's probably possible.

@ota-meshi
We should consider:

• props
• methods
• computed
• $options

and more?

[ota-meshi]

@tyankatsu0105 I don't think you need to track $options. Perhaps it's intended for a special use in external files.

[tyankatsu0105]

@manniL
I added the rule no-use-computed-property-like-method to this Eslint plugin.
You can use this rule at v7.15.0.

[manniL]

Thanks a lot 👍