❌ Button.jsx - 不太科学的文件命名？

🐫Pascalcase 文件命名的缺点

Pascalcase - 大驼峰命名，过去一直是比较主流的文件命名风格，组件函数命名为Pascalcase，为了保持统一往往将组件的文件也命名为Pascalcase，同理，class类也会命名为Pascalcase，这是一个很简单直白的逻辑 - 即任何模块名为大写开头的其文件名也大写开头。

如果我们去Google搜索一下关键词 react file name convention，几乎清一色的采用Pascalcase，如下链接

www.joshwcomeau.com/react/file-…

dev.to/sathishskde…

rajithasanjayamal.medium.com/naming-conv…

dev.to/farazamirud…

但是接下来我要讨论的是这种文件命名的问题

🐫Pascalcase, 🐪Camelcase 混用导致不一致

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

不优雅的原因： stackoverflow.com/questions/5…

优雅的解决办法应该是

sh

代码解读

复制代码

git mv button.jsx _button.jsx git mv _button.jsx Button.jsx

(我怎么写着写着跑题了？) 没关系，额外送点私货没关系😝。回归正题，出现文件大小写错误的根源是人的犯错，只要有大小写混用的情况就一定难以避免，所以如果我们统一规范文件名不能大写开头就能很大程度避免了。

大写锁定键坏了!

如果你的大写锁定键坏了，很显然，你想用Pascal命名都用不了，不仅如此，组件模块的名称也无法大写命名，export function button...，eslint会报错，react debug会报错

开个玩笑而已。。

热门开源项目是怎么命名的？

Nextjs

github.com/vercel/next…

nextjs源码中 全部采用了Kebab烤肉串命名风格。

NextUI

github.com/nextui-org

nextui同样全部采用了Kebab烤肉串命名风格。

Tailwindcss

github.com/tailwindlab…

烤肉串

bulletproof-react

github.com/alan2207/bu…

烤肉串

shadcn-ui

github.com/shadcn-ui/u…

烤肉串

nestjs

github.com/nestjs/nest…

烤肉串

🍡Kebab烤肉串风格好在哪里

上面的例子我不是故意挑kebab风格的项目来举例的，react vue依然采用的Pascal风格，或许对于老项目(建立较早)考虑到成本没有迁移到kebab的必要，但是新兴的项目可以看到是清一色的kebab。

那么kebab的风格好在哪里呢？我从bulletproof-react中找到了答案

这可以帮助您保持代码库的一致性并更易于导航。 确实，烤肉串的易读性更好，也更方便对文件的视觉索引，在vscode中cmd+p搜索文件能更有利于首字母模糊查找。

便于在配置文件中匹配规则。例如，在eslintrc中，我们经常需要配置files字段，来让匹配的文件lint，如果是烤肉串命名，我们能更轻松的匹配文件 files: ['src/**/*-route.jsx']。babelrc, jestconfig,tsconfig,viteconfig等等同样受益。

与模块区分后方便symbol检索。全局搜索Symbol时，能清晰的区分模块名和文件名

使用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" }, ], }, }, ]

规则说明详见 github.com/dukeluo/esl…

上述配置将所有文件名强制要求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

<div class="bg-red text-blue" />

.flex-box { display: flex; }

global-style.css

www.some-web.com/users/1-2/user-info

原文链接：https://juejin.cn/post/7413629661500784692