组件命名规范要不要加类型前缀容易混乱吗？

雅茹 Dev 提问于 2026-02-15 09:51:34 阅读 15

前端

我们在团队协作时组件命名经常出现UserCard和CardUser混用的情况，虽然都表示用户信息卡片，但看起来很混乱。有人提议统一加UI-前缀区分基础组件，但感觉这样写起来很麻烦。

之前试过用文件夹结构代替命名规范，把公共组件放在/components/base目录，但最近发现业务组件也出现了ProductListContainer和ContainerProductList这种命名差异。

有没有更合理的组件命名规范方案？比如是否应该强制使用某种结构，或者通过linter来强制规范？

/* 目前讨论的规范草案 */
// 推荐写法
function UserAvatar() {}
function ProductGrid() {}

// 需要禁止的写法
function AvatarUser() {} // 类型前缀混乱
function GridProductContainer() {} // 过度使用Container后缀

我来解答赞 4 收藏

反馈

2 条解答

培培酱~ Lv1

最简单的办法是强制统一用PascalCase，并且类型在前，名词在后，比如UserCard、ProductList。搞个eslint规则限制命名格式，不符合的直接报错，省得大家纠结。

module.exports = {

  rules: {

    'component-naming': ['error', {

      format: ['PascalCase'],

      custom: {

        regex: '^(UI|Container)?[A-Z][a-zA-Z0-9]+$',

        match: true

      }

    }]

  }

};

别折腾文件夹结构了，写代码时看到名字就该知道它是啥，搞一堆目录反而麻烦。

2026-02-15 14:03

钰文🍀 Lv1

直接定个规则，组件名按「功能+类型」的顺序来，比如 UserAvatar 和 ProductGrid，别搞反了。用 ESLint 配合自定义规则强制命名格式，发现不符合的直接报错。文件夹结构可以辅助分类，但别依赖它解决命名问题，不然迟早乱成一锅粥。

// .eslintrc.js 中加一条自定义规则

module.exports = {

  rules: {

    'component-naming': ['error', { pattern: '^(?!.*Container$)[A-Z][a-zA-Z0-9]+$' }]

  }

};

别纠结前缀后缀，关键是团队统一，定了就严格执行，不然写代码的时候舒服了，后面维护的人会骂娘。

2026-02-15 10:13