Add rule to validate if getter/setter shadow a class fields with @api

[pmdartus]

The following pattern is currently not flagged by the valid-api rule but has the unexpected behavior that the foo public property is not accessible from the template. (original issue)

import { LightningElement, api } from 'lwc';

export default class App extends LightningElement {
    @api foo = 1;

    set foo(value) {}
    get foo() {}
}

We should restrict the combination of public property with a getter/setter.

This can either be achieved by:

• adding a new ESLint rule dedicated to this case, eg: api-accessor-shadow
• or enhance the valid-api ESLint rule to handle this case. However, we need to ensure that the valid-api ESLint stays backward compatible because the rule is used to validate the component when compiled on the platform. In this case, we will add this new check behind a config.

{
  "@lwc/lwc/valid-api": [
    "error",
    { "disallowAccessorShadow": true }
  ]
}

[git2gus]

This issue has been linked to a new work item: W-7200637

[git2gus]

This issue has been linked to a new work item: W-7612085

[jodarove]

@pmdartus I'm wondering if we should instead enable lwc/no-dupe-class-members?

I also saw #56, which should match the above rule.

[pmdartus]

Again really good catch @jodarove. This case is also already implemented by lwc/no-dupe-class-members: https://github.com/salesforce/eslint-plugin-lwc/blob/master/test/lib/rules/no-dupe-class-members.js#L175.