首先打开Cursor，点击File - Preferences - Cursor Settings 进入Cursor设置页面，然后点击 Rules就能看到规则页面了
description: 前端编码规范（强制）
globs: ["**/*.{js,ts,jsx,tsx,vue,html,css,scss}"]
alwaysApply: true
---
# 前端编码规范（强制遵守）
## 1. 基础规范
- 统一使用 UTF-8 编码
- 缩进使用 2 个空格，禁止使用 Tab
- 文件末尾保留空行
- 禁止行尾多余空格
## 2. 命名规范
- 变量、函数、对象：小驼峰 camelCase
- 类、组件、枚举：大驼峰 PascalCase
- 常量：全大写 + 下划线 UPPER_CASE
- 布尔值：必须以 is / has / should 开头
- 文件名：短横线连接 kebab-case
## 3. 语法规范
- 必须使用 let / const，禁止使用 var
- 优先使用箭头函数、模板字符串、解构赋值
- 条件判断必须使用 === / !==，禁止 == / !=
- 每条语句结尾必须加分号
- 字符串统一使用单引号
- 每行代码长度不超过 120 字符
## 4. TypeScript 规范
- 必须开启严格模式
- 禁止使用 any、隐式 any
- 接口以 I 开头，如 IUserInfo
- 类型必须显式声明
## 5. Vue / React 规范
- 组件必须函数式写法
- Props 必须定义类型与默认值
- 禁止直接操作 DOM
- 逻辑与渲染分离
- 注释清晰，关键逻辑必须说明
## 6. 注释规范
- 文件头部必须注明功能、作者、日期
- 复杂逻辑必须添加行内注释
- 函数必须添加 JSDoc 注释
- 禁止无意义注释
## 7. 格式规范
- 大括号不换行
- 运算符两侧必须加空格
- 逗号后必须加空格
- 对象、数组最后一项保留尾逗号
