dev-zuo 技术日常


这篇文章发布于 2020/10/08,归类于


带着这个问题,来看看vscode插件的开发。直接找vscode官方教程。按照文档先来跑一个hello word

# Install Yeoman and VS Code Extension Generator with:
npm install -g yo generator-code

运行yo code,生成一个脚手架项目

guoqzuo-mac:vscodeExtension kevin$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? zuo-restart
? What's the identifier of your extension? zuo-restart
? What's the description of your extension? A plugin use to auto restart vue.con
? Initialize a git repository? Yes
? Which package manager to use? npm

Your extension zuo-restart has been created!

To start editing with Visual Studio Code, use the following commands:

     cd zuo-restart
     code .

Open inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit and follow us @code.

这样会创建一个空的项目,只注册了helloworld命令,我们按照 里的说明运行demo



网上说要装一个 run code的 vscode插件,也装了。后面发现还是不行,点击正在生成,ctrl + c 就弹出一个名为 "扩展开发宿主" 的新窗口了,里面可以调试插件,如下图


生成项目的入口是 extension.ts,他默认注册了一个helloword命令,我们输入命令就会显示一个弹窗消息

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // 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 "zuo-restart" 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
    let disposable = vscode.commands.registerCommand('zuo-restart.helloWorld', () => {
        // 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 zuo-restart!');


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

我们在插件调试窗口跑下hello world命令




这样hellowrod就跑起来了, 里面有构架、发布插件的文档说明

官网提供了一些简单的demo,可以练练手,vscode-extension-samples | github,后续有时间了继续研究