（侯赛因·安萨里（Hussain Ansari）， ）
vs code扩展_如何编写VS Code扩展
本文共 12965 字，大约阅读时间需要 43 分钟。
vs code扩展
Visual Studio代码（VS代码）是Microsoft为Linux，Windows和macOS创建的跨平台代码编辑器。 不幸的是，Microsoft的版本是根据发行的，该不是开放源许可。 但是，源代码是开放源代码的，根据MIT许可证发布，并且由项目分发。
与VS Code一样，VSCodium也支持扩展，嵌入式Git控件，GitHub集成，语法突出显示，调试，智能代码完成，代码段等。 换句话说，对于大多数用户来说，使用VS Code和VSCodium没有什么区别，后者是完全开源的！
什么是VS Code扩展？
扩展允许您向VS Code或VSCodium添加功能。 您可以在GUI中或从终端安装扩展。
您也可以构建自己的扩展程序。 您可能要学习构建扩展的原因有几个：
- 添加内容：如果缺少所需的功能，则可以创建扩展来添加它。
- 娱乐和学习：扩展API使您可以探索VSCodium的工作方式，这很有趣。
- 要提高您的技能，请执行以下操作：创建扩展程序可以增强您的编程技能。
- 为了成名：创建对他人有用的扩展名可以增加您的公共档案。
安装工具
已安装 ， 和VS 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 。 它将在您的编辑器中打开，看起来像这样：
src文件夹中需要注意的两个最重要的文件是package.json和extension.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开发人员，则其中一些可能看起来很熟悉，因为name ， description ， version和scripts是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.initialize内vscode.command.registerCommand是一样的，在命令package.json 。 它带有两个参数：
- 要注册的命令名称
- 执行命令的功能
注意的另一个函数是fs.writeFile ，您在vscode.command.registerCommand函数内部编写了vscode.command.registerCommand函数。 这将在项目根目录内创建一个dockerfile，并附加代码以创建Docker映像。
调试扩展
现在，您已经编写了扩展，现在可以调试它了。 单击运行菜单，然后选择开始调试 （或仅按F5 ）以打开调试窗口。
单击“ 添加文件夹”或“ 克隆存储库”按钮，在调试窗口中打开项目。
接下来，使用Ctrl + Shift + P打开命令面板（在macOS上，用Command键替代Ctrl）并运行Initialize A Docker Application 。
- 第一次运行此命令时，自VSCodium启动以来，激活功能尚未执行。 因此，激活被调用，激活功能注册该命令。
- 如果命令已经注册，则执行。
您将在右下角看到一条消息：“ Dockerfile已创建！” 这创建了一个带有一些预定义代码的Dockerfile，如下所示：
（侯赛因·安萨里（Hussain Ansari）， ）
摘要
有许多有用的API，它们将帮助您创建要构建的扩展。 VS Code扩展API可以使用许多其他强大的方法。
您可以在VS Code Extension API文档中了解有关VS Code API的更多信息。
翻译自:
vs code扩展
转载地址：http://mdbzd.baihongyu.com/
你可能感兴趣的文章
对innodb 拷贝文件实现数据库的方式(转)
查看>>
python知识点 2014-07-09
查看>>
FloatingActionButton的一点学习感悟
查看>>
ABAP CDS ON HANA-(10)項目結合して一つ項目として表示
查看>>
网站地址信息
查看>>
产品经理 - 登录 注册
查看>>
Notepad++ 通过g++编译
查看>>
Ruby Gem 的基础知识和详解
查看>>
Vue学习
查看>>
html5的本地存储
查看>>
Java设计模式系列之中介者模式
查看>>
eclipse编译时过滤SVN版本控制信息方法(转)
查看>>
CSS3中使用calc()设置宽度和高度
查看>>
泉五培训Day5
查看>>
理解constructor属性
查看>>
java学习 java 的继承机制 暑假第三天
查看>>
计算机基础（计算机专业）
查看>>
人人必知的10个 jQuery 小技巧
查看>>
【坦克大战】Unity3D多人在线游戏(泰课的坦克大战--旋转的螺丝钉)
查看>>
Android 开发BottomNavigationView学习
查看>>