乐趣区

关于代码规范:约束前端项目中的目录和文件名

jiezi

好的目录设计架构就胜利了一半 — 如何束缚我的项目中的目录和文件名

编程中命名标准有：

  • camelCase (驼峰命名法)
  • PascalCase (帕斯卡命名法，又名大驼峰命名法)
  • snake_case (下划线命名法)
  • kebab-case (中划线命名法)
  • Hungarian notation（匈牙利命名法 – 一个非常零碎又古老的命名标准）

背景

入职后接了个新的模块需要，笔者能够自在地创立代码文件目录和文件。上线前回看了下代码，我滴老天爷一会儿大写，一会小写，一会驼峰，之前我如同没这么轻易。
为啥之前我没乱写呢？答案是有 CI、CD 流水线卡控，不符合规范的代码无奈进 master。

问题

代码的文件目录和文件命名短少束缚会导致代码横蛮成长。有人说：好的目录设计架构就胜利了一半。

计划

通过正则匹配文件门路。问题来了：我既不会正则也不会获取文件门路。找找工具吧，于是我找到了 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

以前端为例，介绍下应用形式：

增加依赖 

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

增加配置文件

.ls-lint.yml

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

ignore:
  - .git
  - node_modules

ls-lint 的配置非常灵活，能够依照后缀名和子目录别离设置规定。规定包含：lowercase、camelcase、pascalcase、snakecase、screamingsnakecase、regex

执行命令 

npx @ls-lint/ls-lint

执行机会

  1. Git Hook 的 pre-commit 阶段能够让开发者及时感知、及时批改

  2. 流水线上线前某个阶段触发命令，防止开发者本地应用 –no-verify 绕过，双重保险。

    其余

    eslint、stylelint、commitlint 等各种 lint 外表上会让某些同学应用起来好受，然而从久远角度看代码标准是十分有必要的。
    eslint-plugin-filename 和 eslint-plugin-folders 是否能够解决上述问题待调研。

退出移动版