豆包Marscode体验官-使用marscode，我3 分钟实现了一个 hacknews 个人版，效果还凑合

我正在参加「豆包MarsCode初体验」征文活动，活动链接：传送门

我今天的任务是想使用 marscode 来做一个 hack news 个人版，主要是来体验一下 marscode的开发体验，早就听说了字节出了一个屌炸天的编辑器，可以直接在浏览器上开个 ide，而且，还有体验不输 GitHub copilot 的代码助手，所以就迫不及待的来体验一下，看看这个豆包的 marscode 是否能够和 GitHub copilot 干上一番。

废话不多说，通过活动链接中的注册地址，注册了一个账号，因为我掘金是登录的，因此，我直接使用掘金注册，这个 oAuth登录体验，先赞一个，省去了我填写手机号的麻烦。

创建项目

因为我创建的比较快，前面那一步没有截图，但是印象中只能创建5 个项目来着，可能不准，但是问题不大，一般说 SAAS 类产品给到 2 个体验的 project 都已经很不错了，豆包直接给到 5 个，还是挺大气的的。创建的hacknews 项目如下：

一个配色相对来讲比较舒服的 ide，字体感官还是不错的，和我本地的 ide 又得一拼。先看看 ide 的主要功能：

左侧文件管理，这个可以收起，已提供更大的编码区域
顶部切换项目。
右侧有 AI 助手
搜索
git 管理
webview 看效果
插件管理

总体来讲，作为一个 ide，实际上还是有点单薄的，没看到调试在哪里，这个可能还没开发进来，但是 package.json 中去 debug 运行也是 ok 的。不过，整体来说，作为快速开发，问题不是太大。我使用的是 next.js 模板来创建一个项目。

初始化之后，直接把 page.tsx 里面的内容全部干掉，然后使用对话的方式，让 AI 助手给我生成了一个 Hack news 的列表页面。发现他没有给实际的地址，这里我又使用对话的方式让他把地址修改为真实地址。 0.5 分钟，修改好了，然后列表出来了，不过，样式嘛，却不怎么好看，如是乎，我希望他帮我调整下，因为 next.js。结果他直接使用一些不是 tailwind css 的 classname，很显然是没有效果的。

猜测：这里应该是出现幻觉了，marscode 没有理解项目的上下文，如果他知道这个 workspace 是 next.js 的项目，而且配置了tailwind css 的话，理论上，他应该是直接使用 tailwind css 的 classname 来的。

因此，我再次告诉他，需要使用一个 tailwind css 的样式来优化，好在，marscode非常牛逼的一点在于，修改之后，可以马上看到效果，如果你觉得调整的效果不满意，可以直接 retry，这个太好用了。

如是，经过 5 此对话最终的效果是：

还有了动效，鼠标悬停在上面会有动效，marscode还是挺懂我的嘛！

代码写完之后，我想体验一下 git 的功能，将代码推送到 GitHub 上面去。

shell 复制代码

git add .
git commit -m "init project"

此时会让你配置 git 的邮箱和用户名，按照提示配置下。然后 git push，会触发让你绑定 github 账户的流程，此间会弹出一个 code，要复制一下，等会授权要用到。然后很轻松，就绑定了

但是 git push 的时候，就是 push 不上去，这个地方应该有一个 bug，我已经配置成功了，但是最后的时候，git push，发现代码依然 push 不上去，虽然我输入了正确的用户名和密码，但是这个方式，在 2021 年的时候，GitHub 就把这个路数给堵上了，因此，我没法将代码 push 到 GitHub 上了。

那么，我只能将 page.js 的代码贴出来了，分享给大家了。

js 复制代码

import Image from "next/image";

export default async function Home() {


  const HACK_NEWS_URL = "https://hacker-news.firebaseio.com/v0/topstories.json";
  const HACK_NEWS_ITEM_URL = (id)=>`https://hacker-news.firebaseio.com/v0/item/${id}.json`;
  
  /**
   * get hack news todays items
   */
  async function getPosts() {
    const res = await fetch(HACK_NEWS_URL);
    const data = await res.json();
    const posts = await Promise.all(
      data.slice(0, 10).map(async (id) => {
        const postRes = await fetch(HACK_NEWS_ITEM_URL(id));
        const post = await postRes.json();
        return post;
      })
    );
    return posts;
  }

  const posts = await getPosts();

  return (
    <div className="container">
      <h1 className="text-2xl p-4 font-bold sticky top-0 z-1000 bg-white shadow">Hacker News</h1>
      <ul className="list-disc list-inside divide-y divide-gray-200">  
        {posts.map((post) => (
                <li key={post.id} className="mb-2 list-none">
                  <a href={post.url} className="block py-2 px-4 text-gray-800 hover:text-gray-900 rounded-lg shadow-md transition duration-300 ease-in-out hover:scale-105">{post.title}</a>  
                </li>
        ))}
      </ul>
    </div>
  );
}

最后，要提一嗓子的是，marscode的代码提示，响应非常快，比 GitHub copilot 要快不少。这个体验的赞一下。

而且，也是支持 markdown 补全的。

这个就非常 nice 了，且不说准不准，续写的质量如何，就冲已经支持了这个能力，就甩某些友商一大截了，而且，我也相信，marscode会完善这理的续写质量，在后续可以理解仓库的基础上做推荐，那么质量一定会上一个档次。

总结

这次使用marscode的体验，我感受，online ide 还是有比较不错的前景的，如果让我选择一款在线编辑器作为我日常工作的环境，那么我一定选择marscode，因为字节出的品质还是相当有保证的，而且体验整体下来还是比较丝滑，基本的功能也都满足了。