cursor-前端不完全指南

基本信息

官网：https://www.cursor.com/cn
中文指南：https://cursordocs.com/docs
原汤化原食之自我介绍：Cursor 是一个现代化的、智能的代码编辑器，它的最大特点是集成了 AI 辅助编程功能。作为一个专业的开发工具，它既保留了传统 IDE 的核心功能，又带来了全新的 AI 辅助开发体验。
体验信息：Mac版本

产品功能

• 内置强大的 AI 助手，可以实时提供代码建议和解释
• 支持自然语言交互，能够理解开发者的意图
• 代码补全和建议的准确度较高
• 可以进行代码重构、优化建议等高级操作
• 可接入丰富的mcp，降低AI门槛

上手

vscode一键导入

基于 VS Code 的编辑器，具有 AI 功能，支持导入扩展和自定义配置
Cursor 是 VS Code 的一个分支。这使我们能够专注于使用 AI 创造最佳的编码方式，同时提供熟悉的文本编辑体验。
前端开发者的福音，第一次打开通过一键配置导入，cursor完全复刻了vscode的，包括安装的插件。
cursor首次打开，导航栏是横向的（说是为了让对话的部分空间更大），其余和vscode一样

左下是vscode的设置，右上为cursor的配置
改个配置，和vscode一模一样

setings

settings:  workbench.activityBar.orientation

配置大模型（选择更快更先进的大模型）

万能的cmd+L

更全面的快捷键参考：https://cursordocs.com/docs/editor/kbd
常用的如下：

问答模式：

一定程度上不用上google或百度了

上下文模式：

选择agent，默认情况下会自动选择上下文，也可以通过@符号添加需要分析的文件或者整个项目
应用场景：

• 初次接触项目分析页面结构
• 联系上下文实现自己需要的模块功能（动画/js函数等）
• 检查是否有隐藏的代码错误

使用案例

优化需求

检查代码逻辑

CMD+K

代码行间提问/编辑/运行终端命令

MCP服务器

AI助手的再次进化-模型上下文协议，简化AI模型与外部工具、数据源之间的连接，优化智能应用的开发与集成过程；集成MCP，拥抱顺序思维，程序开发新思路

Framelink Figma MCP Server 体验

mcp链接：https://mcp.so/server/Figma-Context-MCP/GLips
配置参考：https://cursordocs.com/cursor-mcp-setup/cursor-mcp-json-setup

cursor配置：

准备工作-获取figma的api key
个人信息页Settings -> Security 页签-> new token，点击进入填写信息(至少保证file-content有可读权限）->复制token备用 ->替换mcp json配置中的key -> mcp servers绿点即为可用

1.mcp文档


2.cursor配置（这里的key来自于figma)

3.对话使用figma MCP导入figma，自动读取figma并实现页面

• 打开设计稿，copy link
  
  -复制进cursor对话，自动调用mcp server生成页面
  此处省略。。。。
  因为需要反复调整，完善页面（过程中有一些报错，沟通有点费劲）
  总结下来就是创建组件好使，从0到1生成费劲

整体感受：

• 优点
  • 写的快
  • 还能切图
• 缺点
  • 完全依靠它从0-1搭建H5页面差点意思，即使项目框架搭建好，能创建很多组件并完成页面，但页面之间联系和报错需要很多时间解决，不如人工写的快
  • 自然语言和机器语言还是不太能直译，当前业务环境下，仅靠大模型做不到生成直接可用的页面，页面里甚至还有vue2和vue3的穿插使用

更多mcp（可自行探索）：

https://mcp.so/servers

总结

优秀实践：

封装多行文本省略

截图生成页面模板结构

包括代码优化和逻辑优化都有很好的表现，还有好用的代码提示，代码纠错，检查和完善提取逻辑（这些和其他代码助手表现差不多，大模型的原因，cursor更准确），都在一定程度上可以提升效率，搭配丰富的mcp整体可玩性也比较高

呼应一下，开头高亮了辅助二字，在一些实践中，上下文模式的编写局部功能表现优异。AI高速发展的今天，也许在未来的某一天可以实现对话式0代码编程，但目前阶段还只是程序员的辅助代码工具，AI的出现是为了辅助人类，并不是为了取代人类，毕竟代码也需要温度~