Rule Proposal: vue/no-unused-methods

[phaibin]

Please describe what the rule should do:

Unused methods should be warned and you can clear them out.

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>Hello</h1>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {

    },
    unusedMethod() {

    }    
  }
}
</script>

This unusedMethod method should be set as Warning and easily to find out.

Additional context

[mysticatea]

Thank you for this issue.

However, I'm not sure if this rule works intentionally because methods can be used from outside of the component via ref. For example, people may define focus() method as a public API.

[phaibin]

Thanks for reply.

I agree the situation you mentioned exists, but I think it's very few. So this rule can be added to Uncategorized group and added to eslint config alone.

At least in developing stage this rule is very useful because you often make a lot of changes for a component and the codes will soon be mess. I think one option is to adding disable tag for a public method or disable this rule for production eslint config.

Anyway, I still looking forward to get this rule worked. 😉

[ekosynth]

Any progress on this? Would be extremely useful for me.

[agm1984]

I just Googled to find this because I have trouble locating dead code when it is computed props and methods.

I think there should be an ES Lint rule that catches these, and I think if you are using the methods outside the component, you should use /* eslint-disable-line no-unused-stuff */ along with a code annotation that indicates the method is implicitly depended on by unknown external code.

I can't pin it on any specific anti-pattern, but my intuition tells me there is some anti-pattern here. If your function is triggered from another component, it is rational that there is a push/pull violation occurring.

For example, an alternate solution could be to instruct the component to respond to an event, where the method called by the event listener acts on code in the component, or fires another event that external components can listen to by name. Then the component can be listening for named trigger events.

My opinion is this rule should exist and be defaultly-enabled for all rulesets, and it should be disable-able for expert use cases, and overridable for one-off use cases.

For example, if you have a method called this.disableThing() that can be called externally, you may also have 200 other references in your codebase to a method of that name for other purposes in other components. In this scenario, if you search your codebase for disableThing to see if any other component is calling it, you will see 200 references and your brain will be at risk to explode.

Alternately, if you create a global event listener in the component that listens for an event named disable-unique-thing, two benefits emerge:

1. you can search your codebase for disable-unique-thing to see all places in the code that are definitely executing that method from external
2. the method is no longer "declared but not used" because the event listener is using it locally.

In closing, I'm sure there are some great counter-arguments to mine, and I reserve the right to prefer those over what I have described :) Personally, I am extremely strict when it comes to finite state machines and making explicit APIs that maintain an obvious connection between states and state transitions.

[dten]

Can we use style to consider methods private to the component an warn if unused?

https://vuejs.org/v2/style-guide/#Private-property-names-essential

edit: the more i think about this the less useful it is...

[ota-meshi]

We have released a rule to report unused properties.

• vue/no-unused-properties

You can also use the option to report unused methods.

https://eslint.vuejs.org/rules/no-unused-properties.html#options

However, as as commented, this rule can't track usage via $refs, which might be a false positive.

[heohex]

@ota-meshi Hello, is it possible to make vue/no-unused-properties work with a vue-class-component?