更新 frontend-spec/SKILL.md
This commit is contained in:
+4
-25
@@ -32,9 +32,9 @@ license: MIT-0
|
|||||||
- 如何配置 ESLint 规范？
|
- 如何配置 ESLint 规范？
|
||||||
- 前端性能优化有哪些规则？
|
- 前端性能优化有哪些规则？
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. 项目目录规范（通用）
|
## 1. 项目目录规范（通用）
|
||||||
|
|
||||||
|
```text
|
||||||
src/
|
src/
|
||||||
├── api/ # 接口请求
|
├── api/ # 接口请求
|
||||||
├── assets/ # 静态资源
|
├── assets/ # 静态资源
|
||||||
@@ -49,11 +49,10 @@ src/
|
|||||||
├── styles/ # 全局样式
|
├── styles/ # 全局样式
|
||||||
├── utils/ # 工具函数
|
├── utils/ # 工具函数
|
||||||
└── App.vue/main.ts
|
└── App.vue/main.ts
|
||||||
|
```
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. 命名规范
|
## 2. 命名规范
|
||||||
|
|
||||||
### 文件命名
|
### 文件命名
|
||||||
- 组件：大驼峰 `UserList.vue`
|
- 组件：大驼峰 `UserList.vue`
|
||||||
- 工具/页面：短横线 `user-info.ts`
|
- 工具/页面：短横线 `user-info.ts`
|
||||||
@@ -65,16 +64,12 @@ src/
|
|||||||
- 布尔：is/has/should 开头 `isVisible`
|
- 布尔：is/has/should 开头 `isVisible`
|
||||||
- 函数：动词开头 `getUserInfo()`
|
- 函数：动词开头 `getUserInfo()`
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. HTML 规范
|
## 3. HTML 规范
|
||||||
- 语义化标签：header/main/section/aside/footer
|
- 语义化标签：header/main/section/aside/footer
|
||||||
- 类名使用短横线：`class="user-card"`
|
- 类名使用短横线：`class="user-card"`
|
||||||
- 禁止冗余标签、禁止行内样式
|
- 禁止冗余标签、禁止行内样式
|
||||||
- 图片必须加 alt，懒加载使用 loading="lazy"
|
- 图片必须加 alt，懒加载使用 loading="lazy"
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. CSS / SCSS 规范
|
## 4. CSS / SCSS 规范
|
||||||
- 使用 BEM 或短横线命名
|
- 使用 BEM 或短横线命名
|
||||||
- 禁止嵌套超过 3 层
|
- 禁止嵌套超过 3 层
|
||||||
@@ -83,8 +78,6 @@ src/
|
|||||||
- 单位优先使用 rem / vh / %
|
- 单位优先使用 rem / vh / %
|
||||||
- 颜色使用变量，禁止硬编码
|
- 颜色使用变量，禁止硬编码
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. JavaScript 规范
|
## 5. JavaScript 规范
|
||||||
- 使用 const/let，禁止 var
|
- 使用 const/let，禁止 var
|
||||||
- 优先使用箭头函数
|
- 优先使用箭头函数
|
||||||
@@ -93,8 +86,6 @@ src/
|
|||||||
- 禁止魔法数字，抽为常量
|
- 禁止魔法数字，抽为常量
|
||||||
- 数组优先使用 map/filter/reduce
|
- 数组优先使用 map/filter/reduce
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. TypeScript 规范
|
## 6. TypeScript 规范
|
||||||
- 必须定义接口/类型
|
- 必须定义接口/类型
|
||||||
- 禁止 any，能用 unknown 替代
|
- 禁止 any，能用 unknown 替代
|
||||||
@@ -102,8 +93,6 @@ src/
|
|||||||
- 函数参数与返回值必须标注类型
|
- 函数参数与返回值必须标注类型
|
||||||
- 类型复用优先使用 type / interface
|
- 类型复用优先使用 type / interface
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. Vue 规范
|
## 7. Vue 规范
|
||||||
- 组件名多单词，避免与 HTML 重名
|
- 组件名多单词，避免与 HTML 重名
|
||||||
- props 必须定义类型、默认值、校验
|
- props 必须定义类型、默认值、校验
|
||||||
@@ -112,8 +101,6 @@ src/
|
|||||||
- watch 慎用，优先 computed
|
- watch 慎用，优先 computed
|
||||||
- 方法命名遵循动词+名词
|
- 方法命名遵循动词+名词
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. React 规范
|
## 8. React 规范
|
||||||
- 组件使用函数式 + Hooks
|
- 组件使用函数式 + Hooks
|
||||||
- 状态扁平化，避免嵌套
|
- 状态扁平化，避免嵌套
|
||||||
@@ -121,8 +108,6 @@ src/
|
|||||||
- 事件处理函数以 handle 开头
|
- 事件处理函数以 handle 开头
|
||||||
- 样式使用 CSS Modules / styled-components
|
- 样式使用 CSS Modules / styled-components
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. Git 规范
|
## 9. Git 规范
|
||||||
提交格式：
|
提交格式：
|
||||||
type(scope): content
|
type(scope): content
|
||||||
@@ -137,8 +122,6 @@ type：
|
|||||||
- test: 测试
|
- test: 测试
|
||||||
- chore: 构建/工具
|
- chore: 构建/工具
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 10. ESLint + Prettier 规范
|
## 10. ESLint + Prettier 规范
|
||||||
- 2 空格缩进
|
- 2 空格缩进
|
||||||
- 单引号
|
- 单引号
|
||||||
@@ -147,8 +130,6 @@ type：
|
|||||||
- 禁止未使用变量
|
- 禁止未使用变量
|
||||||
- 禁止 console（生产环境）
|
- 禁止 console（生产环境）
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 11. 性能规范
|
## 11. 性能规范
|
||||||
- 图片压缩、WebP
|
- 图片压缩、WebP
|
||||||
- 懒加载图片、组件
|
- 懒加载图片、组件
|
||||||
@@ -157,8 +138,6 @@ type：
|
|||||||
- 大数据列表使用虚拟滚动
|
- 大数据列表使用虚拟滚动
|
||||||
- 减少冗余渲染
|
- 减少冗余渲染
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 12. 安全规范
|
## 12. 安全规范
|
||||||
- 防止 XSS：过滤用户输入
|
- 防止 XSS：过滤用户输入
|
||||||
- 防止 CSRF：token 校验
|
- 防止 CSRF：token 校验
|
||||||
|
|||||||
Reference in New Issue
Block a user