使用 Airbnb-Typescript-ESLint-Config 命名私有字段和冲突的成员排序

Question

I have added eslint with Prettier and the Airbnb-TypeScript-Styleguide to my Angular-project and it says you shouldn't have any dangling underscores. How am I meant to name my private fields that are accessed through getters and setters?

Example:

private _isEnabled: boolean = false;
public get isEnabled() {
    return this._isEnabled;
}
public set isEnabled(v:boolean) {
    this._isEnabled = v;
}

If I rename _isEnabled to isEnabled it is no longer distinguishable from the getter and setter name. If I use a slightly different name like enabled it is no longer 100% clear that enabled should be accessed through its getters and setters.

I'm also running into an issue if I have multiple properties with getters and setters. If I order them like this:

get isEnabled() {...}
set isEnabled(v) {...}
get isHidden() {...}
set isHidden(v) {...}

I get an error saying 'get IsHidden()' should be with the other get properties. However, if I order them like this:

get isEnabled() {...}
get isHidden() {...}
set isEnabled(v) {...}
set isHidden(v) {...}

I get an error saying that overloads should be adjacent (get isEnabled() should be next to set isEnabled(v))

My eslintrc.json looks like this:

{
    "root": true,
    "ignorePatterns": [
        "app/**/*", // ignore nodeJs files
        "dist/**/*",
        "release/**/*"
    ],
    "overrides": [
        {
            "files": ["*.ts"],
            "parserOptions": {
                "project": [
                    "./tsconfig.serve.json",
                    "./src/tsconfig.app.json",
                    "./src/tsconfig.spec.json",
                    "./e2e/tsconfig.e2e.json"
                ],
                "createDefaultProgram": true
            },
            "extends": [
                // Angular's recommended settings
                "plugin:@angular-eslint/recommended",
                // AirBnB Styleguide rules
                "airbnb-typescript/base",
                // Settings for Prettier
                "plugin:prettier/recommended"
            ],
            "rules": {
                "prefer-arrow/prefer-arrow-functions": 0,
                "@angular-eslint/directive-selector": 0,
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": "app",
                        "style": "kebab-case"
                    }
                ]
            }
        },
        // Rules for the HTML of Angular components
        {
            "files": ["*.component.html"],
            "extends": ["plugin:@angular-eslint/template/recommended"],
            "rules": {}
        },
        // Rules for the TypeScript of Angular components
        {
            "files": ["*.component.ts"],
            "extends": [
                "plugin:@angular-eslint/ng-cli-compat",
                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
                "plugin:@angular-eslint/template/process-inline-templates"
            ]
        }
    ]
}

Is my configuration wrong?

I'm using the linter mostly for consistency throughout my code. Is it possible to set and enforce a rule on how private fields are to be named and how the getters and setters are to be ordered when there are multiple properties with a getter and setter?

Answer 1

First, I do not recommend to use setter and getter if there is no use of it. Over-designing is not good practice.

You can always rename the private attribute with Field prefix like this:

private isEnabledField: boolean = false;
public get isEnabled() {
    return this.isEnabledField;
}
public set isEnabled(newValue:boolean) {
    this.isEnabledField = newValue;
}

As for your linting error, it's difficult to say without the specific error. My guess is that the attribute should be before the setter and getter like this:

private isEnabledField
get isEnabled() {...}
set isEnabled(newValue) {...}

private isHiddenField
get isHidden() {...}
set isHidden(newValue) {...}