打造“程序員毒舌伴侶”：用豆包MarsCode激發(fā)編程動(dòng)力

原標(biāo)題：起猛了，編程時(shí)聽(tīng)到有人陰陽(yáng)我

我想，我大抵是病了，

每天一想到要上班，

我的身體就像中了魔咒似的，

沉重得動(dòng)彈不得。

拖延、倦怠、提不起勁，

似乎所有負(fù)面狀態(tài)都在向我襲來(lái)，

內(nèi)心深處仿佛在吶喊：

“要不今天就劃水摸魚(yú)算了？”

可偏偏，這種自我放縱卻讓我更焦慮。既然現(xiàn)實(shí)中沒(méi)人推我一把，那我就自己搞一個(gè) VSCode “程序員毒舌伴侶”！在我渾身班味，只想躺平時(shí)，它能用自嘲式的黑色幽默幫我滿(mǎn)血復(fù)活。

當(dāng)我想放棄時(shí)，它會(huì)適時(shí)地提醒：“你看著空白屏幕發(fā)呆的樣子，還挺有藝術(shù)感的。”

當(dāng)我 p 人屬性大爆發(fā)時(shí)，它會(huì)忍不住嘲諷：“打算拖到明年再寫(xiě)完這段代碼嗎？”

當(dāng)我終于完成一個(gè)艱難的任務(wù)時(shí)，它也會(huì)陰陽(yáng)怪氣道：“恭喜你，離下一個(gè) bug 又近了一步！”

如果你也像我一樣時(shí)常需要一點(diǎn)推力，那就繼續(xù)看下去吧，嘗試用豆包MarsCode 來(lái) DIY 一個(gè)能隨時(shí)“罵醒”你的“程序員毒舌伴侶”！

前置知識(shí)

要學(xué)習(xí)和理解這個(gè)關(guān)于創(chuàng)建“程序員毒舌伴侶”VSCode插件的教程，你需要具備以下編程基礎(chǔ)和技能：

編程語(yǔ)言和框架

• JavaScript/TypeScript：教程中使用 TypeScript 編寫(xiě)插件代碼，因此你需要熟悉 JavaScript 和 TypeScript 的基本語(yǔ)法和特性，包括變量、函數(shù)、模塊、類(lèi)等。推薦課程：《JavaScript 入門(mén)課程》、《JavaScript 基礎(chǔ)實(shí)戰(zhàn)》、《JavaScript零基礎(chǔ)入門(mén)到進(jìn)階》、《TypeScript 入門(mén)到進(jìn)階課程》、《TypeScript快速入門(mén)（通俗易懂）》
• Node.js：了解 Node.js 的基本概念和使用方法，因?yàn)?VSCode 插件通常是在 Node.js 環(huán)境下運(yùn)行的。你需要知道如何使用 npm 安裝和管理依賴(lài)包。推薦課程：《Node.js 入門(mén)課程》、《小白學(xué)前端：Node.js快速入門(mén)視頻課程（通俗易懂）》

VSCode 插件開(kāi)發(fā)

• VSCode API：熟悉 VSCode 擴(kuò)展 API，了解如何使用 VSCode 提供的各種 API 來(lái)訪問(wèn)編輯器的功能，例如獲取診斷信息、監(jiān)聽(tīng)文件事件、注冊(cè)命令等。
• Yeoman 和 VSCode Extension Generator：了解如何使用 Yeoman 和 VSCode Extension Generator 來(lái)快速生成 VSCode 插件的模板項(xiàng)目，包括項(xiàng)目的結(jié)構(gòu)和基本配置。

開(kāi)發(fā)工具和環(huán)境

• VSCode ：熟練使用 VSCode 編輯器，了解其基本功能和插件機(jī)制。
• 命令行工具：能夠使用命令行工具（如 npm、Yeoman）來(lái)執(zhí)行項(xiàng)目生成、依賴(lài)安裝、調(diào)試等操作。推薦課程：《Linux命令行與Shell從入門(mén)到精通》

其他相關(guān)知識(shí)

• 事件監(jiān)聽(tīng)和處理：了解如何在插件中監(jiān)聽(tīng)和處理各種事件，例如文件創(chuàng)建、刪除事件，窗口焦點(diǎn)變化事件等。
• 音頻播放庫(kù)：了解如何使用第三方庫(kù)（如 play-sound）來(lái)播放音頻文件，并能夠處理相關(guān)的錯(cuò)誤和回調(diào)。
• TypeScript 類(lèi)型聲明：了解如何為第三方庫(kù)編寫(xiě) TypeScript 類(lèi)型聲明文件（.d.ts），以便在 TypeScript 項(xiàng)目中正確使用這些庫(kù)。

軟件工程知識(shí)

• 代碼組織和注釋：能夠合理組織代碼結(jié)構(gòu)，并編寫(xiě)清晰的注釋?zhuān)员阌诖a的可讀性和維護(hù)性。
• 調(diào)試技能：掌握基本的調(diào)試技能，能夠使用 VSCode 的調(diào)試工具來(lái)調(diào)試插件代碼，查找和修復(fù)問(wèn)題。

具備以上基礎(chǔ)和技能，將有助于你更好地理解和應(yīng)用教程中的內(nèi)容，從而成功地創(chuàng)建一個(gè)“程序員毒舌伴侶”VSCode插件。

“程序員毒舌伴侶”開(kāi)發(fā)

1. 安裝環(huán)境

在開(kāi)發(fā)“程序員毒舌伴侶”前，完成 Node.js 和 Yeoman 及 VSCode Extension Generator 的安裝：

npm install -g yo generator-code

2. 生成插件模板

使用 Yeoman 生成一個(gè) VSCode 插件模板，按照提示完成配置。建議類(lèi)型選擇 TypeScript。

yo code

3. 安裝 play-sound 庫(kù)

在插件中安裝 play-sound 庫(kù)用于播放聲音。

npm install play-sound

4. 創(chuàng)建 sounds 文件夾

在項(xiàng)目根目錄下創(chuàng)建 sounds 文件夾，用于存放需要播放的聲音。

5. 編寫(xiě)代碼

打開(kāi) src/extension.ts 文件，我們需要在這里添加、修改代碼。需要注意的是，代碼中播放聲音的文件名需要和第 4 步存放的聲音文件一致。

import * as vscode from 'vscode';
import * as path from 'path';
import play from 'play-sound';


// 創(chuàng)建音頻播放器
const player = play({});


// 設(shè)置時(shí)間限制
const TIME_LIMIT = 30 * 1000;


// 記錄窗口是否聚焦
let isWindowFocused = true;


// 記錄累計(jì)活動(dòng)時(shí)間的變量
let accumulatedActiveTime = 0;


export function activate(context: vscode.ExtensionContext) {
  // 注冊(cè)命令
  let disposable = vscode.commands.registerCommand('extension.checkProblems', () => {
    // 獲取所有診斷信息
    const allDiagnostics = vscode.languages.getDiagnostics();


    // 統(tǒng)計(jì)問(wèn)題數(shù)量
    let problemCount = 0;
    allDiagnostics.forEach(([_, diagnostics]) => {
      problemCount += diagnostics.length;
    });


    // 如果問(wèn)題數(shù)量大于 0，播放警告聲音
    if (problemCount > 0) {
      playSound('a.mp3');
    } else {
      playSound('b.mp3');
    }
  });


  context.subscriptions.push(disposable);


  // 監(jiān)聽(tīng)文件創(chuàng)建事件
  vscode.workspace.onDidCreateFiles(() => {
    playSound('c.mp3');
  });


  vscode.workspace.onWillDeleteFiles(() => {
    playSound('d.mp3');
  });


  // 監(jiān)聽(tīng)窗口焦點(diǎn)變化事件
  vscode.window.onDidChangeWindowState((event) => {
    isWindowFocused = event.focused;
  });


  setInterval(() => {
    if (isWindowFocused) {
      accumulatedActiveTime += 5000; // 累加活動(dòng)時(shí)間
      console.log('累計(jì)活動(dòng)時(shí)間:', accumulatedActiveTime / 1000, '秒');
    }


    if (accumulatedActiveTime >= TIME_LIMIT) {
      playSound('e.mp3');
      accumulatedActiveTime = 0; // 重置累計(jì)活動(dòng)時(shí)間
    }
  }, 5000);
}


function getProblemCount(): number {
  const allDiagnostics = vscode.languages.getDiagnostics();
  let problemCount = 0;
  allDiagnostics.forEach(([_, diagnostics]) => {
    problemCount += diagnostics.length;
  });
  return problemCount;
}


function playSound(fileName: string) {
  const soundPath = path.join(__dirname, '..', 'sounds', fileName);
  player.play(soundPath, (err) => {
    if (err) {
      console.error(`無(wú)法播放聲音: ${err}`);
    }
  });
}


export function deactivate() { }

當(dāng)你遇到看不懂的代碼時(shí)，可以詢(xún)問(wèn)豆包MarsCode AI 助手。

例如：

「vscode.languages.getDiagnostics()的目的是什么」，AI 會(huì)告訴你，是為了獲取文件的診斷信息，如警告、錯(cuò)誤等。

如果想修改代碼，也可以在編寫(xiě)注釋后等待自動(dòng)補(bǔ)全代碼。

6. 創(chuàng)建 TypeScript 類(lèi)型聲明文件

在項(xiàng)目根目錄下創(chuàng)建 typings 文件夾，并在里面創(chuàng)建 play-sound.d.ts 文件，編寫(xiě)以下代碼：

declare module 'play-sound' {
  interface PlayOptions {
    player?: string;
  }


  interface Player {
    play(fileName: string, callback?: (err?: Error) => void): void;
  }


  function play(options?: PlayOptions): Player;
  export = play;
}

如果你不知道 play-sound.d.ts 文件的作用，同樣可以詢(xún)問(wèn)豆包MarsCode AI 助手：

7. 修改配置文件

修改 package.json 和 tsconfig.json 文件：

// package.json 文件
{
  "name": "extension-demo",
  "displayName": "extension_demo",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.92.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:extension.checkProblems",
    "*"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension-demo.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "extension.checkProblems",
        "title": "Check Problems"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "vscode-test"
        },
  "devDependencies": {
    "@types/mocha": "^10.0.7",
    "@types/node": "20.x",
    "@types/vscode": "^1.92.0",
    "@typescript-eslint/eslint-plugin": "^7.14.1",
    "@typescript-eslint/parser": "^7.11.0",
    "@vscode/test-cli": "^0.0.9",
    "@vscode/test-electron": "^2.4.0",
    "eslint": "^8.57.0",
    "typescript": "^5.4.5"
  },
  "dependencies": {
    "play-sound": "^1.1.6"
  }
}
// tsconfig.json 文件
{
  "compilerOptions": {
    "module": "Node16",
    "target": "ES2022",
    "outDir": "out",
    "lib": [
      "ES2022"
    ],
    "sourceMap": true,
    "rootDir": "src",
    "strict": true,
    "typeRoots": [
      "node_modules/@types",
      "typings"
    ]
  }
}

8. 調(diào)試“毒舌伴侶”

完成之后就可以開(kāi)始調(diào)試我們的“毒舌伴侶”：

點(diǎn)擊上方的運(yùn)行，選擇「啟動(dòng)調(diào)試」，啟動(dòng)調(diào)試后，會(huì)自動(dòng)打開(kāi)一個(gè) VSCode 窗口，我們隨便選擇一個(gè)本地項(xiàng)目打開(kāi)。

9. 體驗(yàn)“毒舌伴侶”

打開(kāi)項(xiàng)目后，可以隨意嘗試創(chuàng)建文件、刪除文件以及持續(xù)編碼30秒等工作，過(guò)程中就可以感受專(zhuān)屬“程序員毒舌伴侶”對(duì)你的“冷嘲熱諷”咯，它不僅能讓你告別拖延，還會(huì)讓你在與自己的對(duì)話(huà)中，找到一絲久違的動(dòng)力。

開(kāi)發(fā)至此“毒舌伴侶” 第一版就完成了，稱(chēng)它為第一版，是因?yàn)樗F(xiàn)在只支持在連續(xù)編碼一段時(shí)間，以及創(chuàng)建文件、刪除文件時(shí)鼓勵(lì)你。

點(diǎn)擊「豆包MarsCode AI編程助手」即可體驗(yàn)豆包MarsCode～???