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

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.

[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',
          ],
        }],
      },
    },
  ],