让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)

适用: Vue3 + TypeScript 项目,统一目录、文件、变量、函数、Hooks、工具类、组件命名规范,兼顾可读性、团队协作。

对象 命名格式
目录名 kebab-case
组件的目录名 PascalCase
组件文件名(注册名) PascalCase
hooks 文件名 kebab-case
tools 文件名 camelCase
Store 文件名 kebab-case
类型定义文件名 types/kebab-case.ts
单个组件类型定义文件名 PascalCase.types.ts
hooks 函数名 camelCase
Store 函数名 camelCase
Interface / Type PascalCase
函数和方法 camelCase
class PascalCase

以上是整合了多个高星开源项目,整理了各大 AI 的回答整理出来的大概命名规范,里边还有很多值得纠结的地方,现实中大家的项目一般都是各有各的规范。

乱吗? 说实话,这太乱了老铁,稍微不注意就用错了;

  • 那么目录名大小写乱用,有影响吗?没影响
  • 组件小写开头,影响导入、影响编译吗?不影响
  • 全局类型定义文件名使用 camelCase 有影响吗?也没有影响

过度区分命名格式会显著增加团队协作成本、增加出错概率。

vue 中,只要你能写对导入路径,那么代码就能正常运行,现代的编辑器,几乎都能在写导入路径时,给到开发者智能提示,何不将命名规范简化为:

对象 命名格式
目录名 camelCase
组件的目录名 camelCase
组件文件名(可选导入为 PascalCase camelCase
hooks 文件名 camelCase
tools 文件名 camelCase
Store 文件名 camelCase
类型定义文件名 types/camelCase.ts
单个组件类型定义文件名 camelCase.types.ts
hooks 函数名 camelCase
Store 函数名 camelCase
函数和方法 camelCase
Interface / Type PascalCase
class PascalCase

是不是简单多了,何必去纠结于命名,一套规则通杀,不用反复区分浪费生命;之所以大量使用 camelCase,主要还是为了兼容 hooks,和 函数、方法,这三样使用 camelCase 已经是共识了。

我使用这套简单粗暴版的规范已经有段时间了,没有出现过任何因为命名产生的问题,实际证明统一使用 camelCase 既不影响功能实现,又能显著降低心智负担,看着也非常舒服,特分享给大家。

另外,我知道 vue 官方文档写了组件名推荐 PascalCase 或者 kebab-case,那又咋了,不过是为了保持和 html 的标签一样的命名方式而已,而且 PascalCase 和 html 标签的命名方式也不一样,另外很多人会将 kebab-cased 的组件文件名,全局注册为 PascalCase 组件,搞得乱七八糟。

相关推荐
xy34531 分钟前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计
老王以为8 分钟前
走进 AI Agent 第四篇(上):知识获取管道——RAG 基础
前端·人工智能·全栈
夏天要喝冰可乐20 分钟前
一处写作,多平台分发:我给掘金做了一款开源 Chrome 插件
前端·chrome·vibecoding
老男孩游戏时光24 分钟前
Vue3 Composition API 最佳实践,别再乱写 setup 了
vue.js
+VX:Fegn089527 分钟前
计算机毕业设计|基于java+ vue共享单车信息系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
货拉拉技术31 分钟前
货拉拉开源Hadice:安卓 & 鸿蒙桌面调试工具
前端
程序猿DD1 小时前
OctaFuse Gateway 2.11.0:流式请求优化、用户折扣策略与错误契约升级
前端·后端
尾善爱看海1 小时前
《JavaScript 数组操作全攻略:12 类 API + 30 个实战场景 + 20 个避坑指南》
前端·javascript·面试
Bs_MoneyMagnet1 小时前
基于springboot+vue的非遗物质文化遗产系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·毕业设计·计算机毕业设计
计算机毕设定制辅导-无忧学长1 小时前
《基于SpringBoot的未成年人健康知识科普平台的设计与实现》
java·开发语言·vue.js·spring boot·未成年人健康知识科普平台