免費AI編程助手
原標題：起猛了，編程時聽到有人陰陽我
我想，我大抵是病了，
每天一想到要上班，
我的身體就像中了魔咒似的，
沉重得動彈不得。
拖延、倦怠、提不起勁，
似乎所有負面狀態(tài)都在向我襲來，
內心深處仿佛在吶喊：
“要不今天就劃水摸魚算了？”
可偏偏，這種自我放縱卻讓我更焦慮。既然現(xiàn)實中沒人推我一把，那我就自己搞一個 VSCode “程序員毒舌伴侶”！在我渾身班味，只想躺平時，它能用自嘲式的黑色幽默幫我滿血復活。
當我想放棄時，它會適時地提醒：“你看著空白屏幕發(fā)呆的樣子，還挺有藝術感的。”
當我 p 人屬性大爆發(fā)時，它會忍不住嘲諷：“打算拖到明年再寫完這段代碼嗎？”
當我終于完成一個艱難的任務時，它也會陰陽怪氣道：“恭喜你，離下一個 bug 又近了一步！”
如果你也像我一樣時常需要一點推力，那就繼續(xù)看下去吧，嘗試用豆包MarsCode 來 DIY 一個能隨時“罵醒”你的“程序員毒舌伴侶”！
前置知識
要學習和理解這個關于創(chuàng)建“程序員毒舌伴侶”VSCode插件的教程，你需要具備以下編程基礎和技能：
編程語言和框架
- JavaScript/TypeScript：教程中使用 TypeScript 編寫插件代碼，因此你需要熟悉 JavaScript 和 TypeScript 的基本語法和特性，包括變量、函數(shù)、模塊、類等。推薦課程：《JavaScript 入門課程》、《JavaScript 基礎實戰(zhàn)》、《JavaScript零基礎入門到進階》、《TypeScript 入門到進階課程》、《TypeScript快速入門（通俗易懂）》
- Node.js：了解 Node.js 的基本概念和使用方法，因為 VSCode 插件通常是在 Node.js 環(huán)境下運行的。你需要知道如何使用 npm 安裝和管理依賴包。推薦課程：《Node.js 入門課程》、《小白學前端：Node.js快速入門視頻課程（通俗易懂）》
VSCode 插件開發(fā)
- VSCode API：熟悉 VSCode 擴展 API，了解如何使用 VSCode 提供的各種 API 來訪問編輯器的功能，例如獲取診斷信息、監(jiān)聽文件事件、注冊命令等。
- Yeoman 和 VSCode Extension Generator：了解如何使用 Yeoman 和 VSCode Extension Generator 來快速生成 VSCode 插件的模板項目，包括項目的結構和基本配置。
開發(fā)工具和環(huán)境
- VSCode ：熟練使用 VSCode 編輯器，了解其基本功能和插件機制。
- 命令行工具：能夠使用命令行工具（如 npm、Yeoman）來執(zhí)行項目生成、依賴安裝、調試等操作。推薦課程：《Linux命令行與Shell從入門到精通》
其他相關知識
- 事件監(jiān)聽和處理：了解如何在插件中監(jiān)聽和處理各種事件，例如文件創(chuàng)建、刪除事件，窗口焦點變化事件等。
- 音頻播放庫：了解如何使用第三方庫（如
play-sound）來播放音頻文件，并能夠處理相關的錯誤和回調。 - TypeScript 類型聲明：了解如何為第三方庫編寫 TypeScript 類型聲明文件（
.d.ts），以便在 TypeScript 項目中正確使用這些庫。
軟件工程知識
- 代碼組織和注釋：能夠合理組織代碼結構，并編寫清晰的注釋，以便于代碼的可讀性和維護性。
- 調試技能：掌握基本的調試技能，能夠使用 VSCode 的調試工具來調試插件代碼，查找和修復問題。
具備以上基礎和技能，將有助于你更好地理解和應用教程中的內容，從而成功地創(chuàng)建一個“程序員毒舌伴侶”VSCode插件。
“程序員毒舌伴侶”開發(fā)
1. 安裝環(huán)境
在開發(fā)“程序員毒舌伴侶”前，完成 Node.js 和 Yeoman 及 VSCode Extension Generator 的安裝：
npm install -g yo generator-code2. 生成插件模板
使用 Yeoman 生成一個 VSCode 插件模板，按照提示完成配置。建議類型選擇 TypeScript。
yo code3. 安裝 play-sound 庫
在插件中安裝 play-sound 庫用于播放聲音。
npm install play-sound4. 創(chuàng)建 sounds 文件夾
在項目根目錄下創(chuàng)建 sounds 文件夾，用于存放需要播放的聲音。
5. 編寫代碼
打開 src/extension.ts 文件，我們需要在這里添加、修改代碼。需要注意的是，代碼中播放聲音的文件名需要和第 4 步存放的聲音文件一致。
import * as vscode from 'vscode';
import * as path from 'path';
import play from 'play-sound';
// 創(chuàng)建音頻播放器
const player = play({});
// 設置時間限制
const TIME_LIMIT = 30 * 1000;
// 記錄窗口是否聚焦
let isWindowFocused = true;
// 記錄累計活動時間的變量
let accumulatedActiveTime = 0;
export function activate(context: vscode.ExtensionContext) {
// 注冊命令
let disposable = vscode.commands.registerCommand('extension.checkProblems', () => {
// 獲取所有診斷信息
const allDiagnostics = vscode.languages.getDiagnostics();
// 統(tǒng)計問題數(shù)量
let problemCount = 0;
allDiagnostics.forEach(([_, diagnostics]) => {
problemCount += diagnostics.length;
});
// 如果問題數(shù)量大于 0，播放警告聲音
if (problemCount > 0) {
playSound('a.mp3');
} else {
playSound('b.mp3');
}
});
context.subscriptions.push(disposable);
// 監(jiān)聽文件創(chuàng)建事件
vscode.workspace.onDidCreateFiles(() => {
playSound('c.mp3');
});
vscode.workspace.onWillDeleteFiles(() => {
playSound('d.mp3');
});
// 監(jiān)聽窗口焦點變化事件
vscode.window.onDidChangeWindowState((event) => {
isWindowFocused = event.focused;
});
setInterval(() => {
if (isWindowFocused) {
accumulatedActiveTime += 5000; // 累加活動時間
console.log('累計活動時間:', accumulatedActiveTime / 1000, '秒');
}
if (accumulatedActiveTime >= TIME_LIMIT) {
playSound('e.mp3');
accumulatedActiveTime = 0; // 重置累計活動時間
}
}, 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(`無法播放聲音: ${err}`);
}
});
}
export function deactivate() { }當你遇到看不懂的代碼時，可以詢問豆包MarsCode AI 助手。
例如：
「vscode.languages.getDiagnostics()的目的是什么」，AI 會告訴你，是為了獲取文件的診斷信息，如警告、錯誤等。
如果想修改代碼，也可以在編寫注釋后等待自動補全代碼。
6. 創(chuàng)建 TypeScript 類型聲明文件
在項目根目錄下創(chuàng)建 typings 文件夾，并在里面創(chuàng)建 play-sound.d.ts 文件，編寫以下代碼：
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 文件的作用，同樣可以詢問豆包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. 調試“毒舌伴侶”
完成之后就可以開始調試我們的“毒舌伴侶”：
點擊上方的運行，選擇「啟動調試」，啟動調試后，會自動打開一個 VSCode 窗口，我們隨便選擇一個本地項目打開。
9. 體驗“毒舌伴侶”
打開項目后，可以隨意嘗試創(chuàng)建文件、刪除文件以及持續(xù)編碼30秒等工作，過程中就可以感受專屬“程序員毒舌伴侶”對你的“冷嘲熱諷”咯，它不僅能讓你告別拖延，還會讓你在與自己的對話中，找到一絲久違的動力。
開發(fā)至此“毒舌伴侶” 第一版就完成了，稱它為第一版，是因為它現(xiàn)在只支持在連續(xù)編碼一段時間，以及創(chuàng)建文件、刪除文件時鼓勵你。
點擊「豆包MarsCode AI編程助手」即可體驗豆包MarsCode～???
