约束项目中的目录和文件名

404 阅读2分钟

好的目录设计架构就成功了一半 --- 如何约束项目中的目录和文件名 编程中命名规范有:

  • camelCase (驼峰命名法)
  • PascalCase (帕斯卡命名法,又名大驼峰命名法)
  • snake_case (下划线命名法)
  • kebab-case (中划线命名法)
  • Hungarian notation(匈牙利命名法 - 一个十分系统又古老的命名规范)

背景

入职后接了个新的模块需求,笔者可以自由地创建代码文件目录和文件。上线前回看了下代码,我滴老天爷一会儿大写,一会小写,一会驼峰,之前我好像没这么随便。 为啥之前我没乱写呢?答案是有 CI、CD流水线卡控,不符合规范的代码无法进 master。

问题

代码的文件目录和文件命名缺少约束会导致代码野蛮生长。有人说:好的目录设计架构就成功了一半。

方案

通过正则匹配文件路径。问题来了:我既不会正则也不会获取文件路径。找找工具吧,于是我找到了 ls-lint。 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 是否可以解决上述问题待调研。