Support for ComponentName/ComponentName.tsx

[Eldad Bercovici]

I don’t know how to call this requirement, but in a lot of React projects you’ll see the following pattern:

Within the folder: ./src/components/ComponentName you’ll find: ComponentName.tsx and ComponentName.module.scss.

So the containing folder’s name is the name of the files within it.

I suggest the following syntax:

ls:
    src/components/PascalCase:$1
        $1.tsx
        $1.module.scss

Hope this is clear enough, and that I haven’t missed this option somehow.

[Jeff Fairley]

I could also envision something akin to:

ls:
  src/components:
    .dir: PascalCase

    "*":
      .tsx: dir
      .module.scss: dir

... dir or something similar: match-dir, dir-match, parent, match-parent...

[Jeff Fairley]

On more thought, I do like the pattern matching idea.

I actually have a pattern in my codebase where the file root matches a directory that isn't the immediate parent.

I'll pull from regex and use parens to represent the match groups. I envision the references would be localized to the file path in question.

ls:
  src/components:
    (*):
      .dir: PascalCase
      .module.scss: $1
      .tsx: $1

      __tests__:
        .spec.tsx: $1

[Ihor]

Found alternative with eslint, until this is resolved - https://www.npmjs.com/package/eslint-plugin-check-file with filename-naming-convention rule.
Something like this will throw en error if there is no folder with exactly the same name for file (except if file is in hooks directory or file is index). Plus this ensures, that component file name is in PascalCase

      "rules": {
        "check-file/filename-naming-convention": [
          "error",
          {
            "**/!(hooks)/!(index).*": "<1>",
            "**/**/!(hooks)/!(index).*": "PASCAL_CASE"
          },
          { "ignoreMiddleExtensions": true }
        ]
      }

It's also possible to customize error message to make it more readable
https://github.com/DukeLuo/eslint-plugin-check-file/blob/main/docs/rules/filename-naming-convention.md#errormessage

[Lucas Löffel]

fyi: i will definitely support this in the future