Merge branch 'main' of https://git.jkwlstv.cn/doc/skills

frontend-spec/SKILL.md

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