--- theme: smartblue ---

# 🐫PascalCase 文件命名的缺点

PascalCase - 大驼峰命名，过去一直是比较主流的文件命名风格，组件函数命名为PascalCase，为了保持统一往往将组件的文件也命名为PascalCase，同理，class类也会命名为PascalCase，这是一个很简单直白的逻辑 - 即任何模块名为大写开头的其文件名也大写开头。如果我们去Google搜索一下关键词 `react file name convention`，几乎清一色的采用PascalCase，如下链接 > > > > > > > 但是接下来我要讨论的是这种文件命名的问题 ## 🐫PascalCase, 🐪camel-case 混用导致不一致 > PascalCase 大驼峰， CamelCase小驼峰，🍡KebabCase 烤肉串这是一个很常见的示例，如头图一样 * 组件: Button.jsx * class类: UserModel.js * util方法函数: random.js * api接口函数: getUser.js * 一些配置文件: pnpm-lock.yaml 如上，我们从中看到了至少3种命名风格，Pascal + Camel + Kebab，这样会导致视觉一致性问题，在阅读时并不轻松，起名字时还要先想想模块是组件还是类还是方法函数。 ## git 文件大小写不明感问题如果你不小心将 `Button.jsx` 改成了 `button.jsx`，此时你的系统文件名和git库中的文件名就不一致了，应该很多同学遇到类似的困扰。当然也有不优雅的解决办法，配置git config设置忽略大小写为false ```sh git config core.ignorecase false ``` > 不优雅的原因：优雅的解决办法应该是 ```sh git mv button.jsx _button.jsx git mv _button.jsx Button.jsx ``` (我怎么写着写着跑题了？) 没关系，额外送点私货没关系😝。回归正题，出现文件大小写错误的根源是人的犯错，只要有大小写混用的情况就一定难以避免，所以如果我们统一规范文件名不能大写开头就能很大程度避免了。 # 大写锁定键坏了! 如果你的大写锁定键坏了，很显然，你想用Pascal命名都用不了，不仅如此，组件模块的名称也无法大写命名，`export function button...`，eslint会报错，react debug会报错 > 开个玩笑而已。。 # 热门开源项目是怎么命名的？ ## Nextjs ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5122d6fd6e584650adc6be500a77340b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=cYnSmxJCAKZwWpTM4yohasau2R4%3D) > nextjs源码中全部采用了Kebab烤肉串命名风格。 ## NextUI ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d62566f885564bd9b7d298c37044faf3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=PYiKboFv5vzqpNYrQ7jj6mssZJg%3D) > nextui同样全部采用了Kebab烤肉串命名风格。 ## Tailwindcss ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/22590f0ef8344086bc19a986041db836~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=oEgpem%2F1C2SMmUFKU83lYDpOqoc%3D) > 烤肉串 ## bulletproof-react ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8af36311b0d342e682a77740eb63dc2b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=G4dqLiRCJgJOCl3Qh8FV82DvxHE%3D) > 烤肉串 ## shadcn-ui ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6f4878136c524bf6b2e7e9fa78eb238a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=scqQkS7%2BCKFM9NwFrdXK7DhiFlI%3D) > 烤肉串 ## nestjs ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/75d95f0950d54a4baffae6f403c5eff1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=59CGyG1eKnNKJWpdFHRhuIFgSKo%3D) > 烤肉串 # 🍡Kebab烤肉串风格好在哪里上面的例子我不是故意挑kebab风格的项目来举例的，react vue依然采用的Pascal风格，或许对于老项目(建立较早)考虑到成本没有迁移到kebab的必要，但是新兴的项目可以看到是清一色的kebab。那么kebab的风格好在哪里呢？我从bulletproof-react中找到了答案 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/03172c98e7a1450196909b6955f61ef8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=Socw3AXN7Oongz0gxNrVUd4vAic%3D) **这可以帮助您保持代码库的一致性并更易于导航。** 确实，烤肉串的易读性更好，也更方便对文件的视觉索引，在vscode中cmd+p搜索文件能更有利于首字母模糊查找。 **便于在配置文件中匹配规则**。例如，在eslintrc中，我们经常需要配置`files`字段，来让匹配的文件lint，如果是烤肉串命名，我们能更轻松的匹配文件 `files: ['src/**/*-route.jsx']`。babelrc, jestconfig,tsconfig,viteconfig等等同样受益。 **与模块区分后方便symbol检索**。全局搜索Symbol时，能清晰的区分模块名和文件名 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/020e736ad7c74f75a9e0d783832c2a29~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqO6LCm:q75.awebp?rk3s=f64ab15b&x-expires=1758927231&x-signature=%2BbzQiNk8w8gI3vZj5mz5ciijesU%3D) # 制定规范 ## 文件名与模块名风格无关让模块名遵从js或ts语法或框架本身，让文件名与模块名无关 (注意是**风格无关**) `user-model.js` ```js class User { username = '' age = '' role = '' }; export function createAdminUser(username, age) { return new User(username, age, 'admin') }; ``` 上面示例中，有一个`User`类，导出了`createAdminUser`工厂方法。如果使用Pascal命名风格`UserModel.js`似乎不太合适，因为虽然内容是和`User`用户模型强相关但实际导出的模块却是工厂函数。使用烤肉串之后不再纠结，即使未来我们将`User`也导出，命名也符合规范。 `button-group.jsx` 同理 ```jsx export function useButtonGroup() { ... }; export function ButtonGroup() { ... }; ``` ## 文件名小写，单词以`-`隔开，允许中间名 components └── button-group ├── button-group.jsx ├── button-group.constants.js └── button-group.stories.js components └── button-group ├── button-group.jsx ├── hooks │ └── use-button-group.js ├── utils │ └── format-button-group.js └── stories └── ... .gitignore .prettier.config.js .prettierrc .prettierignore commit-lint.config.js .commitlintrc .eslintrc eslint.config.mjs pnpm-workspace.yaml docker-compose.yaml > 注意，不要照抄作业，以上示例只是表达风格规范，具体目录&组件的划分和语义范围请根据各自实际情况自由发挥。 **什么时候应该使用中间名？** 当一个文件包含多个功能时，使用中间名可以清晰地区分不同功能模块。例如： `user.service.js`：表示一个用户的服务模块。`user.route.js` 用户的路由模块。可以简单的理解为我们把一个庞大的 `user.js` 文件按模块的方式拆成了多个文件，和vue sfc类似，但并不要求一个文件只能导出一个模块。命名空间冲突：当引入多个库或组件时，中间名可以避免命名冲突。例如： jquery.min.js **什么时候不应该使用中间名？** 简单文件：对于非常简单的文件，包含单个函数或变量的文件，例如`sum.js`可以省略中间名。不一致的命名风格：项目中应保持一致的命名风格，并提前预设好常用的中间名，避免随意添加中间名。例如 `app.hualihushao.js`是不允许的。 ## 目录名同样小写，单词以`-`隔开，没有中间名 features/ └── xitu-juejin/ ## 允许草稿文件 `__draft.js` `__`两个下划线开头的文件表示为草稿文件，不被任何其他文件或模块引用，一般为临时文件或者作废的旧版文件，不参与编译。允许草稿文件自由命名。 __app.draft.js __app.v0.1.js __app-v0.1-deprecated.js __DEPRECATED_app.js ## 或参考Angular风格 (9.15补充) > 感谢评论区 [@CrimsonHu](https://juejin.cn/user/3518065749015528) 分享 Angular在风格偏好方面制定的非常规范，项目结构、文件命名、模块命名、commit提交等规范应有尽有，并且辐射到各个框架的偏好中，如果懒得自己制定规范的同学可以直接参考Angular风格。详见：示例截图

# 使用eslint强制校验文件名现在我们要求所有文件名都应是烤肉串之后，就能够定义eslint来校验文件名了，这样永久避免git文件名大小写错误。 ## 安装 `eslint-plugin-check-file` `pnpm add eslint-plugin-check-file -D` ## 配置 `eslint.config.mjs` ```js export default [ ..., // checkfile { plugins: { "check-file": checkFile, }, rules: { "check-file/filename-naming-convention": [ "error", { "**/!(__)*": "KEBAB_CASE" }, { ignoreMiddleExtensions: true }, ], "check-file/folder-naming-convention": [ "error", { "**/!(__tests__)": "KEBAB_CASE" }, ], }, }, ] ``` > 规则说明详见上述配置将所有文件名强制要求KEBAB\_CASE(“\_\_”开头的除外)，将目录名也强制KEBAB\_CASE("\_\_tests\_\_"除外)。**不要照抄作业，根据理解可以自己定义需要匹配校验的文件** # 答应我，从此以后 All in Kebab，好吗？

`pnpm add ts-node` `package-lock.json` `primary-button.jsx` `primary-button.test.jsx` `random.js` `get-one-user.js` `find-users.js` `data-model.js` `app.constants.js` `

` `.flex-box { display: flex; }` `global-style.css` `www.some-web.com/users/1-2/user-info`