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?
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) {...}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.