📖 技能介绍

前端开发规范 Skill（企业级）

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

覆盖范围

项目结构与目录规范
文件命名规范
HTML 编写规范
CSS / SCSS 规范
JavaScript / TypeScript 规范
Vue / React 编码规范
Git 提交规范
ESLint / Prettier 规范
构建与性能优化规范
安全规范

使用方式

你可以直接问： - 前端项目目录怎么设计？ - JS 变量命名有什么规范？ - Vue 组件编写最佳实践 - Git commit 信息怎么写？ - 如何配置 ESLint 规范？ - 前端性能优化有哪些规则？

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

🤖 AI 评测

这个前端规范 Skill 质量中上，优点是内容全面、覆盖项目结构到安全规范多个方面，框架支持 Vue 和 React，适合团队统一使用。不足之处在于规范说明比较简单，只有原则性建议而缺少实际代码示例，也没有提供可直接使用的配置文件模板。如果你需要的是一份拿来就能用的详细规范文档，这个 Skill 可能还需要补充更多实例和可下载资源。