angulareslinttypescript-eslint

Naming convention rule for specific variable name


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;

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?


Solution

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