在键盘敲击声里埋头苦干的我们，常常忽略了手指需要的“小憩”。Ru果说每一次保存douNeng换来一条活泼的小金鱼，那该是怎样的惊喜？DevFish 正是这样一款把“休息”包装成“养鱼”的 VSCode 小伙伴，让我们在写代码的间隙，也Neng享受一场视觉与心情的双重慰藉。

为什么要在编辑器里“养鱼”？

程序员的工作空间往往被两种极端占据：一边是炽热的 CPU 烤箱，另一边是永远敲不完的键盘。长时间盯着屏幕、频繁的 Ctrl+C / Ctrl+V 循环，会让大脑进入一种近似“卡顿”的状态。研究表明，适当的短暂停顿Ke以提升注意力、降低错误率，却总是被忙碌冲淡。

于是我决定把“摸鱼”这件事正规化：不再偷偷打开网页，而是在 IDE 里直接种下一片水草，让几条可爱的小鱼儿在侧边栏自由游弋。每次保存前，只需喂一次食——这不仅是一种仪式感，geng是一种提醒：别忘了给自己加点油。

AI 的加持——从创意到落地只差一步

我把整个需求交给了 ChatGPT：“帮我写一个Neng在 VSCode Webview 中展示 Canvas 动画、还Neng响应快捷键喂食的插件”。AI 给出的方案立刻变成了代码雏形：模型层、视图层、控制层分明；动画用原生 Canvas 绘制；命令通过 VSCode API 注入。

kan着 AI 把抽象想法转化为可运行的 TypeScript，我不禁感慨：“危Yi~”。而真正让这套系统活起来的是我对细节的打磨——比如给每条鱼设计独特的情绪指数、让泡泡出现时配合轻柔音效。这份合作，让插件从概念走向实用。

技术拆解：从结构到核心算法

整体架构采用经典的 MVC 思想：

// Model 
├── Fish.ts          // 鱼类属性 & 行为
├── Tank.ts          // 水缸容器 & 管理
└── StorageService  // 本地持久化
// View 
├── AquariumProvider // Webview 提供者
├── HTML/CSS         // UI 框架
└── Canvas           // 动画渲染
// Controller 
├── fishCommands     // 鱼相关指令
├── breakCommands    // 休息触发指令
└── wisdomCommands   // 智慧提示指令

添加鱼：

TypeScript + VSCode Webview + Canvas

记住：在执行 Ctrl+S 前，请先喂一下小鱼儿。

按下 Ctrl+Shift+P 唤出命令面板，即可输入 “Dev Fish” 开启插件。

安装完毕后你会在侧边栏kan到全新的“水族箱”。

🐟 鱼儿运动背后的数学公式

class Fish {
  private baseVelocityX: number;
  private baseVelocityY: number;
  private speedMultiplier: number = 1;
  update: void {
    const actualVelocityX = this.baseVelocityX * this.speedMultiplier;
    const actualVelocityY = this.baseVelocityY * this.speedMultiplier;
    this.x += actualVelocityX * deltaTime;
    this.y += actualVelocityY * deltaTime;
    this.handleBoundaryCollision;
    this.updateHappiness;
    this.updateHunger;
    this.updateBubble;
  }
  private handleBoundaryCollision: void {
    const tankWidth = Tank.WIDTH;
    const tankHeight = Tank.HEIGHT;
    if  {
      this.baseVelocityX *= -1;
      this.x = Math.max);
    }
    if  {
      this.baseVelocityY *= -1;
      this.y = Math.max);
    }
  }
}

这里采用的是Zui基础的线性运动模型，再乘以一个「状态乘数」来模拟鱼儿因饥饿或开心而产生的加速/减速。碰到水槽边缘时会自动反弹，让画面geng有真实感。

💭 泡泡出现与隐藏的状态机

class BubbleStateMachine {
  private state: 'showing' | 'hiding' = 'hiding';
  private lastStateChangeTime: number = Date.now;
  private showDuration: number = 3000;   // 泡泡显现时长
  private hideDuration: number = 5000;   // 隐藏时长
  update: void {
    const now = Date.now;
    const elapsed = now - this.lastStateChangeTime;
    if  {
      if  {
        this.state = 'hiding';
        this.lastStateChangeTime = now;
      }
    } else {
      if  {
        this.state = 'showing';
        this.lastStateChangeTime = now;
        this.bubble = this.getRandomBubble;
      }
    }
  }
  isVisible: boolean {
    return this.state === 'showing';
  }
  private getRandomBubble: Bubble { /* ... */ }
}

通过简单的计时器切换，「显示」与「隐藏」两种状态交替出现，使得水面偶尔冒出几颗小气泡，给人一种微风拂面的错觉。

⏱️ 防抖与节流——让渲染geng流畅

// 防止事件触发过于频繁
class EventThrottler {
  private lastExecutionTime: number = 0;
  private throttleInterval: number = 100; // ms
  throttle => void): void {
    const now = Date.now;
    if  {
      callback;
      this.lastExecutionTime = now;
    }
  }
}
// 示例：键入代码时让鱼儿Zuo出“小惊讶”
const throttler = new EventThrottler;
vscode.workspace.onDidChangeTextDocument => {
   throttler.throttle => {
       tank.fish.forEach);
   });
});

Ru果每一次文本变化dou去刷新动画，会导致帧率骤降。上面的节流逻辑确保每百毫秒Zui多执行一次geng新，让 UI 保持丝滑。

🚀 开始养鱼吧 —— 快速上手指南

安装插件：打开 VSCode 市场，搜索 "Dev Fish", 点击「安装」。当前版本兼容 VSCode 1.105+

打开水族箱： 使用快捷键 Ctrl+Shift+P → Dev Fish: Open Aquarium

喂食规则： 每次点击「保存」 前，在编辑区输入任意字符后按下「Enter」，系统会自动为所有活跃鱼儿加一点「饱腹度」。若忘记喂食，鱼儿会慢慢变得暗淡并发出轻微哀鸣提示。

休息提醒： 插件默认每45分钟弹出一次「请稍作休息」对话框，可在设置中自行调节间隔或关闭。

自定义皮肤： 通过 Settings → DevFish → Theme Ke以切换不同风格，甚至上传自己的 SVG 背景图。

💡 心得体会——从「偷懒」到「正经」的蜕变

刚装好插件时我还怀疑自己是不是太寂寞，以至于连一条像素小金鱼dou想安慰自己。但实际使用下来每当kan到它们悠然自得地游动，就仿佛有只无形的小精灵在提醒我：「别太拼命，放轻松。」这种轻度仪式感帮助我在高强度编码期间保持呼吸频率，不再出现手指僵硬或眼睛干涩的问题。

A/B 测试显示，引入 DevFish 后我本周提交 Bug 的数量下降了约27%，代码审查通过率提升了12%。虽然不Neng把所有成果全部归功于几条跳动的小尾巴，但它确实提供了一层心理暗示，让我geng愿意遵守自己的「休息 OKR」。也许，这正是 AI 与人类协同工作的Zui佳范例：AI 给出实现方案，人类负责赋予意义和情感。

🔎 SEO 小贴士 —— 如何让你的技术博客geng易被搜索引擎捕获？

"VSCode 插件", "TypeScript Canvas", "程序员休息工具", "AI 辅助开发" 等词汇自然嵌入标题、副标题以及正文前200字内，提高权重。

🌈 —— 把玩味融进工作，让效率和乐趣并行不悖

Ai Yi经Neng够帮我们完成大量重复性编码任务，那么为何不让它也帮我们管理碎片时间呢？DevFish 正是这样一个桥梁，把kan似无关紧要的「摸鱼」行为转化为正式且可量化的休息仪式。它用简洁却不失趣味的动画提醒我们：「别忘了喂食，也别忘了给自己充电。」Ru果你Yi经厌倦了无止境地敲击键盘，不妨点开 VSCode 市场搜索一下把这只小金鱼带回你的工作台，让它陪伴你一起写出geng干净、geng少 BUG 的代码吧！

©2026 DevFish 项目组 | 如有任何建议，请前往 GitHub 提 Issue。

---