关键词:代码编辑器|版本|的是|流行|扩展|编写44有一些|自动生成|写代码|为你|这是|扩展

怎样编写VSCode扩展

怎样编写 VS Code 扩展

根据为流行的代码编辑器编写自身的扩展来加上缺少的作用。

Visual Studio Code是微软公司为 Linux、Windows 和 macOS 建立的混合开发代码编辑器。缺憾的是,微软公司版本的 VS Code 是在 Microsoft Software License 下公布的,这不是一个开源系统的许可证书。殊不知,它的源码是开源系统的,在 MIT 许可证书下由 VSCodium 新项目公布。

VSCodium 和 VS Code一样,适用扩展、嵌入式 Git 操纵、GitHub 集成化、英语的语法高亮度、调节、智能化编码补过、编码精彩片段等。也就是说,针对大部分客户而言,应用 VS Code 和 VSCodium 没什么差别,并且后面一种是彻底开源系统的! 

什么叫 VS Code 扩展?

扩展extension能够给你为 VS Code 或 VSCodium 加上作用。你能在 GUI 中或从终端设备安裝扩展。

你也能够搭建自身的扩展。有几个你将会想学习培训怎样搭建扩展的缘故:

要想加上一些作用: 假如缺少你要想的作用,你能建立一个扩展来加上它。以便快乐和学习培训: 扩展 API 容许你探寻 VSCodium 是怎样工作中的,它是一件有意思的事。以便提升您的专业技能: 建立扩展能够提升你的程序编写专业技能。以便出道: 建立一个对别人有效的扩展能够提升你的整体形象。

安裝专用工具

在你刚开始以前,你务必早已安裝了 Node.js、npm 和 VS Code 或 VSCodium。

要转化成一个扩展,你要必须下列专用工具:Yeoman,是一个开源系统的手机客户端钢管脚手架专用工具,能够协助你构建最新项目;及其 vscode-generator-code,是 VS Code 精英团队建立的 Yeoman 制作器。

搭建一个扩展

在本实例教程中,你将搭建一个扩展,它能够为程序运行复位一个 Docker 镜像系统。

转化成一个扩展框架

要在全局性范畴内安裝并运作 Yeoman 制作器,请在命令提示符或终端设备中键入以下几点: 

npm install -g yo generator-code

导航栏到要转化成扩展的文件夹名称,输入下列指令,随后按回车键: 

yo code

依据提醒,你务必回应一些关于你的扩展的难题:

你要建立哪些种类的扩展? 应用上下箭头挑选在其中一个选择项。在文中中,我将只详细介绍第一个选择项,New Extension (TypeScript)。你的扩展名字是啥? 键入你的扩展名字。我的叫 initdockerapp。你的扩展的标志符是啥? 请维持原状。你的扩展的叙述是啥? 写一些关于你的扩展的內容。复位 Git 库房? 这将复位一个 Git 库房,你能稍候加上 set-remote。应用哪一个包管理工具? 你能挑选 yarn 或 npm;我应用 npm。

按回车键后,便会刚开始安裝需要的依靠项。最终显示信息:

"Your extension initdockerapp has been created!"

干得漂亮!

检查项目的构造

查验你转化成的物品和新项目构造。导航栏到新的文件夹名称,并在终端设备中输入 cd initdockerapp。

一旦你进到该文件目录,输入 .code。它将在你的在线编辑器中开启,看上去像那样。

 

最必须留意的2个文档是 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:表明该拓展将适用哪一个版本号的 VS Code / VSCodium。categories:设定拓展种类;你能从 Languages、Snippets、Linters、Themes、Debuggers、Formatters、Keymaps 和 Other中挑选。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 belowimport * 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 executedexport 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 deactivatedexport function deactivate() {}

这是为你的扩展写代码的地区。早已有一些自动生成的编码了,我再说剖析一下。

留意,vscode.command.registerCommand 里边的 initdockerapp.initialize 和 package.json 里边的指令是一样的。它必须2个主要参数。

要申请注册的指令名字运行命令的作用

另一个必须留意的涵数是 fs.writeFile,这是你写在 vscode.command.registerCommand 涵数里边的。这将在你的新项目根目录下建立一个 Dockerfile,并在这其中额外编码来建立一个 Docker 镜像系统。 

调节扩展

如今你早已写好啦扩展,现在是时候调节它了。点一下“Run”莱单,挑选“Start Debugging”开启调节对话框。

在调节对话框里边点一下“Add Folder”或“Clone Repository”按键,开启该新项目。

接下去,用 Ctrl Shift P开启指令控制面板,运作 Initialize A Docker Application。

第一次运作此指令时,自 VSCodium 起动后,激活函数并未实行。因而,启用激活函数,并由激话 涵数申请注册该指令。假如指令已申请注册,那麼它将强制执行。

你能见到右下方有一条信息内容,上边写着:Dockerfile has been created!。这就建立了一个 Dockerfile,里边有一些预订义的编码,看上去是那样的: 

小结

有很多有效的 API 能够协助你建立你要想搭建的扩展。VS Code 扩展 API 也有很多别的强劲的方式 能够应用。

你能在 VS Code 扩展 API 文本文档中掌握大量有关 VS Code API 的信息内容。

猜你喜欢