告别"代码混乱症"！Day3：OpenCode基础语法精讲与编码规范实战指南

┌─────────────────────────────────────────────────────┐│ 顶部状态栏：显示当前会话、模型信息                  │├─────────────────────────────────────────────────────┤│ 中部代码区：显示和编辑代码                          │├─────────────────────────────────────────────────────┤│ 底部输入区：输入你的需求                            │└─────────────────────────────────────────────────────┘

// Plan模式示例：分析现有代码// 在Plan模式下输入："请分析@src/user.js中的getUser函数，提出改进建议"// AI可能返回的Plan结果："我发现getUser函数有以下几个可以改进的地方：1. 缺少错误处理：当用户ID无效时，应该抛出明确的错误2. 可以添加缓存机制：减少数据库查询3. 代码结构可以更清晰：将数据验证和格式化分离...建议在Build模式下执行以下修改："// 如果你同意方案，切换到Build模式，输入："执行修改"

# Build模式示例：创建新文件# 在Build模式下输入："请创建一个工具函数文件，包含：1. 验证邮箱格式的函数2. 验证密码强度的函数3. 格式化日期的函数保存为src/utils/validation.js"# AI会自动创建文件并写入代码：touch src/utils/validation.js# 文件内容会自动生成

项目结构分析：📁 src/ - 源代码目录  ├── main.js - 项目入口文件  ├── utils/ - 工具函数目录  │   └── helpers.js - 辅助函数  └── config/ - 配置文件目录      └── settings.js - 应用配置📁 tests/ - 测试文件目录📁 docs/ - 文档目录📄 package.json - 项目配置文件📄 README.md - 项目说明文档入口文件：src/main.js

// 示例1：分析具体的代码问题// 在OpenCode中输入："请解释@src/api.js中的这段代码为什么报错：@src/api.js:32-45"// AI会读取api.js的第32-45行并分析："这段代码的问题在于第38行的fetch调用缺少await关键字..."// 示例2：让AI帮你改进现有代码"请改进@src/components/Button.js中的render方法，使其更符合React最佳实践"// 示例3：分析多个文件的关系"分析@src/models/User3.js和@src/services/userService.js的依赖关系，画出简单的类图"

# 示例4：检查系统资源"!top -n 1 -b | head -20请分析我的系统资源使用情况，是否有瓶颈？"# 示例5：项目依赖检查"!npm ls --depth=0请分析我的项目依赖，有哪些可以优化？"# 示例6：数据库状态检查"!docker ps --format "table {{.Names}}\t{{.Status}}"检查数据库容器是否正常运行"# 示例7：文件系统检查"!df -h分析磁盘空间使用情况"# 示例8：网络连接检查"!netstat -an | grep :3000检查3000端口是否被占用"

// 糟糕的命名let x = 10;let arr = [];let fn = () => {};// 优秀的命名let userAge = 10;let productList = [];let calculateTotal = () => {};

// 好的常量命名（全大写，下划线分隔）const MAX_RETRY_COUNT = 3;const DEFAULT_TIMEOUT = 5000;// 好的类命名（大驼峰）class UserService {  async getUserById(userId) {    // 方法名清晰表达功能  }}// 好的工具函数命名function formatCurrency(amount, currency = 'USD') {  return new Intl.NumberFormat('en-US', {    style: 'currency',    currency: currency  }).format(amount);}

/**  * 计算用户折扣后的价格 * @param {number} originalPrice - 原价 * @param {number} discountRate - 折扣率（0-1之间） * @returns {number} 折扣后的价格 * @throws {Error} 如果折扣率不在有效范围内 */function calculateDiscount(originalPrice, discountRate) {  // 验证输入：防止无效折扣导致负价格  if (discountRate < 0 || discountRate > 1) {    throw new Error('折扣率必须在0-1之间');  }
  // 计算并返回折扣后的价格  return originalPrice * (1 - discountRate);}

// 重构前：做太多事情function processUserData(user) {  // 验证用户数据  if (!user.name || !user.email) {    return { error: '缺少必要信息' };  }
  // 格式化数据  user.name = user.name.trim();  user.email = user.email.toLowerCase();
  // 保存到数据库  database.save('users', user);
  // 发送欢迎邮件  sendEmail(user.email, '欢迎注册');
  return { success: true };}// 重构后：每个函数只做一件事function validateUser(user) {  return user.name && user.email;}function formatUserData(user) {  return {    name: user.name.trim(),    email: user.email.toLowerCase()  };}function saveUserToDB(user) {  return database.save('users', user);}function sendWelcomeEmail(email) {  return sendEmail(email, '欢迎注册');}// 主函数协调各个小函数function processUserData(user) {  if (!validateUser(user)) {    return { error: '缺少必要信息' };  }
  const formattedUser = formatUserData(user);  saveUserToDB(formattedUser);  sendWelcomeEmail(formattedUser.email);
  return { success: true };}

/** * @file todo.js * @description 待办事项应用核心模块 */class Todo {  constructor(title, description = '') {    this.id = Date.now();    this.title = title;    this.description = description;    this.completed = false;  }  markComplete() {    this.completed = true;  }}class TodoManager {  constructor() {    this.todos = [];  }  addTodo(title, description = '') {    if (!title) {      throw new Error('任务标题不能为空');    }    const todo = new Todo(title, description);    this.todos.push(todo);    return todo;  }  deleteTodo(id) {    this.todos = this.todos.filter(todo => todo.id !== id);  }  getAllTodos() {    return [...this.todos];  }  getCompletedTodos() {    return this.todos.filter(todo => todo.completed);  }  getPendingTodos() {    return this.todos.filter(todo => !todo.completed);  }}

// todo.test.js - 单元测试示例test('Todo类应该正确创建任务', () => {  const todo = new Todo('学习OpenCode');
  expect(todo.title).toBe('学习OpenCode');  expect(todo.completed).toBe(false);});test('TodoManager应该能够添加任务', () => {  const manager = new TodoManager();  manager.addTodo('第一个任务');
  expect(manager.getAllTodos()).toHaveLength(1);});test('应该能够标记任务为完成', () => {  const todo = new Todo('测试任务');  todo.markComplete();
  expect(todo.completed).toBe(true);});