CodeSnippetBox：我与 CodeBuddy 合作打造的代码片段管理器

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

起因：想要一个“能长期用”的代码片段盒子

平常做项目，经常会有一些值得留存的代码：有的是自己调试出来的封装逻辑，有的是从论坛或博客里翻到的思路，有的则是 UI 组件写得太顺手，想着后面复用一下。

原来我是用本地 Markdown + Gist 管着的，但随着东西多了，慢慢就乱了——没有分类，查找也不太方便，甚至连高亮都没有，加个导出也麻烦得很。

于是我干脆想自己写一个。反正我 Vue3 用得挺熟，就拿它来写个前端；再加上 Prism.js 实现代码高亮，搭个黑色极简风界面，顺便练下组件设计。

打开 CodeBuddy，我直接和它讲清楚了需求：

我想做个叫 CodeSnippetBox 的工具，用 Vue3 + Prism.js，支持代码片段的添加、语法高亮（多语言），分类管理（按项目/语言）、搜索、收藏、导出，UI 偏极简暗色风，最好代码块还能带点阴影，数据支持本地或云端同步。

本来以为它会跟我确认个几句，结果它直接动了起来，一点都不含糊。

初始化阶段：从零开始，没让我操什么心

CodeBuddy 先问我是不是已有项目。当我说“从头来过”，它立刻开始构建流程。

直接用的是这个命令：

npm init vue@latest code-snippet-box --default

然后提示我进目录后跑 npm install，紧跟着又接着把相关依赖都装了上去：

npm install prismjs vuex pinia element-plus

从这个节奏能感受到，它不是那种“慢悠悠给你个思路”的助手，而是那种“一边听你说一边已经在动手”的类型。效率很高。

UI 和语法高亮：风格和实现都挺对我胃口

项目刚拉完，它就开始上样式了。我其实只说了“黑色 + 极简”，没讲太多细节，但它直接整出了一套偏 VS Code Web 风格的界面，视觉感挺规整，还有阴影和背景层次。

Prism.js 的接入也很利落，直接引入样式文件：

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'

它还帮我把常用的语言都预置了，比如 JavaScript、Python、HTML、CSS 等，免去了我一个个引的麻烦。

分类管理：结构合理，基本一看就明白

我当时提到要按项目、语言来分类，它用的是 Pinia 来处理状态。我原本还想手写个分类逻辑，结果它直接给出了一段代码结构，清爽且可扩展：

export const useSnippetStore = defineStore('snippet', {
  state: () => ({
    snippets: [],
    categories: []
  }),
  getters: {
    getByLanguage: (state) => (lang) =>
      state.snippets.filter((s) => s.language === lang),
  },
  actions: {
    addSnippet(snippet) {
      this.snippets.push(snippet)
    }
  }
})

没有过多嵌套，也没有乱封装，基本拿来即用。我只在个别变量命名上做了点个人偏好修改。

搜索收藏导出：该有的全有，逻辑上很稳

我后面又提了一嘴“想加个搜索功能”，结果它很快就把搜索输入框和收藏按钮一并安排上了。

<!-- 片段收藏按钮 -->
<button @click="toggleFavorite(snippet)">
  <span v-if="snippet.favorite">★</span>
  <span v-else>☆</span>
</button>

每个代码片段还多了一个收藏字段，可以手动切换状态。

导出功能也不含糊，它建议支持 .txt 和 .json 两种格式，还自动写好了生成下载的逻辑，考虑得挺周到的。我一开始甚至没想到要考虑导出格式选项。

数据持久化：本地方案也打磨得够细

虽然云同步我只是顺口提了句“可扩展”，但它却已经帮我把本地存储机制做了出来。用的是最基础的 localStorage 搭配 watch，写法很清晰：

watch(
  () => snippetStore.snippets,
  (newVal) => {
    localStorage.setItem('snippets', JSON.stringify(newVal))
  },
  { deep: true }
)

这样即使刷新页面，之前加的片段也都还在。就这种细节，说明它在做的过程中已经预判了用户操作习惯，不只是满足“能跑”，而是做到“用得住”。

小结：这不是工具，更像是搭档

说实话，之前我对 AI 写代码的印象还停留在“辅助补全”阶段，没想到 CodeBuddy 已经可以主导整个项目了。

从搭建、组件拆解、样式设计到本地化存储，几乎每一步它都能主动推进，而且写出来的结构、语义、交互设计都不是那种“生硬拼接”的模板味，反而挺自然。

它不会跟你废话太多，但思路清晰、动作快，适合那种“我知道我要做啥，只要你帮我弄”型开发者。

下一步我打算上线部署，并顺带请它帮我补上 Markdown 导出和 GitHub Gist 同步的部分。如果顺利，这个 CodeSnippetBox 应该会成为我自己日常开发中的一个常驻工具。

CodeBuddy，不是工具，是拍得上节奏的队友。

它写的，不止是代码，而是“我正想要的那个解决方案”。

—— End ——