使用 Cursor 创建 WordPress 插件

541124 1

AI 驱动的编程工具已经存在了一段时间,但 Cursor 最近受到了很多关注。虽然其他工具通常专注于代码补全,但 Cursor 允许使用自然语言输入,并且可以在代码编写完成后指导你如何处理它。

它的一个更吸引人的功能是能够设置规则,例如“遵循 WordPress 编码标准”。在本文中,我们将为 WordPress 开发配置 Cursor,然后使用它创建一个简单的插件。

配置 Cursor

开始使用 Cursor 相对简单。只需访问下载页面,下载适合你操作系统的安装文件,然后按照屏幕上的说明进行安装。Mac、Windows 和 Linux 都有对应的版本。在本文中我们将使用 Windows 版本,但这应该不会有太大区别。

安装界面允许你选择 Vim、Emacs、Atom、Sublime、Jetbrains 或 VS Code 的键位绑定,VS Code 为默认选项。你也可以指定希望使用的语言(默认为英语),如果愿意的话,还可以禁用 Cursor 的代码库索引功能。还有几个选项可以让你从命令行启动 Cursor。做出选择后,点击继续进行安装。

Curson Install Screen

接下来,安装程序还会询问你是否要导入现有的 VS Code 扩展、设置和键位绑定。如果你有复杂的配置,这会是一个很方便的功能,但我会点击从头开始。然后,你可以选择你的数据偏好。“帮助改进 Cursor”允许他们收集使用数据,而“隐私模式”则会禁用此功能。

接下来,系统会提示你登录。你可以为此创建一个新 ID,也可以使用现有的 Google 或 GitHub 账户。

为 WordPress 开发配置 Cursor

此时,你应该在 Cursor 中看到三个选项:“打开项目”、“克隆仓库”和“通过 SSH 连接”。这些都相当不言自明,但现在我们暂时忽略它们。相反,我会花一些时间为 WordPress 开发配置 Cursor。

点击右上角的齿轮图标进入 Cursor 的设置。在“常规”选项卡中,找到“AI 规则”部分,并添加以下全局规则:

When working with WordPress projects, follow WordPress Coding Standards and best practices.

在此部分添加规则会将其设置为将用于所有项目的全局规则。你也可以设置仅适用于该项目的特定规则。

Cursor 的 AI 规则文档 有更详细的说明。

使用 Cursor 构建简单的 WordPress 插件

这里的目标是创建一个名为“Hello Homer”的插件,它会在 WordPress 管理区域显示随机的《辛普森一家》台词,类似于“Hello Dolly”插件。我们将使用 Cursor 来帮助我们开发这个插件,展示 AI 如何简化 WordPress 插件开发过程,即使这个插件只实现了一些毫无意义的功能,没有任何一个理性的人会想要。

Cursor 与你可能熟悉的其他代码编辑器类似。打开项目后,你会在左侧窗格中看到文件和文件夹。你可以像往常一样点击其中任何一个并进行修改,创建新文件、编辑代码等。然而,Cursor 的真正强大之处在于其 AI 编辑功能。要访问此功能,请点击右上角的切换 AI 面板按钮,位于设置图标旁边。打开后,面板会显示三个选项卡:“聊天”、“作曲家”和“错误查找器”。

  • 聊天: 此标签页提供了一个交互式AI助手,您可以就代码问题与其对话。您可以提问、获取解释,或请求特定编码任务的帮助。聊天功能具有内置的上下文感知能力,能够理解您的代码库并提供相关答案。
  • Composer: 这是一个高级多文件编辑功能,可帮助您构建整个应用程序或对项目进行大规模更改。使用Composer,您可以描述想要创建的内容,AI将跨多个文件生成代码来实现您的请求。它特别适合快速原型开发或设置样板代码。
  • Bug Finder: 此标签页提供自动代码分析,用于检测和突出显示代码库中的潜在错误或问题。在您过于兴奋之前,值得注意的是这是一个实验性功能,而且成本非常高,因为它必须遍历代码库中的每一个更改。您可能可以通过暂存不想扫描的Git更改来降低价格。
Toggle AI Pane

首先,我来试试"聊天"功能,看看效果如何。对于LLM来说,旧的"garbage in, garbage out"(输入垃圾,输出垃圾)原则仍然适用。您给的指令越多、越精确,结果就越好。

这意味着我应该给Cursor非常精确和详细的指令,告诉它具体想要做什么。不过这测试意义不大。相反,我们会给出非常简短的指令,看看它能根据这些指令和我设定的一条规则(要求它遵循WordPress编码标准和最佳实践)做出什么成果。

Cursor Chat Hello Homer

初始结果看起来相当不错,包括实施说明和关于服务器必须具有正确权限才能向Frinkiac.com发出外部API调用的警告。

代码窗口顶部有一个"应用"按钮。点击此按钮将创建一个新文件hello-homer.php,其中包含提供的代码,并将其放在项目的根目录中。该插件需要移动到插件目录并通过WordPress管理后台激活后才能使用。移动文件只需在Cursor中点击文件并拖动到正确的目录即可。完成后,我们可以按常规方式激活插件。

打开网站后台,我们可以看到该插件确实存在,并带有描述。

Hello Homer in WP Admin

现在是真正的测试时间,看看它是否按预期工作:

Hello Homer Showing Quote

成功!我们在WordPress管理后台中有了一个《辛普森一家》的名言。既然效果这么好,我会让Cursor"改进"这个插件。我使用引号是因为我们要求的任何功能都不会让它更有用,因为零加零还是等于零。不过,它让它更复杂,让我们能够进一步测试Cursor的能力。

以下是我要求它做的事情列表:

  • 添加一个备用引用,以防无法连接到API。备用引用将是"D'oh! We couldn't connect to the API!"
  • 在每个引用中包含剧集的标题和季数
  • 包含来自Frinkiac的相应截图
  • 添加一个设置页面,允许用户自定义显示
  • 添加缓存以减少API调用

几秒钟后,Cursor已经完成了对插件代码的必要修改。再次点击应用后,我们刷新了网站。初次检查,它运行得非常好:

Hello Homer in WP 2

我们有了引用、剧集标题和季数,以及截图。Cursor还成功创建了一个设置页面:

Hello Homer in WP 3

长话短说,它完成了我要求的所有功能。稍作扩展,它还完成了一些我没有明确要求的功能:添加了清理和转义以防止跨站脚本攻击,并使用了i18n国际化使其可以翻译成其他语言。它主动添加了这些功能,因为它们是WordPress编码标准和最佳实践的一部分,设置为"AI规则"设置中。

你可以在这里看到完整插件的代码

总结

这是一个快速测试,我们创建的插件相当简单,但Cursor确实完成了目标。尽管如此,在让经验丰富的开发人员首先仔细检查之前,我会非常谨慎地部署任何真实场景中的代码。凭我直观的印象,有很多情况不仅需要人类介入,而且实际上是必需的:

  • 复杂逻辑:处理复杂的业务逻辑或自定义算法时,人类开发人员通常对AI可能忽略的细微差别和边缘情况有更好的理解。
  • 性能关键代码:手动编写的代码通常比AI生成的解决方案更高效。完成某件事通常有多种方式。AI给你的代码可能能工作,但不能保证它是最好的方式。
  • 安全敏感区域:处理用户身份验证、数据加密或其他安全关键功能时,让人类专家审查和实施代码至关重要。

在所有情况下,必须有一个活生生的人承担责任。至少这样你有人可以怪。这可能听起来像开玩笑,但我100%是认真的。你可以让机器人帮你做事,但你仍然有责任确保这项工作达到标准。关键是将AI视为增强你开发工作流程的强大助手,而不是替代你的专业知识和判断力。

你使用过Cursor或其他AI编码工具吗?你的体验如何?请在评论中告诉我。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注