Constraining directory and filenames in frontend projects

A good directory design architecture is half the battle---how to constrain directory and file names in a project

The naming conventions in programming are:

• camelCase (CamelCase)
• PascalCase (Pascal notation, aka Big CamelCase)
• snake_case (underscore notation)
• kebab-case (underscore notation)
• Hungarian notation (Hungarian notation - a very systematic and ancient naming convention)

background

After joining the job, I received a new module requirement, and the author can freely create code file directories and files. I looked back at the code before going online, and my God, I will capitalize for a while, lowercase for a while, and hump for a while. I didn’t seem to be so casual before.
Why didn't I scribble it before? The answer is that there is CI and CD pipeline card control, and the code that does not meet the specifications cannot enter the master.

question

The lack of constraints on the file directory and file naming of the code can lead to the wild growth of the code. Some people say: a good directory design architecture is half the battle.

Program

Match file paths through regular expressions. Here comes the problem: I can neither regularize nor get the file path. Looking for tools, so I found ls-lint. https://ls-lint.org/

ls-lint: ls-lint is an extremely fast file and directory name linter which provides a simple and fast way to bring some structure to your project directories

Taking the front end as an example, the usage method is as follows:

add dependencies

 npm install @ls-lint/ls-lint # local

Add configuration file

.ls-lint.yml

 ls:
  src:
    .js: kebab-case
    .ts: kebab-case
    .d.ts: kebab-case
    .vue: kebab-case

ignore:
  - .git
  - node_modules

The configuration of ls-lint is very flexible, and rules can be set according to suffix names and subdirectories. Rules include: lowercase, camelcase, pascalcase, snakecase, screamingsnakecase, regex

Excuting an order

 npx @ls-lint/ls-lint

execution time

1. The pre-commit stage of Git Hook allows developers to perceive and modify in time

2. Trigger the command at a certain stage before the pipeline goes online, to avoid the developer's local use of --no-verify to bypass, double insurance.

   other

   On the surface, various lints such as eslint, stylelint, and commitlint will make some students feel uncomfortable to use, but from a long-term perspective, code specification is very necessary.
   Whether eslint-plugin-filename and eslint-plugin-folders can solve the above problems remains to be investigated.