项目代码风格规范

项目代码风格规范

【免费下载链接】js-beautify Beautifier for javascript 项目地址: https://gitcode.com/gh_mirrors/js/js-beautify

JavaScript / TypeScript

1. 基本风格

   • 使用 4 空格缩进，不使用制表符
   • 每行代码不超过 120 个字符
   • 使用分号结尾
   • 使用单引号（'）而非双引号（"）
   • 大括号风格：K&R 风格（左大括号不换行）
   • 变量命名：camelCase，常量：UPPER_SNAKE_CASE

2. Three.js 特定规范

   • 对象命名：使用描述性名称，如 mainCamera、groundMesh、pointLight1
   • 材质与几何体分离：const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial(); const mesh = new THREE.Mesh(geometry, material);
   • 资源管理：使用 dispose() 方法释放不再使用的 Three.js 资源
   • 动画循环：使用 requestAnimationFrame，并在组件卸载时停止

3. Svelte 特定规范

   • 组件命名：PascalCase（如 ThreeScene.svelte）
   • 道具定义：使用 TypeScript 类型注解明确定义道具类型
   • 事件处理：使用 on: 指令而非手动添加事件监听器
   • 生命周期：正确使用 onMount 和 onDestroy 管理 Three.js 资源

GLSL Shader 代码

1. 基本风格

   • 使用 4 空格缩进
   • 关键字小写（vec3、float 等）
   • 制服（uniform）命名：camelCase，前缀 u_（如 u_time）
   • 属性（attribute）命名：camelCase，前缀 a_（如 a_position）
   • 变化量（varying）命名：camelCase，前缀 v_（如 v_uv）

2. 结构组织

   • 按以下顺序组织代码：
     1. 精度声明（precision highp float;）
     2. uniforms、attributes、varyings 声明
     3. 常量定义
     4. 辅助函数
     5. main() 函数
   • 使用空行分隔不同逻辑块
   • 为复杂算法添加详细注释

格式化工具使用

1. 开发环境

   • 安装推荐的 VSCode 扩展（ESLint、Prettier、Svelte for VS Code）
   • 启用 "format on save" 选项

2. 提交代码

   • 所有代码必须通过 ESLint 检查（无错误）
   • 使用 Git 提交前钩子自动格式化代码
   • 复杂变更需在 PR 中附带代码说明

例外情况处理

1. 性能关键代码

   • 允许为性能优化而牺牲部分格式规范
   • 必须在代码中添加详细注释说明优化原因

2. 遗留代码

   • 逐步重构不符合规范的遗留代码
   • 在重构前添加 /* beautify preserve:start */ 和 /* beautify preserve:end */ 保留原始格式

### 建立代码审查清单

在 PR 模板中添加代码审查清单，确保每次代码提交都经过全面检查：

```markdown
## 代码审查清单

- [ ] 代码符合项目代码风格规范
- [ ] 所有 Three.js 资源都有适当的释放逻辑
- [ ] 新增代码包含必要的注释和文档
- [ ] Shader 代码已格式化并添加注释
- [ ] 性能考虑：避免不必要的渲染循环和内存泄漏
- [ ] 测试：添加或更新了相关测试用例
- [ ] ESLint 检查无错误
- [ ] 格式化工具运行无错误

【免费下载链接】js-beautify Beautifier for javascript 项目地址: https://gitcode.com/gh_mirrors/js/js-beautify