Cursor ComposerAI
Cursor凭借其强大的**Composer**功能，正在改变开发者编写代码的方式，它不仅能够根据自然语言描述生成代码，还能将代码转换为自然语言，极大地提升了开发效率。
与上一章节我们提到的Tab功能补全不同，Composer能够理解代码的上下文，生成更符合逻辑、更高质量的代码片段。无论是快速原型开发、代码片段生成，还是代码理解和调试，Composer都能为开发者提供强大的支持
本文将深入探讨Cursor的Composer功能、应用场景以及使用技巧，帮助你更好地利用这一工具，提升开发效率。
Composer功能详解
1. 应用雏形快速开发
Composer的核心功能之一是根据自然语言描述生成代码。例如，当你输入"创建一个比较美观的todo组件，可以编辑，删除，删除前需要二次确认的弹窗"时，Composer会自动生成相应的代码。
Cursor生成代码的过程，非常的简单，只需要告诉它一句话，它便能完整的生成出来
Cursor生成出来的代码效果
2. 代码解释
Composer不仅能够生成代码，还能将代码转换为自然语言描述。这对于理解复杂代码逻辑或调试代码非常有帮助。
我们可以继续追问它，刚刚生成的代码分别是什么意思
typescript
const addTodo = () => {
if (newTodo.value.trim()) {
todos.value.push({
id: Date.now(),
content: newTodo.value,
completed: false
})
newTodo.value = ''
}
}Composer 生成的解释：
3. 代码翻译
Composer支持将代码从一种编程语言翻译成另一种编程语言。例如，你可以将Go代码翻译为typescript代码，方便快速切换技术栈。
这个是我们提供给composer的代码和指令
go
func greet(name string) {
fmt.Printf("Hello, %s!\n", name)
}
// 请帮我把这个代码转为typescript的代码，并导出这个函数这是composer转换后的代码
typescript
export function greet(name: string): void {
console.log(`Hello`, ${name}`);
}过程的动图
上面这个的简单的例子，实际场景中，比如现在我们要接入一个平台的API，但是它并没有提供相当于的代码实例，这个时候我们就可以使用该功能进行代码转换了，达到我们预期的效果
4. 代码优化
Composer 还能提供代码优化建议，帮助开发者提升代码质量和性能。例如，识别代码中的潜在问题，并给出改进方案。
我们写一个优化比较差的doubleArrayElements函数，功能是将数组里的数值乘与二，返回一个新的数组
typescript
function doubleArrayElements(arr: number[]): number[] {
let result: number[] = [];
for (let i = 0; i < arr.length; i++) {
let currentElement = arr[i];
let doubledElement = currentElement * 2;
result.push(doubledElement);
}
return result;
}
// 使用示例
const originalArray = [1, 2, 3, 4];
const doubledArray = doubleArrayElements(originalArray);
console.log(doubledArray); // 输出: [2, 4, 6, 8]现在这个代码运行起来是没问题的，只不过是优化比较差
我们可以让composer来优化下这个代码，我们在上下文中选择当前这个文件，并告诉它"请帮我优化下这个代码"即可
当我们输入后，composer开始了工作，这时候它并不会直接修改你的代码，而是让你对每一部分的代码作出选择
你可以选择"接受建议代码"/"拒绝更改"，类似我们在解决git冲突一样
这里有快捷键
Ctrl`+`Shift`+`Y代表接受，Ctrl`+`N代表拒绝，需要注意的是这里的Y和N需要开启键盘的大写模式，否则无法生效
如果你觉得它的编写出来的代码很好，你也可以一键接受
在面板中的下方右侧有一个AccpetAll代表接受全部代码（旁边的RejectAll则代表拒绝全部代码更改）
那左边还有个按钮saveAll是什么意思呢？它代表保存现在Composer建议的代码，但不接受更改到文件中
这里听上去可能有点绕，我举个小例子，你可能就明白了
回到我们上面的Todo例子，我们接着给Composer提问，告诉它"我现在想要可以给每一个todo项新增一个二级菜单，可以往里面添加子项"
这个时候编辑器界面上呈现代码片段对比的效果，这个时候我们的todo页面还是没有被改变的时候，当我们点击了saveAll，它就会把Composer建议的代码保存到文件中，这时候我们的todo页面就会有变化，我们先看看它这次的修改效果如何
如果这个时候，你觉得它的代码已经达到你的效果了，你可以接受它的全部更改（点击AcceptAll即可），但总有一些不满人意的时候，我们可以接着提问它"这个效果我觉得还差了一点，我想要二级菜单的垂直方向显示的"
现在composer帮我们修改了样式，我们继续看看效果，OK 我觉得很不错，那我就点击下AcceptAll
如果你觉得还是不行，可以直接rejectAll回到一开始的效果，也就是只有一级Todo的时候，因为我们从一开始并没有接受它的代码建议，这个时候就回滚代码了
说完saveAll按钮的功能后，我们继续代码优化的例子中
现在我们AcceptAll优化后的代码，以下是优化后的代码效果
typescript
/**
* 将数组中的每个元素翻倍
* @param arr - 输入的数字数组
* @returns 返回一个新数组，其中每个元素都是输入数组对应元素的两倍
* @throws {Error} 当输入不是数组或数组为空时抛出错误
*/
function doubleArrayElements(arr: number[]): number[] {
// 输入验证
if (!Array.isArray(arr)) {
throw new Error('输入必须是数组');
}
if (arr.length === 0) {
throw new Error('数组不能为空');
}
// 使用 map 方法简化操作
return arr.map(num => num * 2);
}
// 使用示例
try {
const originalArray = [1, 2, 3, 4];
const doubledArray = doubleArrayElements(originalArray);
console.log(doubledArray); // 输出: [2, 4, 6, 8]
} catch (error) {
console.error('错误:', error.message);
}在composer的面板中，它会告诉你，它的代码改进了什么 （以下的composer的回答）
markdown
主要改进点说明：
1. 使用`map`方法替代了`for`循环，使代码更简洁且更具函数式编程风格
2. 添加了输入验证，确保输入是非空数组
3. 添加了`TSDoc`文档注释，提供了函数的详细说明、参数和返回值信息
4. 添加了错误处理机制，使用 `try-catch` 包装使用示例
5. 保持了类型安全，明确指定了参数和返回值类型
这个优化版本更加健壮，代码更简洁，并且提供了更好的错误处理和文档。如果你的应用场景中确定不会传入空数组或非数组值，也可以移除相应的验证代码，使函数更加轻量级。5. 代码片段生成
利用Composer根据当前代码生成代码片段，例如在上面的Todo例子中，我们可以继续让它来新增功能，如果你没有思路的话，也可以向它进行提问
我这里让它新增筛选功能"优先级"，"todo状态"，向它提问"我想要在给这个组件，新增筛选功能，我想要对每个todo项设置优先级和截至日期，以及筛选是否已经完成状态，同时也优化下界面的样式"
稍等片刻，它已经创建出来我描述中的效果了
看到这里是不是觉得Cursor很强大！
6. Composer使用技巧
为了更好的使用Composer，你需要掌握一些提问的艺术，以获得更好编码的效果
- 清晰的自然语言描述有助于生成更准确的代码。例如，使用"创建一个函数，用来计算两个数的和"而不是"做一个东西，计算两个数的和"。
- 在描述代码功能时，提供相关的变量名、函数名等信息，帮助
Composer更好地理解你的需求 - 尝试不同的描述方式，如果
Composer生成的代码不符合预期，可以尝试换一种描述方式。 - 在给项目优化或者新增功能时，最好多补充一句"请勿修改当前项目中的其他代码"，否则它有可能改掉你的代码逻辑
7. 总结
Cursor的Composer功能正在改变开发者编写代码的方式，它能够根据自然语言描述生成代码，还能将代码转换为自然语言等功能，在掌握本章内容后，相信你将更加熟练地运用Cursor的Composer功能，进一步加速你的开发工作流程。