Commitlint - Allow '/' in scope-enum

Question

In my Angular project, I want to extend @commitlint/config-conventional with some pre-defined scopes.

The Angular project has a library for UI components (generated via ng generate library) and a default app which consumes the UI library.

In commitlint.config.js I've added the following lines:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'scope-enum': [
        2,
        'always',
        [
          'ui-components',
          'ui-components/badge',
          'ui-components/button',
          'ui-components/tooltip',
          'core',
          'account',
          'plugins',
          'settings',
          'projects',
          'shared',
          'styles'
        ]
    ]
  }
};

However, when I try to commit something with the scope: 'ui-components/tooltip':

fix(ui-components/tooltip): fix border

I get a commitlint error, saying that:

⧗   input: fix(ui-components/tooltip): fix border
✖   scope must be one of [ui-components, ui-components/badge, ui/button, ui-components/tooltip, core, account, plugins, settings, projects, shared, styles] [scope-enum]

✖   found 1 problems, 0 warnings

Answer 1

According to source code, Commitlint use / for multiple scopes.

It means, you can commit like fix(core/account): fix border but you can't commit fix(ui-components/tooltip): fix border because you need to add tooltip in to your scopes first.

Here is source code: https://github.com/conventional-changelog/commitlint/blob/master/%40commitlint/rules/src/scope-enum.ts

Also, it is mentioned in here: https://github.com/conventional-changelog/commitlint/blob/master/docs/concepts-commit-conventions.md#multiple-scopes

You can write your own custom plugin to check scopes, I had the same issue, so I wrote one to solve this problem, see example commitlint.config.js below:

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "enhanced-scope-enum": [
      2,
      "always",
      [
        "ui-components",
        "ui-components/badge",
        "ui-components/button",
        "ui-components/tooltip",
        "core",
        "account",
        "plugins",
        "settings",
        "projects",
        "shared",
        "styles",
      ],
    ],
  },
  plugins: [
    {
      rules: {
        "enhanced-scope-enum": (parsed, when = "always", value = []) => {
          if (!parsed.scope) {
            return [true, ""];
          }

          // only use comma sign as seperator
          const scopeSegments = parsed.scope.split(",");

          const check = (value, enums) => {
            if (value === undefined) {
              return false;
            }
            if (!Array.isArray(enums)) {
              return false;
            }
            return enums.indexOf(value) > -1;
          };

          const negated = when === "never";
          const result =
            value.length === 0 ||
            scopeSegments.every((scope) => check(scope, value));

          return [
            negated ? !result : result,
            `scope must ${negated ? `not` : null} be one of [${value.join(
              ", "
            )}]`,
          ];
        },
      },
    },
  ],
}

Answer 2

Unfortunately slashes aren't allowed in scopes.

To get around this I replace / with two dashes (--).

I wrote a script to grab subfolders and return an array:

https://gist.github.com/trevor-coleman/51f1730044e14081faaff098618aba36

[
  'ui-components',
  'ui-components--badge',
  'ui-components--button',
  'ui-components--tooltip',
   ...
]