代码编辑器 (Cmd+I)

Cursor Composer 是一个革命性的 AI 辅助代码编辑器，它能够理解你的编程意图，帮助你快速实现功能，重构代码，并提供智能的编辑建议。通过 Cmd+I（Mac）或 Ctrl+I（Windows/Linux）快捷键，你可以随时唤起这个强大的工具。

核心功能

1. 智能编辑

• 代码生成：根据描述生成代码
• 代码重构：智能重构现有代码
• 代码优化：改进代码质量和性能
• 多文件编辑：同时处理多个相关文件

2. 上下文理解

• 项目感知：理解整个项目结构
• 依赖分析：识别和处理代码依赖
• 类型推断：智能类型系统支持
• 智能导入：自动管理导入语句

3. 编辑模式

• 行内编辑：直接在代码中编辑
• 对话编辑：通过对话指导编辑
• 批量编辑：处理多处相似修改
• 重构模式：大规模代码重构

使用方法

1. 基本操作

1. 启动 Composer

   • 按 Cmd/Ctrl + I 打开
   • 从命令面板选择
   • 点击编辑器工具栏图标

2. 编辑模式

   • 直接编辑模式
   • 对话编辑模式
   • 多文件编辑模式

3. 操作流程

   • 选择要编辑的代码
   • 描述编辑意图
   • 确认或调整生成的代码

2. 编辑命令示例

代码生成

创建一个 TypeScript 类型安全的 API 请求函数，支持错误处理和请求取消

代码重构

将这个类组件重构为函数组件，使用 hooks 替代生命周期方法

性能优化

优化这个组件的渲染性能，使用 memo 和 useCallback 处理回调函数

高级特性

1. 多文件编辑

1. 关联文件处理

// 在多个文件中添加新的接口定义
interface UserProfile {
  id: string
  name: string
  email: string
  avatar: string
}

// Composer 会自动：
// 1. 在相关文件中添加接口导入
// 2. 更新使用该接口的代码
// 3. 添加必要的类型检查

2. 批量更新

// 更新所有使用旧 API 的地方
// 旧代码：
const data = await api.get('/users')

// 新代码：
const { data, error } = await api.users.list()

3. 依赖管理

// 添��新功能时自动处理依赖
import { useState, useEffect, useCallback } from 'react'
import { useQuery } from '@tanstack/react-query'
import { toast } from 'sonner'

2. 智能重构

1. 代码模式转换

// 将回调模式转换为 Promise
// 转换前：
function processData(data, callback) {
  // 处理数据
  callback(null, result)
}

// 转换后：
async function processData(data) {
  // 处理数据
  return result
}

2. 架构改进

// 将 MVC 架构转换为领域驱动设计
// 转换前：
class UserController {
  async createUser(req, res) {
    const user = await User.create(req.body)
    res.json(user)
  }
}

// 转换后：
class UserService {
  constructor(private readonly userRepository: UserRepository) {}

  async createUser(userData: CreateUserDTO): Promise<User> {
    const user = User.create(userData)
    return this.userRepository.save(user)
  }
}

3. 代码生成

1. 完整功能实现

// 生成一个完整的认证中间件
export function authMiddleware(
  options: AuthOptions = {}
): MiddlewareFunction {
  return async (req, res, next) => {
    try {
      const token = extractToken(req)
      if (!token) {
        throw new UnauthorizedError('No token provided')
      }

      const decoded = verifyToken(token)
      req.user = await getUserById(decoded.userId)
      next()
    } catch (error) {
      next(new UnauthorizedError(error.message))
    }
  }
}

2. 测试用例生成

// 为组件生成测试用例
describe('UserProfile', () => {
  it('should render user information correctly', () => {
    const user = {
      name: 'John Doe',
      email: '[email protected]',
      avatar: '/avatar.jpg'
    }

    const { getByText, getByAltText } = render(
      <UserProfile user={user} />
    )

    expect(getByText(user.name)).toBeInTheDocument()
    expect(getByText(user.email)).toBeInTheDocument()
    expect(getByAltText(user.name)).toHaveAttribute(
      'src',
      user.avatar
    )
  })

  it('should handle loading state', () => {
    const { getByTestId } = render(<UserProfile loading />)
    expect(getByTestId('loading-spinner')).toBeInTheDocument()
  })
})

最佳实践

1. 编辑策略

1. 渐进式编辑

   • 从小改动开始
   • 逐步扩大改动范围
   • 及时验证和测试

2. 代码审查

   • 检查生成的代码
   • 验证类型安全
   • 确保代码质量

3. 性能考虑

   • 控制编辑范围
   • 优化生成的代码
   • 注意资源使用

2. 工作流程

1. 准备阶段

   • 明确编辑目标
   • 收集相关信息
   • 规划编辑步骤

2. 执行阶段

   • 分步骤编辑
   • 实时验证结果
   • 处理异常情况

3. 完成阶段

   • 代码审查
   • 运行测试
   • 提交更改

3. 注意事项

1. 代码质量

   • 保持代码风格一致
   • 添加必要的注释
   • 遵循最佳实践

2. 性能优化

   • 优化生成的代码
   • 减少不必要的依赖
   • 注意内存使用

3. 安全考虑

   • 检查安全隐患
   • 保护敏感信息
   • 验证输入输出

常见场景

1. 功能开发

新功能添加

// 添加用户认证功能
export function useAuth() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(
      (user) => {
        setUser(user)
        setLoading(false)
      },
      (error) => {
        console.error('Auth error:', error)
        setLoading(false)
      }
    )

    return unsubscribe
  }, [])

  return { user, loading }
}

功能扩展

// 扩展现有组件添加新功能
interface DataTableProps<T> extends TableProps<T> {
  onSort?: (field: keyof T, order: 'asc' | 'desc') => void
  onFilter?: (filters: Record<keyof T, any>) => void
  onPaginate?: (page: number, pageSize: number) => void
}

2. 代码优化

性能优化

// 优化渲染性能
const MemoizedComponent = memo(function Component({
  items,
  onItemClick
}: Props) {
  const handleClick = useCallback((id: string) => {
    onItemClick(id)
  }, [onItemClick])

  return (
    <div>
      {items.map(item => (
        <Item
          key={item.id}
          {...item}
          onClick={() => handleClick(item.id)}
        />
      ))}
    </div>
  )
})

代码重构

// 重构为自定义 Hook
function useDataFetching<T>(url: string) {
  const [data, setData] = useState<T | null>(null)
  const [error, setError] = useState<Error | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let mounted = true

    async function fetchData() {
      try {
        const response = await fetch(url)
        const json = await response.json()
        
        if (mounted) {
          setData(json)
          setError(null)
        }
      } catch (error) {
        if (mounted) {
          setError(error as Error)
          setData(null)
        }
      } finally {
        if (mounted) {
          setLoading(false)
        }
      }
    }

    fetchData()

    return () => {
      mounted = false
    }
  }, [url])

  return { data, error, loading }
}

配置选项

1. 编辑器设置

• 自动保存：配置自动保存选项
• 格式化规则：设置代码格式化规则
• 快捷键映射：自定义快捷键绑定

2. AI 设置

• 模型选择：选择使用的 AI 模型
• 上下文范围：配置上下文包含范围
• 生成选项：调整代码生成参数

3. 项目设置

• 语言支持：配置语言特定选项
• 代码风格：设置项目代码规范
• 忽略文件：配置不需要处理的文件

提示

• 善用多文件编辑功能
• 保持代码改动的原子性
• 经常进行代码审查和测试

注意

• 大型改动需要谨慎处理
• 始终验证生成的代码
• 保持代码库的一致性