vs code扩展_如何编写VS Code扩展

本文介绍了如何创建和调试VS Code或VSCodium扩展。通过Yeoman和vscode-generator-code生成扩展框架,详细步骤包括设置扩展名、描述、标识符等。重点讲述了`package.json`和`src/extension.ts`文件的作用,以及如何进行调试。
摘要由CSDN通过智能技术生成

vs code扩展

Visual Studio代码(VS代码)是Microsoft为Linux,Windows和macOS创建的跨平台代码编辑器。 不幸的是,Microsoft的VS Code版本是根据Microsoft软件许可发行的,该许可不是开放源许可。 但是,源代码是开放源代码的,根据MIT许可证发布,并且由VSCodium项目分发。

与VS Code一样,VSCodium也支持扩展,嵌入式Git控件,GitHub集成,语法突出显示,调试,智能代码完成,代码段等。 换句话说,对于大多数用户来说,使用VS Code和VSCodium没有什么区别,后者是完全开源的!

什么是VS Code扩展?

扩展允许您向VS Code或VSCodium添加功能。 您可以在GUI中或从终端安装扩展。

您也可以构建自己的扩展程序。 您可能要学习构建扩展的原因有几个:

  1. 添加内容:如果缺少所需的功能,则可以创建扩展来添加它。
  2. 娱乐和学习:扩展API使您可以探索VSCodium的工作方式,这很有趣。
  3. 要提高您的技能,请执行以下操作:创建扩展程序可以增强您的编程技能。
  4. 为了成名:创建对他人有用的扩展名可以增加您的公共档案。

安装工具

已安装Node.jsnpm和VS Code或VSCodium

要生成扩展,您还需要以下工具: Yeoman (一个可以帮助您启动新项目的开源客户端脚手架工具)和vscode-generator-code (一个由VS Code团队创建的Yeoman生成器)。

建立扩充功能

在本教程中,您将构建一个扩展程序来初始化应用程序的Docker映像。

生成扩展框架

要全局安装和运行Yeoman生成器,请在命令提示符或终端中输入以下内容:

 npm install -g yo generator-code 

导航到您要生成扩展名的文件夹,键入以下命令,然后按Enter

 yo code 

在提示符下,您必须回答有关扩展程序的一些问题:

  • 您要创建哪种扩展名? 使用向上和向下箭头选择选项之一。 在本文中,我将仅解释第一个,即New Extension(TypeScript)
  • 您的扩展名是什么? 输入您的扩展名。 我的被​​称为initdockerapp 。 (我敢肯定您会有更好的名字。)
  • 您的扩展程序的标识符是什么? 保持原样。
  • 您对扩展程序的描述是什么? 写一些关于您的扩展程序的信息(您也可以填写或稍后进行编辑)。
  • 初始化一个Git仓库? 这将初始化一个Git存储库,您可以稍后添加set-remote
  • 使用哪个包管理器? 您可以选择yarn或npm; 我将使用npm。

按下Enter键,它将开始安装所需的依赖项。 最后:

“您的扩展程序initdockerapp已创建!”

优秀的!

检查项目的结构

检查您生成的内容和项目结构。 导航到新文件夹, cd initdockerapp在终端中键入cd initdockerapp

进入后,输入.code 。 它将在您的编辑器中打开,看起来像这样:

Project file structure in VSCodium

(侯赛因·安萨里(Hussain Ansari), CC BY-SA 4.0

src文件夹中需要注意的两个最重要的文件是package.jsonextension.ts

package.json

首先,查看package.json ,它应如下所示:


   
   
{
        "name" : "initdockerapp" ,
        "displayName" : "initdockerapp" ,
        "description" : "" ,
        "version" : "0.0.1" ,
        "engines" : {
                "vscode" : "^1.44.0"
        } ,
        "categories" : [
                "Other"
        ] ,
        "activationEvents" : [
                "onCommand:initdockerapp.initialize"
        ] ,
        "main" : "./out/extension.js" ,
        "contributes" : {
                "commands" : [
                        {
                                "command" : "initdockerapp.initialize" ,
                                "title" : "Initialize A Docker Application"
                        }
                ]
        } ,
        "scripts" : {
                "vscode:prepublish" : "npm run compile" ,
                "compile" : "tsc -p ./" ,
                "lint" : "eslint src --ext ts" ,
                "watch" : "tsc -watch -p ./" ,
                "pretest" : "npm run compile && npm run lint" ,
                "test" : "node ./out/test/runTest.js"
        } ,
        "devDependencies" : {
                "@types/vscode" : "^1.44.0" ,
                "@types/glob" : "^7.1.1" ,
                "@types/mocha" : "^7.0.2" ,
                "@types/node" : "^13.11.0" ,
                "eslint" : "^6.8.0" ,
                "@typescript-eslint/parser" : "^2.26.0" ,
                "@typescript-eslint/eslint-plugin" : "^2.26.0" ,
                "glob" : "^7.1.6" ,
                "mocha" : "^7.1.1" ,
                "typescript" : "^3.8.3" ,
                "vscode-test" : "^1.3.0"
        }
}
{
        "name" : "initdockerapp" ,
        "displayName" : "initdockerapp" ,
        "description" : "" ,
        "version" : "0.0.1" ,
        "engines" : {
                "vscode" : "^1.44.0"
        } ,
        "categories" : [
                "Other"
        ] ,
        "activationEvents" : [
                "onCommand:initdockerapp.initialize"
        ] ,
        "main" : "./out/extension.js" ,
        "contributes" : {
                "commands" : [
                        {
                                "command" : "initdockerapp.initialize" ,
                                "title" : "Initialize A Docker Application"
                        }
                ]
        } ,
        "scripts" : {
                "vscode:prepublish" : "npm run compile" ,
                "compile" : "tsc -p ./" ,
                "lint" : "eslint src --ext ts" ,
                "watch" : "tsc -watch -p ./" ,
                "pretest" : "npm run compile && npm run lint" ,
                "test" : "node ./out/test/runTest.js"
        } ,
        "devDependencies" : {
                "@types/vscode" : "^1.44.0" ,
                "@types/glob" : "^7.1.1" ,
                "@types/mocha" : "^7.0.2" ,
                "@types/node" : "^13.11.0" ,
                "eslint" : "^6.8.0" ,
                "@typescript-eslint/parser" : "^2.26.0" ,
                "@typescript-eslint/eslint-plugin" : "^2.26.0" ,
                "glob" : "^7.1.6" ,
                "mocha" : "^7.1.1" ,
                "typescript" : "^3.8.3" ,
                "vscode-test" : "^1.3.0"
        }
}

如果您是Node.js开发人员,则其中一些可能看起来很熟悉,因为namedescriptionversionscripts是Node.js项目的常见部分。

有几个部分非常重要。

  • engines :说明扩展程序将支持哪个版本的VSCodium
  • categories :设置扩展名类型; 您可以选择语言,摘要,Linters,主题,调试器,格式化程序,键映射和其他
  • contributes :可以与扩展一起运行的命令列表
  • main :扩展程序的入口点
  • activationEvents :指定何时发生激活事件。 具体来说,这决定了何时将扩展加载到您的编辑器中。 扩展是延迟加载的,因此在激活事件发生之前,它们不会被激活

src / extension.ts

接下来,查看src/extension.ts ,它看起来应该像这样:


   
   
// The module 'vscode' contains the VSCodium extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from "vscode" ;
const fs = require ( "fs" ) ;
const path = require ( "path" ) ;

// 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 "initdockerapp" 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 ( 'initdockerapp.initialize' , ( ) => {
                // The code you place here will be executed every time your command is executed

                let fileContent = `
                FROM node : alpine
                WORKDIR / usr / src / app

                COPY package. json .
                RUN npm install
               
                COPY . .
               
                EXPOSE 3000
                CMD [ "npm" , "start" ]
                ` ;
               
                fs. writeFile ( path. join ( vscode. workspace . rootPath , "Dockerfile" ) , fileContent , ( err : any ) => {
                        if ( err ) {
                                return vscode. window . showErrorMessage ( "Failed to initialize docker file!" ) ;
                        }
                        vscode. window . showInformationMessage ( "Dockerfile has been created!" ) ;
                } ) ;
        } ) ;

        context. subscriptions . push ( disposable ) ;
}

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

这是您编写扩展代码的地方。 已经有一些自动生成的代码,我将对其进行细分。

请注意,名称initdockerapp.initializevscode.command.registerCommand是一样的,在命令package.json 。 它带有两个参数:

  1. 要注册的命令名称
  2. 执行命令的功能

注意的另一个函数是fs.writeFile ,您在vscode.command.registerCommand函数内部编写了vscode.command.registerCommand函数。 这将在项目根目录内创建一个dockerfile,并附加代码以创建Docker映像。

调试扩展

现在,您已经编写了扩展,现在可以调试它了。 单击运行菜单,然后选择开始调试 (或仅按F5 )以打开调试窗口。

单击“ 添加文件夹”或“ 克隆存储库”按钮,在调试窗口中打开项目。

接下来,使用Ctrl + Shift + P打开命令面板(在macOS上,用Command键替代Ctrl)并运行Initialize A Docker Application

  • 第一次运行此命令时,自VSCodium启动以来,激活功能尚未执行。 因此,激活被调用,激活功能注册该命令。
  • 如果命令已经注册,则执行。

您将在右下角看到一条消息:“ Dockerfile已创建!” 这创建了一个带有一些预定义代码的Dockerfile,如下所示:

Running the new extension command

(侯赛因·安萨里(Hussain Ansari), CC BY-SA 4.0

摘要

有许多有用的API,它们将帮助您创建要构建的扩展。 VS Code扩展API可以使用许多其他强大的方法。

您可以在VS Code Extension API文档中了解有关VS Code API的更多信息。

翻译自: https://opensource.com/article/20/6/vs-code-extension

vs code扩展

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值