使用 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) {...}