企业级前端开发规范

技能文档

---
name: frontend-spec
title: 企业级前端开发规范
category: 开发工具
description: "提供完整、可落地、团队统一的前端开发规范，覆盖项目目录、命名、HTML、CSS/SCSS、JavaScript/TypeScript、Vue/React 编码、Git 提交、ESLint/Prettier、性能优化与安全共 12 大领域。当用户进行前端代码审查、制定团队规范、询问前端最佳实践，或要求检查代码风格问题时触发。触发词：前端规范、代码规范、命名规范、Vue 规范、React 规范、Git 提交规范。"
---

# 企业级前端开发规范

提供**完整、可落地、团队统一**的前端开发规范，适用于中后台、移动端、Web 应用。

## 技能工作流

### 步骤1：识别用户问题所属规范域

将用户问题或待审查代码映射到以下 12 个规范域之一（可多选）：

项目目录 / 命名 / HTML / CSS·SCSS / JavaScript / TypeScript / Vue / React / Git 提交 / ESLint·Prettier / 性能 / 安全

### 步骤2：引用对应规范条目

从下方「规范明细」中取出对应章节的条目，逐条对照用户代码或问题；涉及多域时按「目录 → 命名 → 编码 → 工程化 → 性能/安全」顺序输出。

### 步骤3：输出结论与修改建议

- 审查类问题：列出不符合规范的位置，给出修改前后的代码对比
- 咨询类问题：直接给出规范条目与推荐做法，附简短示例
- 制定团队规范：按 12 个领域输出完整清单，可按团队技术栈（Vue/React）裁剪

## 规范明细

### 1. 项目目录规范（通用）

```
src/
├── api/          # 接口请求
├── assets/       # 静态资源
├── components/   # 公共组件
├── composables/  # 组合式函数
├── constants/    # 常量
├── hooks/        # 业务 hooks
├── layouts/      # 布局
├── pages/        # 页面
├── router/       # 路由
├── store/        # 状态管理
├── styles/       # 全局样式
├── utils/        # 工具函数
└── App.vue / main.ts
```

### 2. 命名规范

**文件命名**
- 组件：大驼峰 `UserList.vue`
- 工具/页面：短横线 `user-info.ts`
- 样式：短横线 `index.scss`、`button.scss`

**变量/函数**
- 变量：小驼峰 `userList`
- 常量：全大写下划线 `MAX_COUNT`
- 布尔：is/has/should 开头 `isVisible`
- 函数：动词开头 `getUserInfo()`

### 3. HTML 规范

- 语义化标签：header/main/section/aside/footer
- 类名使用短横线：`class="user-card"`
- 禁止冗余标签、禁止行内样式
- 图片必须加 alt，懒加载使用 `loading="lazy"`

### 4. CSS / SCSS 规范

- 使用 BEM 或短横线命名
- 禁止嵌套超过 3 层
- 公共样式抽离到 variables/mixins
- z-index 统一管理
- 单位优先使用 rem / vh / %
- 颜色使用变量，禁止硬编码

### 5. JavaScript 规范

- 使用 const/let，禁止 var
- 优先使用箭头函数
- 异步优先 async/await
- 禁止嵌套过深（<3 层）
- 禁止魔法数字，抽为常量
- 数组优先使用 map/filter/reduce

### 6. TypeScript 规范

- 必须定义接口/类型
- 禁止 any，能用 unknown 替代
- 接口使用 I 前缀或后缀 Type
- 函数参数与返回值必须标注类型
- 类型复用优先使用 type / interface

### 7. Vue 规范

- 组件名多单词，避免与 HTML 重名
- props 必须定义类型、默认值、校验
- 指令缩写：`:` `@` `#`
- 计算属性避免副作用
- watch 慎用，优先 computed
- 方法命名遵循动词+名词

### 8. React 规范

- 组件使用函数式 + Hooks
- 状态扁平化，避免嵌套
- 禁止在循环/条件中使用 Hooks
- 事件处理函数以 handle 开头
- 样式使用 CSS Modules / styled-components

### 9. Git 提交规范

提交格式：`type(scope): content`

type 取值：

- `feat`: 新功能
- `fix`: 修复
- `docs`: 文档
- `style`: 格式
- `refactor`: 重构
- `perf`: 性能
- `test`: 测试
- `chore`: 构建/工具

### 10. ESLint + Prettier 规范

- 2 空格缩进
- 单引号
- 语句末尾分号
- 文件末尾空行
- 禁止未使用变量
- 禁止 console（生产环境）

### 11. 性能规范

- 图片压缩、WebP
- 懒加载图片、组件
- 路由懒加载
- 防抖节流处理高频事件
- 大数据列表使用虚拟滚动
- 减少冗余渲染

### 12. 安全规范

- 防止 XSS：过滤用户输入
- 防止 CSRF：token 校验
- 敏感信息不放在 localStorage
- 接口必须做权限控制
- 禁止前端明文存储密钥/Token

使用说明

# 企业级前端开发规范

一套覆盖 12 大领域的前端团队规范，审查代码、统一风格随手可查。

## 使用

```text
帮我检查这段 Vue 组件是否符合规范
```

```text
我们团队要定前端规范，输出一份完整清单
```

```text
Git commit 信息应该怎么写？
```

## 工作原理

技能内置目录、命名、HTML、CSS、JS/TS、Vue/React、Git、ESLint、性能、安全等规范条目。识别问题所属领域后逐条对照，给出修改前后对比或完整团队规范清单。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。