持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

一、前言

为啥子想更新这个呢，也没啥，就是突然看到来了兴趣就打算试一下，接触下一些没用过的技术，好了，今天就带大家伙简单了解和实验下，一款vscode插件的开发。放心，入门很简单，进阶才困难。

二、过程

1、准备环境和初始化项目

安装脚手架，一会我们用yo来新建一个项目

 npm i  -g yo generator-code

然后我们开始创建一下

yo code

选项默认yes和随便填写就行，后期能在项目里修改的，不过语言我选了javascript。

最终我的选择如下

2、准备开发

创建好的项目结构如下,最重要的是extension.js和packag.json

（1）extension.js

是我们新建的项目主函数功能，里面记载了触发插件后，该执行的函数逻辑，也是我们本期的写代码的地方。

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
        // 下面的语句会在插件被激活时，执行一次
	console.log('Congratulations, your extension "sanwu" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with  registerCommand
	// The commandId parameter must match the command field in package.json
        
        // 这里是注册命令，不过同时需要在package.json里定义，详细的地方我会在另一个文件里叙述
        
	let disposable = vscode.commands.registerCommand('sanwu.helloWorld', function () {
		// The code you place here will be executed every time your command is executed

		// Display a message box to the user
                // 调用弹窗函数，弹出以下语句
		vscode.window.showInformationMessage('Hello World from count!');
	});

	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
function deactivate() {}

// 抛出激活函数和失效函数 
module.exports = {
	activate,
	deactivate
}

（2）package.json

这里放置的是依赖包，命令，还有我们插件的基础配置（这个最重要）,我尽量讲注释写的清楚些。

但是记得package.json里是不能这样写注释的，会导致转义错误。

{
  "name": "sanwu", // 插件名字
  "displayName": "count", // 插件展示名字
  "description": "sanwu.count demo", // 插件描述
  "version": "0.0.1",  // 插件版本
  "engines": {
    "vscode": "^1.71.0" // 最低兼容的vscode版本为1.17.0
  },
  "categories": [
    "Other" // 插件分类为其他
  ],
  
  "activationEvents": [
    "onCommand:sanwu.helloWorld" // 这里记载了插件的激活时机，比如这里是命令激活，可以有多种激活方式
  ],
  "main": "./extension.js", // 我们的主函数入口
  "contributes": {
    "commands": [
      {
        "command": "sanwu.helloWorld", // extension.js注册的命令要在这里声明
        "title": "Hello World" // 这里是输入命令的提示语句
      }
    ]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.71.0",
    "@types/glob": "^7.2.0",
    "@types/mocha": "^9.1.1",
    "@types/node": "16.x",
    "eslint": "^8.20.0",
    "glob": "^8.0.3",
    "mocha": "^10.0.0",
    "typescript": "^4.7.4",
    "@vscode/test-electron": "^2.1.5"
  }
}

（3）运行尝试

进行调试模式，打开了一个新的vscode窗口 ctrl+shift+p 调出输入行，输入hello world，

就能触发以下结果。

（4）新增一个命令

我们在extension.js里activate函数里新增以下代码，注册新命令countTime

const countTime = vscode.commands.registerCommand('sanwu.countTime', function () {
        let i = 0
        setInterval(() => {
                i++
        }, 1000)
        // 这里我们用另一个api
        vscode.window.setStatusBarMessage("设置状态栏的消息-----" +  '你已经浪费了' + i + 's在这里了，快去摸鱼！')
});

同时要在package.json里声明一下，主要是这两个地方

"activationEvents": [
    "onCommand:sanwu.helloWorld",
    "onCommand:sanwu.countTime" // 新增了激活命令
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "sanwu.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "sanwu.countTime", // 新增了命令
        "title": "countT" // 新增了命令显示文本
      }
    ]
  },

同样的，我们打开调试，输入countT

就能调用定时器，间隔1s地在状态栏输入文字啦

三、小结一下

到这里我们已经安装好环境，新建好项目，还尝试运行了和新增了命令，下期我打算完善我的插件demo，功能大概就是监听打开vscode的时间，然后特定场景触发功能这样子，还需要给大家讲解如何打包和发布。

ps: 我的地霊殿__三無，国庆快乐，老铁们。

微信图片_20221001074313.jpg

试开发一款vscode插件（上）

一、 前言