试开发一款vscode插件（上）

今天就带大家伙简单了解和实验下，一款vscode插件的开发。放心，入门很简单，进阶才困难。

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

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

 npm i  -g yo generator-code 

然后我们开始创建一下

yo code

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

最终我的选择如下

2、准备开发

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

（1）extension.js

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

const vscode = require('vscode');





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




    console.log('Congratulations, your extension "sanwu" is now active!');







    let disposable = vscode.commands.registerCommand('sanwu.helloWorld', function () {




        vscode.window.showInformationMessage('Hello World from count!');
    });

    context.subscriptions.push(disposable);
}


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)

        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的时间，然后特定场景触发功能这样子，还需要给大家讲解如何打包和发布。