AI 最佳实践全栈式从0到1开发个人博客系统

以下是「豆包 MarsCode 体验官」优秀文章，作者我喺小VIE。

前言

近年来随着人工智能（AI）大模型的迅猛发展，大模型在自然语言处理、计算机视觉、语音识别等领域的表现逐渐达到甚至超越人类的水平。在大模型的应用场景之下，如智能客服、阅读写作、图像生成等也随之进入生活提高工作效率。在编程领域中，也不断涌现出各类基于大模型的编程工具和开发平台，为开发者提升工作效率——豆包MarsCode 就是其一。

豆包MarsCode 于2024年6月底发布，我开始了解到并体验使用豆包MarsCode 则缘于一次巧合。作为一名开发者，常年孜孜不倦于后端开发，也鲜少接触其他的编程语言。当有一天我冒出个想法，想要搭建自己的个人博客时，于是我将视野朝向了前端。也就是两个半月的时间，我完成了前端基础的学习。在博客系统开发的起步之初，恰巧我了解到了豆包MarsCode。在初步体验了豆包MarsCode 的 AI 能力后，我决定借助豆包Marscode 的力量来完成我的个人博客系统。

在本文中，我将带领各位小伙伴了解豆包MarsCode 编程助手的基本使用以及豆包MarsCodeIDE 的操作体验。之后在博客系统开发中，将分为博客系统的后端 API 服务、前端 CMS、前端 Web 三大部分叙述，并且全程使用豆包MarsCode IDE 完成项目开发。拭目以待一下，如何全栈式地从0到1开发个人博客系统吧！

一、豆包MarsCode 介绍

豆包MarsCode，顾名思义它是基于豆包大模型衍生打造的智能编程开发工具。豆包大模型即字节跳动自研的 AI 大模型。至于 “MarsCode”，虽然官方没给出说明，不过以我的理解和体验想必是 “Master Code” 的意思，即“掌握代码”。 

1.1 功能介绍

豆包MarsCode 具备编程助手和云端集成开发环境 Cloud IDE 两种形态。当然无论是编程助手还是 Cloud IDE，它们都提供以下能力：

• 代码补全：根据当前代码或通过代码注释，自动补全后续代码片段。
• 代码生成：根据自然语言描述生成对应的代码片段。
• 代码编辑：编辑指定代码，包括重构、优化、修改逻辑等。
• 代码解释：解释代码片段，或理解整个项目工程。
• 代码注释生成：生成函数级注释或行间注释。
• 单元测试生成：为指定代码片段生成单元测试。
• AI 修复：发现代码中的问题并修复。
• AI 问答：针对研发领域定向优化问答质量，提供更精准的问答结果。

可见豆包MarsCode 提供的能力是十分多样的，足够应对我们开发中的大部分场景了。在后面的个人博客开发中也会逐一对这些功能进行应用、演示和讲解，感受豆包 MarsCode 强大的 AI 能力。

1.2 注册豆包Marscode

在正式开始豆包MarsCode 的使用之前，还需要先拥有一个账号。如果没有则跟随以下步骤注册吧。

1. 进入豆包MarsCode 官方网站：www.marscode.cn/
2. 在官网首页顶部右上角点击“登录”按钮。

1. 在登录页填写信息注册登录或通过“稀土掘金”授权登录。

1.3 安装插件

豆包MarsCode 编程助手需要在本地 IDE 中安装后才能使用，支持多种编程语言，目前可以在 Visual Studio Code 和 JetBrains IDE 的插件市场中搜索到并安装使用。豆包 MarsCode IDE 则无需安装，它是在云端的集成开发环境。下面分别介绍在这两大集成开发环境应用中如何安装豆包 MarsCode 编程助手。

1.3.1 Visual Studio Code

Note：支持 Visual Studio Code 1.67.0 及以上版本。

1. 打开 Visual Studio Code，点击左侧导航栏中的 Extensions（扩展）。
2. 在插件市场搜索 “MarsCode” 关键词，找到 MarsCode: AI Coding Assistant。
3. 点击 Install（安装）插件。
4. 重启 Visual Studio Code。
5. 使用快捷键（Windows: Ctrl + U; macOS: Command + U）打开豆包 MarsCode 编程助手侧边对话框。
6. 点击“登录”按钮，登录你的账号。

1.3.2 JetBrains (IntelliJ IDEA)

Note：支持 JetBrains 产品如 IntelliJ IDEA 221.5080.210 及以上版本。

1. 打开 IntelliJ IDEA，点击左侧 Plugins（插件）。
2. 在插件市场搜索 “MarsCode” 关键词，找到 MarsCode: AI Coding Assistant。
3. 点击 Install（安装）插件。
4. 重启 IntelliJ IDEA。
5. 使用快捷键（Windows: Ctrl + U; macOS: Command + U）打开豆包 MarsCode 编程助手的侧边对话框。
6. 点击“登录”按钮，登录你的账号。

1.4 插件配置

这里我们演示在 Visual Studio Code 中配置豆包 Marscode 编程助手（IntelliJ IDEA 的则大同小异）。

1. 在 MarsCode: AI Coding Assistant 插件页点击齿轮图标。
2. 在 Settings（设置）中设定对话语言。
3. 在 Settings（设置）中可以选择开启“代码补全 Pro”。
4. 其他选项根据需要启用或禁用。

二、豆包MarsCode IDE 介绍

前面我们除了提到的豆包MarsCode 编程助手，还有云端集成开发环境——即豆包MarscodeIDE。豆包Marscode IDE 原生内置 AI 编程助手，配备开箱即用的开发环境，可以让开发者更加便捷且专注于各类项目的开发。 

2.1 核心优势

在我的项目起步之初，我就直接决定选择