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

10次阅读

共计 1030 个字符,预计需要花费 3 分钟才能阅读完成。

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

编程中命名标准有:

  • 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 是否能够解决上述问题待调研。

正文完
 0