feat: add "regex" option to id-naming-convention (#166)

* add "regex" option to `id-naming-convention` * add tests for "regex" option in `id-naming-convention` * prettier * type safety not exactly the cleanest lol * document regex option
yeonjuan · Dec 5, 2023 · b73cfe5 · b73cfe5
1 parent 81c7e48
commit b73cfe5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/docs/rules/id-naming-convention.md b/docs/rules/id-naming-convention.md
@@ -14,14 +14,15 @@ module.exports = {
 
 ## Rule Details
 
-This rule supports 4 naming cases. `camelCase`, `snake_case`, `PascalCase`, `kebab-case` (default `snake_case`).
+This rule supports 4 naming cases. `camelCase`, `snake_case`, `PascalCase`, `kebab-case` (default `snake_case`). It also supports `regex`, which allows you to configure a custom naming convention.
 
 ### Options
 
 - `"snake_case"` (default): Enforce snake_case format.
 - `"camelCase"`: Enforce camelCase format.
 - `"PascalCase"`: Enforce PascalCase format.
 - `"kebab-case"`: Enforce kebab-case format.
+- `"regex", { "pattern": "^my-regex$" }`: Enforce a format defined by a custom regex.
 
 #### "snake_case" (default)
 
@@ -79,6 +80,32 @@ Examples of **correct** code for this rule with the `"kebab-case"` option:
 <div id="foo-bar"></div>
 ```
 
+### "regex"
+
+Examples of **incorrect** code for this rule with the `"regex"` option below:
+
+```js
+{
+  "@html-eslint/id-naming-convention": ["error", "regex", { "pattern": "^([A-Z][a-z])+[A-Z]?$" }]
+}
+```
+
+```html,incorrect
+<div id="foo_bar"></div>
+```
+
+Examples of **correct** code for this rule with the `"regex"` option below:
+
+```js
+{
+  "@html-eslint/id-naming-convention": ["error", "regex", { "pattern": "^([A-Z][a-z])+[A-Z]?$" }]
+}
+```
+
+```html,correct
+<div id="CuStOmReGeX"></div>
+```
+
 ## Further Reading
 
 [Wiki - Naming convention](<https://en.wikipedia.org/wiki/Naming_convention_(programming)>)
diff --git a/packages/eslint-plugin/lib/rules/id-naming-convention.js b/packages/eslint-plugin/lib/rules/id-naming-convention.js
@@ -16,6 +16,7 @@ const CONVENTIONS = {
   SNAKE_CASE: "snake_case",
   PASCAL_CASE: "PascalCase",
   KEBAB_CASE: "kebab-case",
+  REGEX: "regex",
 };
 
 const CONVENTION_CHECKERS = {
@@ -43,6 +44,13 @@ module.exports = {
       {
         enum: Object.values(CONVENTIONS),
       },
+      {
+        type: "object",
+        properties: {
+          pattern: { type: "string" },
+        },
+        additionalProperties: false,
+      },
     ],
     messages: {
       [MESSAGE_IDS.WRONG]:
@@ -56,7 +64,11 @@ module.exports = {
         ? context.options[0]
         : CONVENTIONS.SNAKE_CASE;
 
-    const checkNaming = CONVENTION_CHECKERS[convention];
+    const checkNaming =
+      convention === CONVENTIONS.REGEX
+        ? (/** @type string */ name) =>
+            new RegExp(context.options[1].pattern).test(name)
+        : CONVENTION_CHECKERS[convention];
 
     return {
       /**

diff --git a/packages/eslint-plugin/tests/rules/id-naming-convention.test.js b/packages/eslint-plugin/tests/rules/id-naming-convention.test.js
@@ -21,6 +21,10 @@ ruleTester.run("id-naming-convention", rule, {
       code: `<div id="snake_case"> </div>`,
       options: ["snake_case"],
     },
+    {
+      code: `<div id="CuStOmReGeX"> </div>`,
+      options: ["regex", { pattern: "^([A-Z][a-z])+[A-Z]?$" }],
+    },
   ],
   invalid: [
     {
@@ -41,5 +45,14 @@ ruleTester.run("id-naming-convention", rule, {
         },
       ],
     },
+    {
+      code: `<div id="kebab-case"> </div>`,
+      options: ["regex", { pattern: "^([A-Z][a-z])+[A-Z]?$" }],
+      errors: [
+        {
+          message: "The id 'kebab-case' is not matched with the regex.",
+        },
+      ],
+    },
   ],
 });