【前端命名规范】【团队协作/代码维护】从【变量/函数/组件/文件命名逻辑】到【落地实操】彻底搞懂前端命名的最佳写法避开命名混乱、维护困难高频坑 文章目录一、为什么要重视命名二、命名风格速查表先记住再往下看三、变量命名3.1 基本原则3.2 推荐写法3.3 布尔变量用 is / has / can 前缀3.4 数组用复数或 List 后缀3.5 常量全大写下划线3.6 常见踩坑四、函数命名4.1 基本原则4.2 常见动词约定4.3 推荐写法4.4 事件处理函数4.5 返回布尔值的函数五、Vue 组件命名5.1 单文件组件PascalCase5.2 组件名 文件名5.3 多词组件名5.4 基础组件 vs 业务组件5.5 使用组件时的写法六、文件与目录命名6.1 文件命名风格6.2 常见目录结构6.3 composablesuse 前缀6.4 常见踩坑七、综合示例一个用户列表页八、小结一张表记全九、落地建议同学们好我是 Eugene尤金一名多年中后台前端开发工程师。Eugene 发音 /juːˈdʒiːn/大家怎么顺口怎么叫就好很多前端开发者都会遇到一个瓶颈代码能跑但不够规范功能能实现但维护起来特别痛苦一个人写没问题一到团队协作就各种混乱、踩坑、返工。想写出干净、优雅、可维护的专业代码靠的不是天赋而是体系化的规范 真实实战经验。这一系列《前端规范实战》我会用大白话 真实业务场景不讲玄学、不堆理论只分享能直接落地的规范、标准与避坑指南。帮你从「会写代码」真正升级为「会写优质、可维护、团队级别的代码」。一、为什么要重视命名命名是代码里最频繁出现的「文档」。好的命名能让人一眼看懂用途差的命名会让人反复猜测、浪费时间甚至埋坑。常见问题变量名a、temp、data1看不出含义函数名doSomething、handle太泛不知道具体做什么组件名MyComponent、Test难以区分业务含义文件名util.js、helper.js难以定位功能本文围绕「变量 / 函数 / 组件 / 文件」四类命名给出统一标准和实战用法帮你形成可复用的命名习惯。二、命名风格速查表先记住再往下看类型风格示例适用场景普通变量、函数camelCase小驼峰userName,getUserInfoJS 变量、函数、对象属性常量UPPER_SNAKE_CASE全大写下划线MAX_COUNT,API_BASE_URL不会变的配置、枚举值类、构造函数、组件PascalCase大驼峰UserService,UserCard.vue类、Vue 组件、类型私有变量约定下划线前缀_privateData表示「内部用别乱改」布尔值is/has/can 前缀isLoading,hasPermission表示真假状态三、变量命名3.1 基本原则用名词或「形容词 名词」能表达「存的是什么」避免无意义缩写⬆ 返回目录3.2 推荐写法// ✅ 好一眼能看出存的是什么constuserName张三constorderList[]constisLoadingfalseconstmaxRetryCount3// ❌ 差含义模糊consta张三// 不知道 a 是什么consttemp[]// 临时什么constflagfalse// 什么标志constn3// 数量编号⬆ 返回目录3.3 布尔变量用 is / has / can 前缀// ✅ 好读起来像自然语言constisLoadingtrueconsthasPermissionfalseconstcanEdittrueconstisVisiblefalse// ❌ 差需要猜含义constloadingtrue// 还行但不如 isLoading 清晰constpermissionfalse// 是「有权限」还是「权限对象」⬆ 返回目录3.4 数组用复数或 List 后缀// ✅ 好constusers[]constorderList[]constmenuItems[]// ❌ 差constuser[]// 容易误以为是单个对象constorder[]// 同上⬆ 返回目录3.5 常量全大写下划线// ✅ 好一眼看出是常量constMAX_PAGE_SIZE20constAPI_BASE_URLhttps://api.example.comconstDEFAULT_AVATAR/images/default-avatar.png// ❌ 差看起来像普通变量constmaxPageSize20constapiBaseUrlhttps://api.example.com⬆ 返回目录3.6 常见踩坑坑说明建议过度缩写usr、usrNm、ordLst除非是约定俗成如id、url否则写全单字母变量i、j在循环里可以其他地方慎用尽量用有含义的名字拼音混英文yonghuList、dingdanData统一用英文团队约定优先⬆ 返回目录四、函数命名4.1 基本原则用动词或「动词 名词」能表达「做什么」事件处理函数可用handle/on前缀⬆ 返回目录4.2 常见动词约定动词含义示例get获取数据同步getUserByIdfetch异步获取fetchOrderListset设置setUserNameupdate更新updateOrderStatusdelete / remove删除deleteUsercreate / add新增createOrdercheck / validate校验validateFormformat格式化formatDateparse解析parseJSONhandle / on事件处理handleSubmit⬆ 返回目录4.3 推荐写法// ✅ 好动词 名词语义清晰functiongetUserById(id){/* ... */}functionfetchOrderList(params){/* ... */}functionvalidateEmail(email){/* ... */}functionformatPrice(price){/* ... */}// ❌ 差太泛或太模糊functiondoSomething(){/* ... */}// 做什么functionhandle(){/* ... */}// 处理什么functionprocess(data){/* ... */}// 处理成什么样⬆ 返回目录4.4 事件处理函数// ✅ 好handle 事件/动作functionhandleSubmit(){/* 提交表单 */}functionhandleClick(){/* 点击 */}functionhandleInputChange(e){/* 输入变化 */}// Vue 中常见写法consthandleUserDelete(id){/* ... */}constonSearch(){/* ... */}⬆ 返回目录4.5 返回布尔值的函数// ✅ 好用 is/has/can 开头functionisValidEmail(str){/* ... */}functionhasPermission(user,action){/* ... */}functioncanEdit(order){/* ... */}// ❌ 差functioncheck(str){/* ... */}// 检查什么返回什么⬆ 返回目录五、Vue 组件命名5.1 单文件组件PascalCaseVue 官方推荐组件名用 PascalCase文件名与组件名一致。✅ 推荐 UserCard.vue OrderList.vue ProductDetail.vue ❌ 不推荐 userCard.vue // 小驼峰 user-card.vue // 和组件名不一致时容易乱⬆ 返回目录5.2 组件名 文件名!-- UserCard.vue --templatedivclassuser-card!-- ... --/div/templatescriptsetup// 组件名默认从文件名推导保持 UserCard 即可/script⬆ 返回目录5.3 多词组件名避免与 HTML 标签冲突也方便区分业务含义!-- ✅ 好多词、有业务含义 -- UserProfileCard.vue OrderStatusBadge.vue ProductImageGallery.vue !-- ❌ 差单词易冲突 -- User.vue Card.vue Header.vue⬆ 返回目录5.4 基础组件 vs 业务组件components/ ├── base/ # 基础组件加 Base 前缀 │ ├── BaseButton.vue │ ├── BaseInput.vue │ └── BaseModal.vue ├── business/ # 业务组件 │ ├── UserCard.vue │ ├── OrderList.vue │ └── ProductDetail.vue⬆ 返回目录5.5 使用组件时的写法template!-- ✅ 推荐PascalCase和文件名一致 --UserCard:useruser/OrderList:ordersorders/!-- 也可以写 kebab-caseVue 会自动映射 --user-card:useruser//template⬆ 返回目录六、文件与目录命名6.1 文件命名风格类型风格示例Vue 组件PascalCaseUserCard.vueJS/TS 工具、模块camelCaseformatDate.js样式文件与组件同名UserCard.scss常量、配置camelCase 或 kebab-caseconstants.js⬆ 返回目录6.2 常见目录结构src/ ├── components/ # 通用组件 │ ├── base/ │ └── business/ ├── views/ # 页面级组件PascalCase │ ├── UserList.vue │ ├── OrderDetail.vue │ └── ProductManage.vue ├── composables/ # 组合式函数use 前缀 │ ├── useUser.js │ └── useOrder.js ├── utils/ # 工具函数 │ ├── format.js │ └── validate.js ├── api/ # 接口封装 │ ├── user.js │ └── order.js ├── constants/ # 常量 │ └── index.js └── stores/ # 状态管理 └── user.js⬆ 返回目录6.3 composablesuse 前缀// useUser.jsexportfunctionuseUser(){constuserref(null)constfetchUserasync(){/* ... */}return{user,fetchUser}}// useOrder.jsexportfunctionuseOrder(){constordersref([])constloadOrdersasync(){/* ... */}return{orders,loadOrders}}⬆ 返回目录6.4 常见踩坑坑说明建议组件名和文件名不一致UserCard.vue里写name: User保持一致单词组件名Card.vue、List.vue用多词如UserCard混用命名风格有的 PascalCase有的 kebab-case团队统一约定⬆ 返回目录七、综合示例一个用户列表页把变量、函数、组件、文件命名串起来看!-- views/UserList.vue --templatedivclassuser-list-pageBaseSearchv-modelsearchKeywordplaceholder搜索用户名searchhandleSearch/UserTablev-if!isLoading:usersuserListdeletehandleUserDelete/BaseLoadingv-else//div/templatescriptsetupimport{ref,onMounted}fromvueimport{fetchUserList,deleteUser}from/api/userimportBaseSearchfrom/components/base/BaseSearch.vueimportUserTablefrom/components/business/UserTable.vueimportBaseLoadingfrom/components/base/BaseLoading.vue// 变量名词布尔用 is 前缀数组用 ListconstsearchKeywordref()constuserListref([])constisLoadingref(false)// 函数动词 名词事件用 handle 前缀constloadUserListasync(){isLoading.valuetruetry{constresawaitfetchUserList({keyword:searchKeyword.value})userList.valueres.data}finally{isLoading.valuefalse}}consthandleSearch(){loadUserList()}consthandleUserDeleteasync(userId){awaitdeleteUser(userId)loadUserList()}onMounted(loadUserList)/script// api/user.jsconstAPI_BASE_URLhttps://api.example.comexportasyncfunctionfetchUserList(params){constresawaitfetch(${API_BASE_URL}/users?${newURLSearchParams(params)})returnres.json()}exportasyncfunctiondeleteUser(id){constresawaitfetch(${API_BASE_URL}/users/${id},{method:DELETE})returnres.json()}⬆ 返回目录八、小结一张表记全类型风格示例变量camelCaseuserName,orderList布尔变量is/has/canisLoading,hasPermission常量UPPER_SNAKE_CASEMAX_COUNT,API_BASE_URL函数动词 名词getUserById,handleSubmit事件处理handle/onhandleClick,onSearch组件PascalCase多词UserCard.vue,OrderList.vuecomposablesuse 前缀useUser.js,useOrder.js基础组件Base 前缀BaseButton.vue⬆ 返回目录九、落地建议团队先定一份命名规范文档贴在项目 README 或 Wiki。用 ESLint 的camelcase、vue/component-name-in-template-casing等规则做约束。Code Review 时重点看命名是否清晰、是否符合约定。新项目从第一天就按规范来比后期重构成本低很多。命名规范不是死规矩而是「可读性」和「一致性」的体现。先掌握这些约定再结合团队习惯微调就能写出更易维护的前端代码。⬆ 返回目录技术成长从来不是比谁写得快而是比谁写得稳、规范、可维护。哪怕每次只吃透一条规范长期下来差距会非常明显。后续我会持续更新前端规范、工程化、可维护代码相关实战干货帮你告别面条代码、维护噩梦在开发与面试中更有底气。觉得有用欢迎点赞 收藏 关注不错过每一篇实战内容。我是 Eugene与你一起写规范、写优质代码我们下篇干货见
前端命名规范：变量 / 函数 / 组件 / 文件 统一标准，告别混乱命名｜项目规范篇
【前端命名规范】【团队协作/代码维护】从【变量/函数/组件/文件命名逻辑】到【落地实操】彻底搞懂前端命名的最佳写法避开命名混乱、维护困难高频坑 文章目录一、为什么要重视命名二、命名风格速查表先记住再往下看三、变量命名3.1 基本原则3.2 推荐写法3.3 布尔变量用 is / has / can 前缀3.4 数组用复数或 List 后缀3.5 常量全大写下划线3.6 常见踩坑四、函数命名4.1 基本原则4.2 常见动词约定4.3 推荐写法4.4 事件处理函数4.5 返回布尔值的函数五、Vue 组件命名5.1 单文件组件PascalCase5.2 组件名 文件名5.3 多词组件名5.4 基础组件 vs 业务组件5.5 使用组件时的写法六、文件与目录命名6.1 文件命名风格6.2 常见目录结构6.3 composablesuse 前缀6.4 常见踩坑七、综合示例一个用户列表页八、小结一张表记全九、落地建议同学们好我是 Eugene尤金一名多年中后台前端开发工程师。Eugene 发音 /juːˈdʒiːn/大家怎么顺口怎么叫就好很多前端开发者都会遇到一个瓶颈代码能跑但不够规范功能能实现但维护起来特别痛苦一个人写没问题一到团队协作就各种混乱、踩坑、返工。想写出干净、优雅、可维护的专业代码靠的不是天赋而是体系化的规范 真实实战经验。这一系列《前端规范实战》我会用大白话 真实业务场景不讲玄学、不堆理论只分享能直接落地的规范、标准与避坑指南。帮你从「会写代码」真正升级为「会写优质、可维护、团队级别的代码」。一、为什么要重视命名命名是代码里最频繁出现的「文档」。好的命名能让人一眼看懂用途差的命名会让人反复猜测、浪费时间甚至埋坑。常见问题变量名a、temp、data1看不出含义函数名doSomething、handle太泛不知道具体做什么组件名MyComponent、Test难以区分业务含义文件名util.js、helper.js难以定位功能本文围绕「变量 / 函数 / 组件 / 文件」四类命名给出统一标准和实战用法帮你形成可复用的命名习惯。二、命名风格速查表先记住再往下看类型风格示例适用场景普通变量、函数camelCase小驼峰userName,getUserInfoJS 变量、函数、对象属性常量UPPER_SNAKE_CASE全大写下划线MAX_COUNT,API_BASE_URL不会变的配置、枚举值类、构造函数、组件PascalCase大驼峰UserService,UserCard.vue类、Vue 组件、类型私有变量约定下划线前缀_privateData表示「内部用别乱改」布尔值is/has/can 前缀isLoading,hasPermission表示真假状态三、变量命名3.1 基本原则用名词或「形容词 名词」能表达「存的是什么」避免无意义缩写⬆ 返回目录3.2 推荐写法// ✅ 好一眼能看出存的是什么constuserName张三constorderList[]constisLoadingfalseconstmaxRetryCount3// ❌ 差含义模糊consta张三// 不知道 a 是什么consttemp[]// 临时什么constflagfalse// 什么标志constn3// 数量编号⬆ 返回目录3.3 布尔变量用 is / has / can 前缀// ✅ 好读起来像自然语言constisLoadingtrueconsthasPermissionfalseconstcanEdittrueconstisVisiblefalse// ❌ 差需要猜含义constloadingtrue// 还行但不如 isLoading 清晰constpermissionfalse// 是「有权限」还是「权限对象」⬆ 返回目录3.4 数组用复数或 List 后缀// ✅ 好constusers[]constorderList[]constmenuItems[]// ❌ 差constuser[]// 容易误以为是单个对象constorder[]// 同上⬆ 返回目录3.5 常量全大写下划线// ✅ 好一眼看出是常量constMAX_PAGE_SIZE20constAPI_BASE_URLhttps://api.example.comconstDEFAULT_AVATAR/images/default-avatar.png// ❌ 差看起来像普通变量constmaxPageSize20constapiBaseUrlhttps://api.example.com⬆ 返回目录3.6 常见踩坑坑说明建议过度缩写usr、usrNm、ordLst除非是约定俗成如id、url否则写全单字母变量i、j在循环里可以其他地方慎用尽量用有含义的名字拼音混英文yonghuList、dingdanData统一用英文团队约定优先⬆ 返回目录四、函数命名4.1 基本原则用动词或「动词 名词」能表达「做什么」事件处理函数可用handle/on前缀⬆ 返回目录4.2 常见动词约定动词含义示例get获取数据同步getUserByIdfetch异步获取fetchOrderListset设置setUserNameupdate更新updateOrderStatusdelete / remove删除deleteUsercreate / add新增createOrdercheck / validate校验validateFormformat格式化formatDateparse解析parseJSONhandle / on事件处理handleSubmit⬆ 返回目录4.3 推荐写法// ✅ 好动词 名词语义清晰functiongetUserById(id){/* ... */}functionfetchOrderList(params){/* ... */}functionvalidateEmail(email){/* ... */}functionformatPrice(price){/* ... */}// ❌ 差太泛或太模糊functiondoSomething(){/* ... */}// 做什么functionhandle(){/* ... */}// 处理什么functionprocess(data){/* ... */}// 处理成什么样⬆ 返回目录4.4 事件处理函数// ✅ 好handle 事件/动作functionhandleSubmit(){/* 提交表单 */}functionhandleClick(){/* 点击 */}functionhandleInputChange(e){/* 输入变化 */}// Vue 中常见写法consthandleUserDelete(id){/* ... */}constonSearch(){/* ... */}⬆ 返回目录4.5 返回布尔值的函数// ✅ 好用 is/has/can 开头functionisValidEmail(str){/* ... */}functionhasPermission(user,action){/* ... */}functioncanEdit(order){/* ... */}// ❌ 差functioncheck(str){/* ... */}// 检查什么返回什么⬆ 返回目录五、Vue 组件命名5.1 单文件组件PascalCaseVue 官方推荐组件名用 PascalCase文件名与组件名一致。✅ 推荐 UserCard.vue OrderList.vue ProductDetail.vue ❌ 不推荐 userCard.vue // 小驼峰 user-card.vue // 和组件名不一致时容易乱⬆ 返回目录5.2 组件名 文件名!-- UserCard.vue --templatedivclassuser-card!-- ... --/div/templatescriptsetup// 组件名默认从文件名推导保持 UserCard 即可/script⬆ 返回目录5.3 多词组件名避免与 HTML 标签冲突也方便区分业务含义!-- ✅ 好多词、有业务含义 -- UserProfileCard.vue OrderStatusBadge.vue ProductImageGallery.vue !-- ❌ 差单词易冲突 -- User.vue Card.vue Header.vue⬆ 返回目录5.4 基础组件 vs 业务组件components/ ├── base/ # 基础组件加 Base 前缀 │ ├── BaseButton.vue │ ├── BaseInput.vue │ └── BaseModal.vue ├── business/ # 业务组件 │ ├── UserCard.vue │ ├── OrderList.vue │ └── ProductDetail.vue⬆ 返回目录5.5 使用组件时的写法template!-- ✅ 推荐PascalCase和文件名一致 --UserCard:useruser/OrderList:ordersorders/!-- 也可以写 kebab-caseVue 会自动映射 --user-card:useruser//template⬆ 返回目录六、文件与目录命名6.1 文件命名风格类型风格示例Vue 组件PascalCaseUserCard.vueJS/TS 工具、模块camelCaseformatDate.js样式文件与组件同名UserCard.scss常量、配置camelCase 或 kebab-caseconstants.js⬆ 返回目录6.2 常见目录结构src/ ├── components/ # 通用组件 │ ├── base/ │ └── business/ ├── views/ # 页面级组件PascalCase │ ├── UserList.vue │ ├── OrderDetail.vue │ └── ProductManage.vue ├── composables/ # 组合式函数use 前缀 │ ├── useUser.js │ └── useOrder.js ├── utils/ # 工具函数 │ ├── format.js │ └── validate.js ├── api/ # 接口封装 │ ├── user.js │ └── order.js ├── constants/ # 常量 │ └── index.js └── stores/ # 状态管理 └── user.js⬆ 返回目录6.3 composablesuse 前缀// useUser.jsexportfunctionuseUser(){constuserref(null)constfetchUserasync(){/* ... */}return{user,fetchUser}}// useOrder.jsexportfunctionuseOrder(){constordersref([])constloadOrdersasync(){/* ... */}return{orders,loadOrders}}⬆ 返回目录6.4 常见踩坑坑说明建议组件名和文件名不一致UserCard.vue里写name: User保持一致单词组件名Card.vue、List.vue用多词如UserCard混用命名风格有的 PascalCase有的 kebab-case团队统一约定⬆ 返回目录七、综合示例一个用户列表页把变量、函数、组件、文件命名串起来看!-- views/UserList.vue --templatedivclassuser-list-pageBaseSearchv-modelsearchKeywordplaceholder搜索用户名searchhandleSearch/UserTablev-if!isLoading:usersuserListdeletehandleUserDelete/BaseLoadingv-else//div/templatescriptsetupimport{ref,onMounted}fromvueimport{fetchUserList,deleteUser}from/api/userimportBaseSearchfrom/components/base/BaseSearch.vueimportUserTablefrom/components/business/UserTable.vueimportBaseLoadingfrom/components/base/BaseLoading.vue// 变量名词布尔用 is 前缀数组用 ListconstsearchKeywordref()constuserListref([])constisLoadingref(false)// 函数动词 名词事件用 handle 前缀constloadUserListasync(){isLoading.valuetruetry{constresawaitfetchUserList({keyword:searchKeyword.value})userList.valueres.data}finally{isLoading.valuefalse}}consthandleSearch(){loadUserList()}consthandleUserDeleteasync(userId){awaitdeleteUser(userId)loadUserList()}onMounted(loadUserList)/script// api/user.jsconstAPI_BASE_URLhttps://api.example.comexportasyncfunctionfetchUserList(params){constresawaitfetch(${API_BASE_URL}/users?${newURLSearchParams(params)})returnres.json()}exportasyncfunctiondeleteUser(id){constresawaitfetch(${API_BASE_URL}/users/${id},{method:DELETE})returnres.json()}⬆ 返回目录八、小结一张表记全类型风格示例变量camelCaseuserName,orderList布尔变量is/has/canisLoading,hasPermission常量UPPER_SNAKE_CASEMAX_COUNT,API_BASE_URL函数动词 名词getUserById,handleSubmit事件处理handle/onhandleClick,onSearch组件PascalCase多词UserCard.vue,OrderList.vuecomposablesuse 前缀useUser.js,useOrder.js基础组件Base 前缀BaseButton.vue⬆ 返回目录九、落地建议团队先定一份命名规范文档贴在项目 README 或 Wiki。用 ESLint 的camelcase、vue/component-name-in-template-casing等规则做约束。Code Review 时重点看命名是否清晰、是否符合约定。新项目从第一天就按规范来比后期重构成本低很多。命名规范不是死规矩而是「可读性」和「一致性」的体现。先掌握这些约定再结合团队习惯微调就能写出更易维护的前端代码。⬆ 返回目录技术成长从来不是比谁写得快而是比谁写得稳、规范、可维护。哪怕每次只吃透一条规范长期下来差距会非常明显。后续我会持续更新前端规范、工程化、可维护代码相关实战干货帮你告别面条代码、维护噩梦在开发与面试中更有底气。觉得有用欢迎点赞 收藏 关注不错过每一篇实战内容。我是 Eugene与你一起写规范、写优质代码我们下篇干货见
