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

Question

我在我的 Angular 项目中添加了 Prettier 和 Airbnb-TypeScript-Styleguide 的 eslint，它说你不应该有任何悬空的下划线。 我该如何命名通过 getter 和 setter 访问的私有字段？

例子：

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

如果我将_isEnabled重命名为isEnabled ，它将不再与 getter 和 setter 名称区分开来。 如果我使用稍微不同的名称，例如启用，则不再 100% 清楚启用应该通过它的 getter 和 setter 访问。

如果我有多个带有 getter 和 setter 的属性，我也会遇到问题。 如果我这样订购它们：

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

我收到一条错误消息，提示“get IsHidden()”应该与其他 get 属性一起使用。 但是，如果我这样订购它们：

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

我收到一条错误消息，指出重载应该是相邻的（get isEnabled() 应该在 set isEnabled(v) 旁边）

我的 eslintrc.json 看起来像这样：

{
    "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"
            ]
        }
    ]
}

我的配置错了吗？

我使用 linter 主要是为了在我的代码中保持一致性。 是否可以设置和强制执行有关如何命名私有字段以及当有多个具有 getter 和 setter 的属性时如何对 getter 和 setter 进行排序的规则？

Answer 1

首先，如果没有使用，我不建议使用setter和getter。 过度设计不是好的做法。

您始终可以使用Field前缀重命名私有属性，如下所示：

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

至于你的 linting 错误，没有具体的错误很难说。 我的猜测是该属性应该在 setter 和 getter 之前，如下所示：

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

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