I develop an Angular project and I use ESLint with a rule for modifiers protected readonly
to be in strictCamelCase
as follows:
{
"selector": ["classProperty"],
"format": ["strictCamelCase"],
"leadingUnderscore": "forbid",
"trailingUnderscore": "forbid",
"modifiers": ["protected", "readonly"]
}
I use some enums in my project such as EnumButtonSize and I use to declare it like:
protected readonly EnumButtonSize = EnumButtonSize;
readonly
should be enough, but I use Storybook in my project and I then have to add the protected
modifier to make this variable not present in Storybook documentation (alternative is to add a comment /** */
with @internal
decorator above the variable)<my-button [buttonSize]="EnumButtonSize.LARGE">
I'd like to add a specific ESLint rule to support these enums in PascalCase (in addition to the previous rule). I tried something like that without success:
{
"selector": ["classProperty"],
"format": ["StrictPascalCase"],
"leadingUnderscore": "forbid",
"trailingUnderscore": "forbid",
"modifiers": ["protected", "readonly"],
"filter": {
"regex": "^Enum.*",
"match": true
}
},
Can someone help me or have a different idea?
Naming convention: ESLint naming convention
ESLint applies these rules in order. So if a property matches the first rule, it won’t be checked against the second. The first rule catches class properties like protected readonly EnumButtonSize and allows them in PascalCase only if they match ^Enum[A-Z]. The second rule is a fallback for all other protected readonly class properties and enforces strictCamelCase.
"@typescript-eslint/naming-convention": [
"error",
{
"selector": "classProperty",
"modifiers": ["protected", "readonly"],
"format": ["PascalCase"],
"custom": {
"regex": "^Enum[A-Z]",
"match": true
}
},
{
"selector": "classProperty",
"modifiers": ["protected", "readonly"],
"format": ["strictCamelCase"],
"leadingUnderscore": "forbid",
"trailingUnderscore": "forbid"
}
]