我，一个小白，居然用 AI 工具修改了公司前端代码！

背景

有一天同事发现公司网站的某个页面上有三个 H1 标签，懂行的都知道，有三个 H1 标签虽然不会对网站的访问产生影响，但是对于搜索引擎来讲，就比较麻烦了，因为一般搜索引擎都是靠 H1 标签、TDK 等来对网页的内容进行抓取，然后再进行质量优劣的判断。三个 H1 标签，搜索引擎就不知道到底应该抓哪个了。所以，同事提了一个需求，希望能修改一番，恰巧不巧，负责该网站的研发同学由于有更紧急的需求去做，这个不影响用户访问的需求暂时还排不上。于是，我就自告奋勇打算自己修改。

代码查找

说干就干，我把该网站的代码从代码托管平台下载到了本地，然后用近期火爆的 AI 编辑器 Cursor 代码（至于为什么不用 VS Code，那是因为前期那 Cursor 做了几次测试，就索性用 Cursor）。由于之前从来没有看过这套代码的完整逻辑，于是采用了暴力的手段，直接用全局搜索查找 H1 标签内容所在的文件。结果找到了一堆，然后一个个看，一个个排除，最后发现了两个文件：

xxx.yml 文件

- title:
    text: "我是第一个 H1 标签的内容"
    style: "color: #FFFFFF;"
......还有其他内容，在这儿省略......
- title:
    text: "我是第二个 H1 标签的内容"
    style: "color: #FFFFFF;"
......还有其他内容，在这儿省略......
- title:
    text: "我是第三个 H1 标签的内容"
    style: "color: #FFFFFF;"
......还有其他内容，在这儿省略......

xxx.html.haml 文件

.home-carousel{style: "position: relative"}
  = partial "/includes/home/model_qr_code.html.haml"
  - data_with_i18n.home_carousel.each_with_index do |item, index|
    .hero{:class => index == 0 ? "active index-#{index}": "index-#{index}", :style => "background-image: url(#{item.background_image.desktop})"}
      .hero-content
        .hero-content-left
          - if item.feature
            %a{href: item.feature.href, style: "display: inline-block; cursor: #{item.feature.clickable ? 'pointer': 'default'}"}
              %span{class: item.feature.classes}
                = partial item.feature.icon || "/images/new-home/desktop/20231228-update/stars-icon.svg"
                %span{style: "margin: 0 4px"}= item.feature.text
                - if item.feature.clickable
                  = partial "/images/icons/slp-caret-right.svg"
          .hero-content-left-title
            %h1{:style => "#{item.title.style}"}= item.title.text
          ......其他代码省略......

所以猜测了一下，整个的逻辑应该是 xxx.html.haml 文件中的代码对 xxx.yml 文件中的内容进行循环，读取 xxx.yml 文件中的 title当作 h1 标签，做出这个判断的原因是代码：

data_with_i18n.xxx.each_with_index do |item, index|

虽然看不懂这是哪个编程语言的语法，但是看样子是个循环。第一步算是迈出去了，代码找到了。接下来就是要修改了。

修改代码

代码查找容易，修改难啊。看到前面的代码，就蒙蔽了，从来没见过这种类型的代码，因此秉持“看不懂的代码不能乱修改”，玩意给网站搞崩溃了怎么办，那就真的“跑路了”。突然想起来，随着 AIGC 的发展，各种 Copilots 满天飞，都说要替代程序员，能写也能改。然后看到我已经在 Cursor 中安装的一个 AI 助手——驭码CodeRider。

驭码CodeRider 是极狐GitLab 公司自研的 AIGC 产品，是一款 AI 编程与软件智能研发助手。在 AI 编程方面，可以进行代码补全、代码解释、代码生成、单元测试生成等，此外由于是极狐GitLab 自家产品，充分发挥了“近水楼台先得月”的优势，和极狐GitLab 进行了集成，用 AI 来处理 Issue、MR 和 CI/CD 等。

驭码CodeRider 是一个插件，可以直接在主流 IDE，诸如 VS Code、JetBrains 全家桶中使用。当前该产品全面开启了免费试用，登录官网简单申请即可使用。

我在 Cursor 的插件中心直接安装了。关于驭码CodeRider 在 Cursor 中的使用，可以查看文章在 Cursor 中使用驭码CodeRider 进行 AI 编程。

安装完毕以后，就能看到使用界面了：

于是选中了上面那“一坨”代码，点击了驭码CodeRider 的 Explain Code，于是驭码CodeRider 就开始洋洋洒洒的对代码进行解释：

一看这么多英文，我就让驭码CodeRider 用中文给我解释一下：

接下来我就进入了整体，我就问，上面的代码里面能看出是不是把 title 转换成了 h1 标签：

啥也不说了，AI 说的和我这个小白判断的是一样的。接下来就是关键时刻，我就问驭码CodeRider，如果我只想让第一个 text 的内容转换成 h1 标签，其他的不要，代码该怎么写？

我的提示词是：

如果要把这段代码改成，只有循环中的第一个进行 h1 标签的转换，后面的不用转换，该如何处理？

驭码CodeRider 的回复是：

要将这段代码修改为只有循环中的第一个 title 使用 <h1> 标签，而后续的 title 不使用 <h1> 标签，可以通过在循环中添加条件判断来实现。具体来说，可以在循环中检查当前的 index 是否为 0，如果是，则使用 <h1> 标签，否则使用其他标签（例如 <h2> 或 <span>）。

并且给出了修改后的代码：

.home-carousel{style: "position: relative"}
  = partial "/includes/home/model_qr_code.html.haml"
  - data_with_i18n.home_carousel.each_with_index do |item, index|
    .hero{:class => index == 0 ? "active index-#{index}": "index-#{index}", :style => "background-image: url(#{item.background_image.desktop})"}
      .hero-content
        .hero-content-left
          - if item.feature
            %a{href: item.feature.href, style: "display: inline-block; cursor: #{item.feature.clickable ? 'pointer': 'default'}"}
              %span{class: item.feature.classes}
                = partial item.feature.icon || "/images/new-home/desktop/20231228-update/stars-icon.svg"
                %span{style: "margin: 0 4px"}= item.feature.text
                - if item.feature.clickable
                  = partial "/images/icons/slp-caret-right.svg"
          .hero-content-left-title
            - if index == 0
              %h1{:style => "#{item.title.style}"}= item.title.text
            - else
              %span{:style => "#{item.title.style}"}= item.title.text
          .hero-content-left-desc
            .hero-content-left-desc-item{:style => "#{item.subtitle.style}"}= item.subtitle.text
          .hero-content-left-action
          ......太长删除了......

让你们看一下 AI 回复的震撼场面：

核心代码其实就是下面的几行：

- if index == 0
  %h1{:style => "#{item.title.style}"}= item.title.text
- else
  %span{:style => "#{item.title.style}"}= item.title.text

因为我懂了这个看不懂是哪种编程语言的语法，原来 if else 是这么写的。上面的代码，其实就是做了一个判断，循环时把第一个的 text 转换成 h1 标签，其他的都转换成 span。

跟同事确认了一下，转换成 span 就可以，因为网页上已经有 h2 h3 标签了，没必要再加了。于是就到了最后一步了。

提交代码

提交代码就太简单了，直接按照下面的流程就行：

# 先创建一个分支，不能在 main 上霍霍啊
git ck -b h1-modify

# 修改代码后，将代码提交
git add . && git commit -m "delete multiple h1 label" && git push orign h1-modify

由于公司是以极狐GitLab 作为源代码托管平台的，所以直接在界面上创建一个 MR，创建完毕自动运行 CI/CD，通过之后，找代码审核人员对代码审核，没有问题之后合并到了主分支，然后执行了部署操作。最后在 PROD 上做了检查，符合需求提出者的预期。至此，这个需求就圆满结束了。

结束语

如果对于某个产品的代码不熟悉的时候，贸然修改代码带来的后果可能还不如不修改，就让其“带 bug 运行”。但是在 AI 的帮助下，能快速读懂代码的逻辑，然后给出代码建议，这样对于了解产品、需求就更加容易了。

在驭码CodeRider 的帮助下，我自己的研发信息又增强了一步，我决定要用驭码CodeRider 去做下一个需求！