如何创建一个简单的VS Code扩展

注:本文提到的代码示例下载地址>How to create a simple extension for VS Code

VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种语言,还能安装各种扩展。没有用过的同学可以下载下来感受一下,具体参见官方文档

假设VS Code你已经安装好了,也已经大概玩过一遍了。接下来我们就开始讲讲怎么创建一个简单的VS Code扩展。

首先要装下node.js,然后通过命令行安装Yeoman,我们要通过这个工具来自动生成扩展代码:

>npm install -g yo generator-code

安装完了之后,再在命令行种敲>yo code

扩展支持JavaScript和TypeScript两种语言编写,我们这次选择JavaScript,使用上下键来选择,然后回车,下面输入你的扩展的各种信息

确认回车后,工具会帮我们生成一个Hello World扩展,我们这边取的名字是hellocode, 所以扩展所在的文件夹名就是hellocode,打开hellocode

运行>code .

hellocode文件夹将会通过VS Code打开,我们在这个VS Code窗口中按下F5来运行这个扩展,可以看到一个新的VS Code窗口会打开。我们在里面按下Ctrl+Shift+P,在弹出的命令栏中敲Hello World回车,你会看到弹出一个“Hello Worlld!”信息框。

关掉这个窗口,我们来看一下hellocode底下的文件,package.json 里有我们用工具生成代码的时候写的一些信息。

我们可以在这个里面修改配置,比如把title改成“Hi Code”,那我们调取这个扩展的时候就要敲“Hi Code”而不是“Hello World”了。

    "contributes": {
        "commands": [{
            "command": "extension.sayHello",
            "title": "Hi Code"
        }]
    },

那么弹出信息框的代码在哪里呢?

我们在extension.js里找到这段代码,activate 方法中,我们给“extension.sayHello”注册了方法,方法内容就是,弹出“Hello World!”信息框。

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 "testcode" 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(‘extension.sayHello‘, 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!‘);
    });

    context.subscriptions.push(disposable);
}

接下来我们稍微修改下这个方法,

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 "hellocode" 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(‘extension.sayHello‘, SelectItem);
    context.subscriptions.push(disposable);
}

function SelectItem() {
    vscode.window.showQuickPick(["a", "b"]).then(function (selected) {
        if(selected){
        vscode.window.showInformationMessage("Item ‘"+selected+"‘ has been selected!");}
    });
}

我们在弹出信息框之前,调用了一个VC Code 的API,显示一个快速选择的列表,当用户选择之后,把选中的内容显示在信息框中。

按下F5来debug一下,

我们可以在extension.js中添加断点进行一步步调试,这边我就不一步步的放截图了,大家可以自己尝试着去做一下。

好了,这次的示范就到这里,希望能帮到大家~

想了解更多的VS Code API, 戳这边:https://code.visualstudio.com/docs/extensionAPI/vscode-api

这次的示例代码在这里可以下载:How to create a simple extension for VS Code

觉得这个例子太简单?这里有更多完整的示例:https://code.visualstudio.com/docs/tools/samples

时间: 2024-10-17 21:18:44

如何创建一个简单的VS Code扩展的相关文章

[安卓基础] 005.创建一个简单的UI

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; text-decoration: none; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: poin

如何利用CEF3创建一个简单的应用程序 (Windows Platform)

1. 说明 这篇文章主要讲述如何利用CEF3来创建一个简单的应用程序,引用的是1535及以上版本中包含的 Cefsimple 项目例子.如果想知道关于CEF3更多的使用方法,可以去访问 GeneralUsage. 2. 开始 首先,根据自身所使用的开发平台,可以去 这里 下载对应的发布版本.针对这个教程,我们需要下载1750或者更新的版本.当前支持的平台有Windows, Linux和Mac OS X.每一个版本都包含了当在特定平台上编译特定版本CEF3时所需要的所有文件和资源.您可以通过包含在

《Yii2 By Example》第2章:创建一个简单的新闻阅读器

第2章 创建一个简单的新闻阅读器 本章内容包含:创建第一个控制器,用于展示新闻条目列表和详情:学习控制器和视图之间的交互:自定义视图的布局. 本章结构如下: 创建控制器和动作 创建用于展示新闻列表的视图 控制器是如何将数据传送到视图的 例子--创建一个控制器,展示静态新闻条目列表和详情 将常用视图内容分割成多个可复用视图 例子--在视图中进行部分渲染 创建静态页面 在视图和布局之前共享数据 例子--根据URL参数更换布局背景 使用动态模块布局 例子--添加展示广告信息的动态盒 使用多个布局 例子

创建一个简单的银行程序包.........未完善,待续

2练习1:创建一个简单的银行程序包   练习目标-Java 语言中面向对象的封装性及构造器的使用. 任务 在这个练习里,创建一个简单版本的(账户类)Account类.将这个源文件放入banking程序包中.在创建单个帐户的默认程序包中,已编写了一个测试程序TestBanking.这个测试程序初始化帐户余额,并可执行几种简单的事物处理.最后,该测试程序显示该帐户的最终余额. 1. 创建banking 包 2. 在banking 包下创建Account类.该类必须实现上述UML框图中的模型. 声明一

【Unity Shaders】Reflecting Your World —— 在Unity3D中创建一个简单的动态Cubemap系统

本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源(当然你也可以从官网下载). ========================================== 分割线 ========================================== 写在前面 我们已经学了很多关于反射的内容,但是我们现在的反射并不能实时反射,即当反射物体移动时它们不

IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程

一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 2.2项目部署 在工具栏点击 Project: 无需任何设置,选择默认编译目录(或自定义编译目录) Modules: 将Tomcat加入 Libraries:无需任何设置.这里描述了此项目的依赖. Facets: 无需任何设置.这里描述了此项目所适配的服务框架 Artifacts: 无需任何配置.

mysql 如何创建一个简单的存储过程

1 用mysql客户端登入2 选择数据库 mysql>use test3 查询当前数据库有哪些存储过程 mysql>show procedure status where Db='test'4 创建一个简单的存储过程 mysql>create procedure hi() select 'hello'; 5 存储过程创建完毕,看怎么调用它 mysql>call hi();显示结果 mysql> call hi(); +-------+ | hello | +-------+

《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型 (转)

第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以跳过本章. 本章将带你漫游使用实体框架建模的基本实例,建模是实体框架的核心特性,同时也是区别实体框架和微软早期的数据访问平台的特性.一旦建好模,你就可以面向模型编写代码,而不用面向关系数据库中的行和列. 本章以创建一个简单概念模型的实例开始,然后让实体框架创建底层的数据库,剩下的实例,将向你展示,如

SharePoint 创建一个简单的Web Part 部分

SharePoint 创建一个简单的Web Part 部分 标准Web零件有时会很强大,运行多个功能的能力. 本文介绍了如何使用Visual Studio 创建一个简单的Web部分. 1. 打开VS,点击文件----新建项目. 2. 选择空白SharePoint项目.命名SmallvilleWebPartProject,点击确定.选择部署为场解决方式. 3. 右击项目加入新项目. 4. 选择Web部件. 5. 命名CustomerInformation,点击加入. 6. 右击新的Web部件项目.