conflict when use class-style component syntax and airbnb eslint rule

[weizhihuang]

Version

3.0.0-beta.6

Reproduction link

https://github.com/BGPSekai/T.Vey-frontend/blob/d09c83f82def85ace3f2739982648ee2629b1bb0/src/views/About.vue

Steps to reproduce

I create a project which select these options:
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors(SCSS)
Linter / Formatter(ESLint Airbnb config)(on save and fix on commit),
use class-style component syntax, Babel alongside TypeScript for auto-detected polyfills, then install it with Yarn.

Then I add lifecycle methods(like created) which code like this:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class About extends Vue {
  created() {
    // do something
  }
}
</script>

Then I run yarn serve(or lint), it occurred an error with eslint, it said:
error: Expected 'this' to be used by class method 'created' (class-methods-use-this)

What is expected?

I think it will be OK

What is actually happening?

It just couldn't pass the lint rule

---

Actually, it occurs when I use 3.0.0-beta.7, but I can't select this version in issue helper.

BTW, add this in .eslintrc can ignore this lint rule:

  "rules": {
    "class-methods-use-this": 0
  }

but I think this shouldn't occur after I build the project with vue-cli.

[dhensche]

This is a valid eslint warning https://eslint.org/docs/rules/class-methods-use-this . If you add something to your created() hook that references this the warning goes away. Is this a rule that should be disabled in the @vue/eslint-config-typescript plugin?

[yyx990803]

This rule is enforced by the Airbnb config, I don't think we'd want to disable specific rules when using an existing config, otherwise you lose the point of using a config. There will probably be a lot other cases that the user wants to tweak as well, so you'd just have to tweak it to your liking.

[weizhihuang]

Thanks for your responses.
But I just want to ask, is there any way to meet this rule without tweaking it?
Because our created(or other function) may not always has at least one line that references this, right?

[dhensche]

@weizhihuang you can always disable rules for one off cases where you want the linter to ignore it https://eslint.org/docs/user-guide/configuring.html#disabling-rules-with-inline-comments

[weizhihuang]

@dhensche well, I think I just disable this rule in .eslntrc
Hope there are no more rules which I need to disable...

[davars]

@yyx990803 AirBnB exempts react lifecycle method names: https://github.com/airbnb/javascript/blob/8468ed842314a5d66816927ba6c35f018035cffc/packages/eslint-config-airbnb/rules/react.js#L21

Would you consider adding exceptions to Vue lifecycle method names as well?

[davars]

Also, for the DYI approach, I just modified my project's .eslintrc.js as so:

...
rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'class-methods-use-this': ['error', {
      exceptMethods: [
        // react lifecycle methods, from the airbnb rule
        'render',
        'getInitialState',
        'getDefaultProps',
        'getChildContext',
        'componentWillMount',
        'componentDidMount',
        'componentWillReceiveProps',
        'shouldComponentUpdate',
        'componentWillUpdate',
        'componentDidUpdate',
        'componentWillUnmount',

        // vue lifecycle methods
        'beforeCreate',
        'created',
        'beforeMount',
        'mounted',
        'beforeUpdate',
        'updated',
        'activated',
        'deactivated',
        'beforeDestroy',
        'destroyed',
        'errorCaptured',
      ],
    }],
...

[tommyo]

For those still wrestling with this: adding the following to .eslintrc.js appears to solve the issue. Could this be added as a default?

  overrides: [
    {
      files: [ '*.vue'],
      rules: {
        'class-methods-use-this': ['error', {
          exceptMethods: [
            // vue lifecycle methods
            'beforeCreate',
            'created',
            'beforeMount',
            'mounted',
            'beforeUpdate',
            'updated',
            'activated',
            'deactivated',
            'beforeDestroy',
            'destroyed',
            'errorCaptured',
          ],
        }],
      },
    },
  ],

[slifty]

Since React lifecycle are excepted by default it does seem reasonable that the Vue-generated linting configuration would provide first class support for Vue.

Would it be possible for these exceptions to be included in the default generated configuration?