告别命名困难!用这个skill轻松搞定命名

trae技巧便利店

开发时你是不是经常遇到这些问题:

• 想给变量起名,憋了10分钟

• 不知道用驼峰还是下划线

• 英文单词拼写错误

• 团队命名风格不统一

我写了一个专门解决命名问题的小技能:Naming Master

使用方法很简单,直接说:

“命名:用户列表组件”

“命名:判断是否登录的变量”

“帮我起个函数名:异步获取用户数据”

技能会自动根据场景推荐最佳命名:

输入:用户列表

输出:

userList(驼峰)

UserList(帕斯卡)

user_list(下划线)

输入:判断是否登录

输出:

isLoggedIn

hasLogin

isLogin

内置常用词汇对照表:

用户→user,列表→list,详情→detail

获取→get,创建→create,删除→delete

还有命名禁忌要避免:

:cross_mark: 拼音+英文混合

:cross_mark: data、temp、obj这种笼统命名

:cross_mark: 数字开头

效果对比:

之前:纠结10分钟,憋出user.vue

之后:说一句话,直接拿到UserList.vue

这个技能只聚焦一点:不贪多,精准解决命名问题。

不知道咋个发zip包 我直接把skill复制出来吧


name: naming-master

description: 项目命名规范助手。当用户提到命名、起名、取名、变量名、文件名、函数名、组件名、composable 命名、API 命名、变量命名、English name 等时触发此技能。提供中英文命名建议、驼峰/帕斯卡/下划线转换、代码命名规范检查等功能。

compatibility:

  • Vue

  • React

  • TypeScript

  • JavaScript

-–

# Naming Master

项目命名规范助手,帮助开发者快速生成符合规范的命名。

## 核心功能

### 1. 英文命名转换

将中文转换为符合规范的英文命名:

| 中文 | 驼峰式 | 帕斯卡式 | 下划线 | 连字符 |

|------|--------|----------|--------|--------|

| 用户列表 | userList | UserList | user_list | user-list |

| 用户详情 | userDetail | UserDetail | user_detail | user-detail |

| 获取用户 | getUser | GetUser | get_user | get-user |

### 2. 场景化命名

根据代码场景推荐最佳命名:

#### 文件命名

```

# Vue 组件

UserList.vue # 帕斯卡式

user-list.vue # 连字符式(推荐)

# Composables

useUser.ts # use 前缀

useUserList.ts

useFetchData.ts

# 工具函数

utils/

formatDate.ts # 工具类

validateEmail.ts # 验证函数

apiClient.ts # API 客户端

```

#### 变量命名

```typescript

// :white_check_mark: 好的命名

const userList = ref([])

const isLoading = ref(false)

const fetchUserData = async () => {}

const userName = computed(() => …)

const hasPermission = computed(() => …)

// :cross_mark: 避免的命名

const list = [] # 过于笼统

const data = {} # 不知道是什么数据

const flag = true # 语义不明

const arr = [] # 无意义

const temp = {} # 临时变量

```

#### 函数命名

```typescript

// :white_check_mark: 动词 + 名词

function fetchUserList() {}

function validateForm() {}

function formatDate() {}

function calculateTotal() {}

function handleSubmit() {}

// :white_check_mark: 布尔值函数以 is/has/can/should 开头

function isValid() {}

function hasPermission() {}

function canEdit() {}

function shouldUpdate() {}

```

#### 常量命名

```typescript

// :white_check_mark: 全大写下划线

const MAX_UPLOAD_SIZE = 10 * 1024 * 1024

const API_BASE_URL = ‘https://api.example.com

const HTTP_STATUS_OK = 200

const USER_ROLE_ADMIN = ‘admin’

```

### 3. 命名规范检查

检测代码中的命名问题:

```typescript

// 检测问题

const a = ‘user’ // 过于简短

const tempData = {} // temp 命名

const fn = () => {} // 缩写不清晰

const user_list = [] # 应使用驼峰

// 自动修复建议

const userList = [] // 改为驼峰

const userData = {} # 使用有意义的名称

const fetchUser = () => {} # 展开缩写

const userList = [] # 改为驼峰

```

### 4. API 命名规范

```typescript

// RESTful API 命名

GET /api/users # 获取用户列表

GET /api/users/:id # 获取单个用户

POST /api/users # 创建用户

PUT /api/users/:id # 更新用户

DELETE /api/users/:id # 删除用户

// 接口函数命名

async function getUserList() {}

async function getUserById(id) {}

async function createUser(data) {}

async function updateUser(id, data) {}

async function deleteUser(id) {}

```

### 5. 数据库命名

```sql

-- 表名:复数、下划线

CREATE TABLE users (

id INT PRIMARY KEY,

user_name VARCHAR(50),

email VARCHAR(100),

created_at TIMESTAMP

);

-- 字段命名

user_name – 用户名(不是 userName)

is_active – 是否激活(布尔值)

created_at – 创建时间

updated_at – 更新时间

```

-–

## 使用方式

### 输入格式

当你需要命名时,可以这样询问:

```

命名:用户列表页面

场景:Vue 组件文件

命名:判断是否登录

场景:布尔值变量

命名:获取用户数据

场景:async 函数

```

### 输出格式

技能会返回:

1. **推荐命名** - 符合规范的多个选项

2. **命名说明** - 为什么推荐这个命名

3. **使用示例** - 在代码中的实际用法

4. **相关命名** - 同类别的其他推荐

-–

## 命名速查表

### 常用词汇对照

| 中文 | 英文 | 缩写 |

|------|------|------|

| 用户 | user | - |

| 列表 | list | - |

| 详情 | detail | - |

| 添加 | add | - |

| 编辑 | edit | - |

| 删除 | delete | del |

| 查询 | query | - |

| 获取 | get | - |

| 创建 | create | - |

| 更新 | update | upd |

| 提交 | submit | - |

| 取消 | cancel | - |

| 确认 | confirm | - |

| 加载 | loading | - |

| 刷新 | refresh | - |

| 重置 | reset | - |

| 搜索 | search | - |

| 排序 | sort | - |

| 筛选 | filter | - |

| 分页 | pagination | - |

| 总计 | total | - |

| 数量 | count | - |

| 状态 | status | - |

| 类型 | type | - |

| 备注 | remark | - |

| 配置 | config | - |

| 权限 | permission | - |

| 角色 | role | - |

### 命名禁忌

1. :cross_mark: 拼音 + 英文 混合

2. :cross_mark: 数字开头

3. :cross_mark: 特殊字符(除 `_` `-` 外)

4. :cross_mark: 关键字(如 class、function)

5. :cross_mark: 过于简短(少于 2 个字符)

6. :cross_mark: 中英文混合

-–

## 示例输出

### 示例 1:组件命名

**输入:**

```

命名:用户管理页面

场景:Vue 组件

```

**输出:**

```

推荐命名:

- UserManage.vue # 帕斯卡式(推荐)

- user-manage.vue # 连字符式

使用示例:

import UserManage from ‘./views/UserManage.vue’

```

### 示例 2:变量命名

**输入:**

```

命名:存放用户数组

场景:ref 变量

```

**输出:**

```

推荐命名:

- userList # 驼峰式(推荐)

- users # 复数形式

使用示例:

const userList = ref<User[]>([])

const users = ref<User[]>([])

注意:

- 数组使用复数形式

- 避免使用 data、list 等笼统命名

```

### 示例 3:函数命名

**输入:**

```

命名:异步获取用户列表数据

场景:async 函数

```

**输出:**

```

推荐命名:

- fetchUserList # 驼峰式(推荐)

- loadUserList

- getUserListData

使用示例:

async function fetchUserList() {

const res = await api.get(‘/users’)

return res.data

}

命名规范:

- 以动词开头(fetch/load/get)

- 动词 + 名词结构

- 驼峰式命名

```

1 个赞

新奇玩意,还有这东西呢

很不错的skills

看起来不错

哦吼,很适合我这语文不太好的选手

很赞!!!