-
CodeArts Snap 在VSCode上怎么用
-
在网上下载sdk安装包拖进用户西面的.olink文件夹里面的sdk但是重启vscode一直显示安装iotlink依赖环境
-
首先,vscode 的插件开发很简单。如果读完这篇需要 5 分钟,那么至少有 4 分钟是花在看我写的废话上,实际上只用 1 分钟就能入门。好想把标题改成“1 分钟入门 vscode 插件开发”!写个网页现在还得用 vue 或 react,免不了搭建个环境,还得构建项目、打包……而开发 vscode 插件,你只需要安装一个 vscode,其他什么都不要(不要用太老版本的 vscode)。下面是一个极简的 vscode 插件,代码只有四行。功能是:在 vscode 启动后,弹出一个通知:(从现在开始计时,不过分吧……)你只需要新建一个文件夹,然后用 vscode 打开这个文件夹,再创建以下两个文件:一、package.jsonpackage.json 是描述项目的文件,存放基本信息(项目名、版本、环境等){ "name": "vsc-plugin-demo", "version": "0.0.1", "engines": { "vscode": "^1.47.3" }, "activationEvents": [ "onStartupFinished" ], "main": "./ext.js"}这种文件,一般不称之为“代码”。需要说明的是:activationEvents: 声明插件启动的时机,此处是在 onStartupFinished,即(vscode)启动完成时(启动插件)main: 主程序文件的路径二、ext.js主程序只有这四行代码:const vscode = require('vscode')exports.activate = function() { vscode.window.showInformationMessage('hello, ppz')}第 1 行代码,引入 vscode 核心库,不需要手动安装,它提供了开发插件所需的大部分 api。第 2 到 4 行代码,定义了“启动插件的函数”,即通过这个函数,让插件跑起来。函数体部分只有一行,通过调用 vscode 提供的 api,展示一个通知:hello, ppz。运行至此,插件已经完成,运行一下试试:用鼠标点一下 ext.js 文件按键盘上的 f5点击弹出窗口中的 VS Code Extension Development(你已经入门 vscode 插件开发,计时结束)最后上面的代码可以从 github 上下载:仓库地址git clone https://github.com/ppz-pro/vsc-plugin-startup.git如果说 vscode 插件开发比某一种程序开发难,那是因为你在它上面才花了 1 分钟。相比于动辄几个月的技术培训,这 1 分钟实在是太微乎其微了。如果你也感兴趣,可以直接看 vscode 的官方教程,很全面,也很细。当然,在这忙忙碌碌、繁繁乱乱的生活中,能静下心来学习,已实属不易,共勉吧!最后的最后,自荐我在 2022 年上海疫情封控期间写的插件 —— PPZ,它提供了操作数据库的图形界面,目前功能还很简单,后续功能会慢慢丰富起来。 原文链接:vscode 插件开发极简教程 - 知乎 (zhihu.com)
-
内容提要VSCode 组成结构插件在 VSCode 中能做什么编写 Hello world 了解插件生命周期主要配置和 APIsWeb View 示例VSCode 组成结构VSCode 是基于 Electron 构建的,主要由三部分构成:Electron: UIMonaco EditorExtension HostLanguage Server Protocol & Debug Adapter ProtocolVSCode 中的大部分功能都是通过 Extension Host 来实现的。符合 LSP 的插件对应的高亮等语言特性就会反映到 Monaco Editor 上。从源码的 extensions 目录中可以看到,VSCode 默认集成了各种语言的插件。Monaco Editor是一个基于网页的编辑器,有符合 LSP 的插件就可以进行高亮、悬停提示,导航到定义、自动补全、格式化等功能。它的代码位于 monaco-editorExtension HostVSCode 的主进程和插件进程是分开管理的,Extension Host 就是用来管理插件进程的。Extension Host 是用来确保插件:不影响启动速度不会减低 UI 响应速度不会改变 UI 样式因此保证 VSCode 的稳定和快速的密码就在于使用 Extension Host 将主进程和插件进程分开,使插件不会影响到 VSCode 主进程的性能和稳定。在编写插件的时候 VSCode 可以让插件设置 Activation Events 来对插件懒加载。比如只有打开了 Markdown 文件才打开对应的插件。这样可以降低无谓的 CPU 和内存使用。Language Server Protocol & Debug Adapter Protocol这两个协议主要是为了将编辑器和编程语言/调试服务的功能分离开,实现任何语言只要编写对应的语言服务即可。目前各大编辑器都已经支持了这个协议。插件在 VSCode 中能做什么主题界面和文本(TextMate 语法)主题色图标样式通用功能添加命令添加配置项添加快捷键添加菜单项添加右键菜单从文本输入框获取输入(QuickPick)存储数据(localStorage)工作区扩展活动栏项目显示提示框状态栏信息显示进度条打开文件显示网页(web view)程序语言实现新语言的高亮实现新语言的调试器代码库管理定义和执行 Task定义 snippet主题可以修改的内容如下图(来自VSCode 官方文档)所示,主要是背景和文字的颜色,各类图标等。因为有 web view 并且底层是 node.js 虽然官方不推荐,但是实际是可以做到非常多的事情。另外底层的 Electron 是阉割版的,如果需要的功能没有,也可以下载官方的 Electron 替换掉 VSCode 中的版本。程序语言实现实现编程语言的高亮、悬停提示,导航到定义、自动补全、格式化、调试等功能。下面是 mssql 的架构和数据流:编写 Hello world 了解插件生命周期编写插件至少需要 Javascript 或 Typescript 来做入口。除了入口必须用 JS 或 TS,具体实现完全可以用你熟悉的任何语言,只要在 VSCode 的电脑上可以执行。例如 Java Language Server 插件的大部分功能都是由 Java 实现的,插件和 Java 代码之间通过 json-RPC 来进行通信。Hello world 介绍以下内容使用了 VSCode 插件文档中的 your first extension,原始代码在 helloworld-sample这个插件主要功能是运行 hello world 命令,弹出消息。从生命周期上来看,插件编写有三大个部分:Activation Event:设置插件激活的时机。位于 package.json 中。Contribution Point:设置在 VSCode 中哪些地方添加新功能,也就是这个插件增强了哪些功能。位于 package.json 中。Register:在 extension.ts 中给要写的功能用 vscode.commands.register... 给 Activation Event 或 Contribution Point 中配置的事件绑定方法或者设置监听器。位于入口文件(默认是 extension.ts)的 activate() 函数中。packages.jsonpackage 中和插件有关的主要内容是如下几个项目,其中 main 是插件代码的入口文件。"activationEvents": [ "onCommand:extension.helloWorld" ], "main": "./out/extension.js", "contributes": { "commands": [ { "command": "extension.helloWorld", "title": "Hello World" }, { "command": "extension.helloVscode", "title": "Hello vscode" } ] },activationEvents官方文档: activation-events原来的 "Hello World" 只是在执行 extension.helloWorld 的命令后才会激活插件,所以如果需要在其他情况下激活插件的话,则需要添加对应的命令才行。所以新添加了 onCommand:extension.helloVscode。"activationEvents": [ "onCommand:extension.helloWorld", "onCommand:extension.helloVscode" ],如果忘记添加这个命令则会造成执行命令后,插件并没有启动,命令执行失败。Contribution Points官方文档: contribution-points这个是在 package.json 中配置的项目。说明了插件对哪些项目进行了增强。对于 "hello world" 示例,如果需要在原有功能上添加一个命令 hello Vscode,下面的 command 为 "extension.helloVscode" 的就是新添加的命令了。"contributes": { "commands": [ { "command": "extension.helloWorld", "title": "Hello World" }, { "command": "extension.helloVscode", "title": "Hello vscode" } ]},Extension.ts这个文件是插件的入口,一般包括两个函数 activate 和 deactivate。其中 activate 函数是插件激活时也就是在注册的 Activation Event 发生的时候就会执行。deactivate 中放的是插件关闭时执行的代码。在 activate() 函数中通过 return 返回的数据或函数可以作为接口供其他插件使用。VSCode 在运过程中,会通过 Extension Host 来管理所有插件中这两个函数的生命周期。import * as vscode from "vscode";// 插件激活时的入口export function activate(context: vscode.ExtensionContext) { // 注册 extension.helloWorld 命令 let disposable = vscode.commands.registerCommand("extension.helloWorld", () => { vscode.window.showInformationMessage("Hello World!"); }); // 给插件订阅 helloWorld 命令 context.subscriptions.push(disposable); // 新增的代码 let helloVscode = vscode.commands.registerCommand("extension.helloVscode", () => { vscode.window.showInformationMessage("Hello Vscode"); }); context.subscriptions.push(helloVscode); // return 的内容可以作为这个插件对外的接口 return { hello() { return "hello world"; } };}// 插件释放的时候触发export function deactivate() {}activateExtensionContext字面上意思是上下文信息,实际上就是当前插件的状态信息。registerCommand 和 subscriptions.push()完整的 API 是:registerCommand(command: string, callback: (args: any[]) => any, thisArg?: any): Disposable这个的主要功能是给功能代码(callback)注册一个命令(command),然后通过 subscriptions.push() 给插件订阅对应的 command 事件。return 给其他插件提供接口如果需要使用其他插件提供的接口,则可以在 package.json 中将对应插件添加到 extensionDependency 中,然后使用 getExtension 函数中的 export 属性。export function activate(context: vscode.ExtensionContext) { let api = { hello() { return "hello world"; } }; return api;}// 引入其他插件接口let helloWorld = extensions.getExtension("helloWorld");let importedApi = helloWorld.exports;console.log(importedApi.hello());Debug Extension在 launch.json 中添加一个扩展开发的配置,然后按F5就可以打开一个新的 VSCode,然后就可以在这个新的 VSCode 中进行插件测试。并且也可以在插件代码的那个 VSCode 中打断点调试。建议在“args”中添加"--disable-extensions",不然要调试的插件加载太慢,还以为写的有问题。Unit Test具体文档请参考 testing extension测试插件可以使用 vscode-test API 来做测试。需要给它的 runTests 提供 extensionDevelopmentPath, extensionTestsPath 即开发目录和测试文件目录。测试则使用习惯的单元测试框架即可。import * as path from "path";import { runTests } from "vscode-test";async function main() { try { // The folder containing the Extension Manifest package.json // Passed to `--extensionDevelopmentPath` const extensionDevelopmentPath = path.resolve(__dirname, "../../"); // The path to the extension test script // Passed to --extensionTestsPath const extensionTestsPath = path.resolve(__dirname, "./suite/index"); // Download VS Code, unzip it and run the integration test await runTests({ extensionDevelopmentPath, extensionTestsPath }); } catch (err) { console.error("Failed to run tests"); process.exit(1); }}main();如果要对测试做Debug的话,则可以参考下面内容配置 launch.json。其中设置关闭了其他的插件,如果需要打开其他插件,则删掉 --disable-extensions。也可以通过给 runTests 再添加一个参数 launchArgs: ['--disable-extensions'] 来关闭其他插件。{ "version": "0.2.0", "configurations": [ { "name": "Extension Tests", "type": "extensionHost", "request": "launch", "runtimeExecutable": "${execPath}", "args": [ "--disable-extensions", "--extensionDevelopmentPath=${workspaceFolder}", "--extensionTestsPath=${workspaceFolder}/out/test/suite/index" ], "outFiles": ["${workspaceFolder}/out/test/**/*.js"] } ]}await runTests({ extensionDevelopmentPath, extensionTestsPath, launchArgs: ["--disable-extensions"]});主要配置和 APIsActivation Events这个项目定义的是插件打开的时机,可以在以下情况时打开:onLanguage: 在打开对应语言文件时onCommand: 在执行对应命令时onDebug: 在 debug 会话开始前onDebugInitialConfigurations: 在初始化 debug 设置前onDebugResolve: 在 debug 设置处理完之前workspaceContains: 在打开一个文件夹后,如果文件夹内包含设置的文件名模式时onFileSystem: 打开的文件或文件夹,是来自于设置的类型或协议时onView: 侧边栏中设置的 id 项目展开时onUri: 在基于 vscode 或 vscode-insiders 协议的 url 打开时onWebviewPanel: 在打开设置的 webview 时*: 在打开 vscode 的时候,如果不是必须一般不建议这么设置官方文档:activation-eventsContribution Points这个是用来用来描述你所写的插件在哪些地方添加了功能,是什么样的功能,添加的内容会显示到界面上,前面的 hello world 示例就是在 commands 中添加了相应的 hello world 命令,然后这个命令就可以在命令窗口执行了。configurationconfigurationDefaultscommandsmenuskeybindingslanguagesdebuggersbreakpointsgrammarsthemessnippetsjsonValidationviewsviewsContainersproblemMatchersproblemPatternstaskDefinitionscolorstypescriptServerPluginsresourceLabelFormatters官方文档:contribution-pointsAPIs所有的 API 定义在 vscode.d.ts 中,其注释也写的非常详细。主要是以下各类 API:commandscommentsdebugenvextensionslanguagesscmtaskswindowworkspaceAPI 设计的模式官方文档:vscode-api#api-patternsPromiseVSCode API 中异步操作使用的是 Promise,所以可以使用 Then 或者 await。大部分情况下 Thenable 是可选的,如果 promise 是可选的,则会有一个可选类型。provideNumber(): number | Thenable<number>Cancellation Tokens在一个操作完成前,会开始于一个不稳定的状态。比如在开始代码智能提示时,最开始的操作会因为后面持续输入的内容过时。很多 API 会有一个 CancellationToken,来检查操作是否取消 (isCancellationRequested),或者在发生取消操作时得到通知 (onCancellationRequested)。这个 Token 一般是函数的最后一个可选(回调)参数。DisposablesVSCode API 对使用的各类资源利用 dispose pattern 来进行释放。应用于事件监听、命令、UI 交互等。例如:对于 setStatusBarMessage(value: string)(给状态栏显示消息)函数返回一个 Disposable 类型,然后可以通过调用它的 dispose 来移除信息。Events事件在 VSCode API 里面是通过订阅监听函数来实现的。订阅后会返回一个支持 Disposable 接口的变量。调用 dispose 就可以取消监听。var listener = function(event) { console.log("It happened", event); }; // 开始监听 var subscription = fsWatcher.onDidDelete(listener); // 搞事情 subscription.dispose(); // 停止监听对于事件的命名遵循 on[Will|Did]VerbNoun? 模式。onWill:即将发生onDid:已经发生verb:发生了什么noun:事件所处环境,如果发生在所处的环境则可以不加。例如:window.onDidChangeActiveTextEditor。Web View 示例web view 是 VSCode 插件里面比较有意思并且写起来也相对自由的部分,web view 用好了可以做出非常棒的插件,例如下面这个 Visual Embedded Rust。web view 生命周期生命周期包括三部分:创建:panel = vscode.window.createWebviewPanel()显示:panel.webview.html = htmlString关闭:panel.dispose() 主动关闭,panel.onDidDispose 设置关闭时清理的内容。export function webViewPanel(context: vscode.ExtensionContext) { // 1. 使用 createWebviewPanel 创建一个 panel,然后给 panel 放入 html 即可展示 web view const panel = vscode.window.createWebviewPanel( 'helloWorld', 'Hello world', vscode.ViewColumn.One, // web view 显示位置 { enableScripts: true, // 允许 JavaScript retainContextWhenHidden: true // 在 hidden 的时候保持不关闭 } ); const innerHtml = `<h1>Hello Web View</h1>`; panel.webview.html = getWebViewContent(innerHtml); // 2. 周期性改变 html 中的内容,因为是直接给 webview.html 赋值,所以是刷新整个内容 function changeWebView() { const newData = Math.ceil(Math.random() * 100); panel.webview.html = getWebViewContent(`${innerHtml}<p>${newData}</p>`); } const interval = setInterval(changeWebView, 1000); // 3. 可以通过设置 panel.onDidDispose,让 webView 在关闭时执行一些清理工作。 panel.onDidDispose( () => { clearInterval(interval); }, null, context.subscriptions );}function getWebViewContent(body: string, pic?: vscode.Uri) { return `<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> ${body} <br /> <img id="picture" src="${pic || 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif'}" width="300" /> </body></html> `;}读取本地文件一般情况下 web view 是不能直接访问本地文件的,需要使用vscode-resource开头的地址。并且只能访问插件所在目录和当前工作区。在高于 1.38 版 VSCode 下可以使用 panel.webview.asWebviewUri(onDiskPath) 生成对应的地址,否则需要使用onDiskPath.with({ scheme: 'vscode-resource' })。export function webViewLocalContent(context: vscode.ExtensionContext) { const panel = vscode.window.createWebviewPanel( 'HelloWebViewLocalContent', 'Web View Local Content', vscode.ViewColumn.One, { localResourceRoots: [ vscode.Uri.file(path.join(context.extensionPath, 'media')) ] } ); const onDiskPath = vscode.Uri.file( path.join(context.extensionPath, 'media', 'cat.jpg') ); // 生成一个特殊的 URI 来给 web view 用。 // 实际是:vscode-resource: 开头的一个 URI // 资源文件只能放到插件安装目录或则用户当前工作区里面 // 1.38以后才有这个 API,前面版本可以用onDiskPath.with({ scheme: 'vscode-resource' }); const catPicSrc = panel.webview.asWebviewUri(onDiskPath); const body = `<h1>hello local cat</h1>`; panel.webview.html = getWebViewContent(body, catPicSrc);}web view 和插件通信向 web view 发信息是通过 currentPanel.webview.postMessage({}) 发送一个json数据。在 web view 中通过window.addEventListener('message', callback)监听message信息。// 插件发送数据currentPanel.webview.postMessage({ command: 'hello web view' });// web 接收window.addEventListener('message', event => { const message = event.data; console.log(message.command);})由于 web view 不能直接调用 vscode 的 API,不过 vscode 还是给它提供了一个 acquireVsCodeApi() 的函数,它返回的对象中有一个 postMessage 方法。web view 可以通过这个方法给 vscode 发送消息。插件端则通过currentPanel.webview.onDidReceiveMessage()订阅接收消息的事件。// web view 向插件端发送数据const vscode = acquireVsCodeApi();vscode.postMessage({ command: 'alert', text: 'hello vscode'});// 插件端接收数据currentPanel.webview.onDidReceiveMessage( message => { switch (message.command) { case 'alert': vscode.window.showInformationMessage(message.text); return; } }, undefined, context.subscriptions );调试 web view可以使用下面 web view develop tool 命令。原文链接:VSCode插件开发入门 - 知乎 (zhihu.com)
-
一、vscode插件是什么?大家对vscode肯定都不陌生,其是微软推出的一款轻量级代码编辑器,在使用的时候总会时不时的安装一些插件去协助我们进行开发,这些插件就是利用vscode给我们开放的一些API的基础上进行扩展功能的开发,从而解决开发中的一些问题,提高生产效率。这种插件化思想一方面使该代码编辑器更轻量化;另一方面能够充分利用社区的力量,为其提供更加多元化的插件。二、vscode插件能做什么?vscode插件能做什么?其核心点在于vscode为其提供了哪些开放能力,只有其开放的能力才能为我们所用,就官网来看,利用vscode插件能够做以下事情(该部分来自于vscode官网扩展能力概述部分):通用功能可以在任何扩展中使用的核心功能,主要包括以下几点:(1)能够添加命令、配置项、快捷键、菜单项、右键菜单;(2)存储工作区或全局数据;(3)展示通知信息;(4)使用快速选择收集用户的输入;(5)打开文件选择器让用户去选择文件或文件夹;(6)使用Progress API去阐述长时间运行的操作;主题化控制vscode的外观,包括编辑器中源代码的颜色和vscode ui的颜色,其主要包含三种类型的主题:(1)颜色主题:其允许将颜色应用于VS Code UI组件和编辑器中的文本;(2)文件图标主题:文件图标显示在VS Code UI中的位置,例如文件资源管理器、快速打开列表和编辑器选项卡;(3)产品图标主题:在整个UI中使用的一组图标声明性语言特性声明性语言功能为编程语言添加了基本的文本编辑支持,例如括号匹配、自动缩进和语法突出显示。程序语言特性编程语言功能添加了丰富的编程语言支持,例如悬停、转到定义、诊断错误、IntelliSense 和 CodeLens。扩展工作台工作台是指包含标题栏、活动栏、侧边栏、控制板、编辑组、状态栏等UI组件的整体Visual Studio Code UI。VS Code提供了各种API,允许将自己的组件添加到工作台。调试可以通过编写将 VS Code 的调试 UI 连接到特定调试器或运行时的调试器扩展来利用 VS Code 的调试功能。三、vscode插件实战vscode插件其实是vscode对外提供了一些能力,如果不是特别需要其实没有必要完整的学习整体内容,仅仅需要了解其大体开发思路、能够解决的问题,之所以这么说是因为(以上纯个人观点,不一定正确)学习该部分的内容需要一定精力,但学后并不一定能够在自己项目中得到使用,深入学习投入于产出并不成正比,所以本次我只会讲述入门级内容,具体的内容扔需要读者在需要这一部分能力的时候再深入研究。3.1 项目初始化官方为了方便开发人员进行vscode插件的开发,提供了对yo应的脚手架来生成对应的项目。javascript复制代码// 安装需要的包 npm install -g yo generator-code // 运行 yo code 上述命令其实安装了两个包(yo和generator-code),这两个包用途如下:yo模块全局安装后就安装了Yeoman,Yeoman是通用型项目脚手架工具,可以根据一套模板,生成一个对应的项目结构generator-code模块是VS Code扩展生成器,与yo配合使用才能构建项目。3.2 重要文件在项目生成之后,目录结构如下所示,其中最重要的文件是package.json和extension.js,了解这两个文件基本上就可以入门开发一个vscode插件了。3.2.1 package.json该文件是vscode扩展的清单文件,里面有很多字段,官方对每个字段都进行了详细阐述,本次我们重点阐述以下初始化后期清单文件。json复制代码{ "name": "demo", // 插件名 "displayName": "插件", // 显示在应用市场的名字 "description": "我的第一个插件测试", // 具体描述 "version": "0.0.1", // 插件的版本号 "engines": { "vscode": "^1.60.0" // 最低支持的vscode版本 }, "categories": [ "Other" // 扩展类别 ], // 激活事件组,在那些事件情况下被激活 "activationEvents": [ "onCommand:demo.helloWorld" ], // 插件的主入口文件 "main": "./extension.js", // 贡献点 "contributes": { // 命令 "commands": [ { "command": "demo.helloWorld", "title": "Hello World" } ] }, "scripts": { "lint": "eslint .", "pretest": "npm run lint", "test": "node ./test/runTest.js" }, // 开发依赖项 "devDependencies": { "@types/vscode": "^1.60.0", "@types/glob": "^7.1.3", "@types/mocha": "^8.2.2", "@types/node": "14.x", "eslint": "^7.27.0", "glob": "^7.1.7", "mocha": "^8.4.0", "typescript": "^4.3.2", "vscode-test": "^1.5.2" } } 在这份清单文件中,重点关注的主要有三部分内容:activationEvents、main以及contributes,其是整个文件中的重中之重。main指明了该插件的主入口在哪,只有找到主入口整个项目才能正常的运转、activationEvents指明该插件在何种情况下才会被激活,因为只有激活后插件才能被正常使用,官网已经指明了激活的时机,这样我们就可以按需设置对应时机。(具体每个时机用的时候详细查看即可)onLanguage 打开解析为特定语言文件时被激活,例如"onLanguage:python"onCommand 在调用命令时被激活onDebug 在启动调试话之前被激活onDebugInitialConfigurationsonDebugResolveworkspaceContains 每当打开文件夹并且该文件夹包含至少一个与 glob 模式匹配的文件时onFileSystem 每当读取来自特定方案的文件或文件夹时onView 每当在 VS Code 侧栏中展开指定 id 的视图onUri 每当打开该扩展的系统范围的 Uri 时onWebviewPanelonCustomEditoronAuthenticationRequest* 只要一启动vscode,插件就会被激活onStartupFinishedcontributes通过扩展注册contributes用来扩展Visual Studio Code中的各项技能,其有多个配置,如下所示:breakpoints 断点colors 主题颜色commands 命令configuration 配置configurationDefaults 默认的特定于语言的编辑器配置customEditors 自定义编辑器debuggersgrammarsiconThemesjsonValidationkeybindings 快捷键绑定languagesmenusproblemMatchersproblemPatternsproductIconThemesresourceLabelFormatterssnippets 特定语言的片段submenustaskDefinitionsthemes 颜色主题typescriptServerPluginsviewsviewsContainersviewsWelcomewalkthroughs3.2.2 extension.js文件该文件时其入口文件,即package.json中main字段对应的文件(不一定叫extension.js这个名字),该文件中将导出两个方法:activate和deactivate,两个方法的执行时机如下所示:activate这是插件被激活时执行的函数deactivate这是插件被销毁时调用的方法,比如释放内存等。3.3 实战上述已经对vscode插件有了基础的认识,下面就进行一个简单的实战,打造属于自己的一个vscode插件,此插件的功能如下:通过在文件编辑区域或文件名上右击弹出按钮,点击按钮获取文件的大小、创建时间和修改时间;如果获取的是文件夹,则指明该文件是文件夹,不是文件,给予提示。3.3.1 package.json修改项json复制代码{ // …… // 在getFileState指令下激活 "activationEvents": [ "onCommand:getFileState" ], // 入口文件 "main": "./extension.js", "contributes": { // 命令 "commands": [ { "command": "getFileState", "title": "File State" } ], // 菜单项 "menus": { // 编辑上下文菜单 "editor/context": [ { "when": "editorFocus", "command": "getFileState", "group": "navigation" } ], // 资源管理器上下文菜单 "explorer/context": [ { "command": "getFileState", "group": "navigation" } ] } }, // …… } 3.3.2 主函数内容javascript复制代码const vscode = require('vscode'); const fs = require('fs'); function activate(context) { console.log('插件已经被激活'); // 注册命令 let commandOfGetFileState = vscode.commands.registerCommand('getFileState', uri => { // 文件路径 const filePath = uri.path.substring(1); fs.stat(filePath, (err, stats) => { if (err) { vscode.window.showErrorMessage(`获取文件时遇到错误了${err}!!!`) } if (stats.isDirectory()) { vscode.window.showWarningMessage(`检测的是文件夹,不是文件,请重新选择!!!`); } if (stats.isFile()) { const size = stats.size; const createTime = stats.birthtime.toLocaleString(); const modifyTime = stats.mtime.toLocaleString(); vscode.window.showInformationMessage(` 文件大小为:${size}字节; 文件创建时间为:${createTime}; 文件修改时间为:${modifyTime} `, { modal: true }); } }); const stats = fs.statSync(filePath); console.log('stats', stats); console.log('isFile', stats.isFile()); }); // 将命令放入其上下文对象中,使其生效 context.subscriptions.push(commandOfGetFileState); } function deactivate() {} module.exports = { activate, deactivate } 3. 4 发布插件看法完毕之后就是需要分享出去供大家使用,目前有三种方式:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐;打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式;注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的。每一种方式都可行,并且网上也有很多教程讲述其发布方式,今天我重点讲述一下第二种,毕竟在插件这么多的情况下,很多人更乐于开发一款属于自己的专用插件或者特定自己领域使用的插件,完全没必要发布到应用市场。安装对应的模块vscejavascript复制代码npm i vsce -g 利用vsce进行打包,生成对应的vsix文件javascript复制代码vsce package 安装到vscode安装完成之后就可以正常的进行使用了四、总结因为工作中目前还没有遇到这种需求,此次我只是对vscode插件的开发流程进行了一个简单的概述,并没有进一步深入探索,待工作中有这样的场景需要这样的能力去解决某些问题时,能够快速反应有这样的解决方案,再进一步学习也为时不晚,也希望爱学习的小伙伴们也对这一部分能够有一定了解,弥补自己知识上欠缺的一环,后续为己所用。五、参考文献vscode插件编写实战vscode插件开发全攻略官方文档作者:前端点线面链接:https://juejin.cn/post/7010765441144455199来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
-
在云IDE上安装的插件中,依赖的vscode-languageclient版本超过8.0.2时启动插件失败的解决方法是什么?
-
按照这个教程进行,https://blog.csdn.net/aa2528877987/article/details/129701716?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169293387216800213012751%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169293387216800213012751&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-129701716-null-null.142。【愚公系列】华为云系列之基于ModelBox搭建的AI寻车系统到3)如下图依次点击,进行ModelBox设备注册时卡住。在Power Shell修改权限后出现的问题,一开始是禁止在设备上运行脚本。修改后CurrentUser的权限为RemoteSigned。但是修改后又出现了【运行Agent失败。原因: 无法将“xxx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,】的问题这里的xxx指的是.modelbox的路径,为xxx/.modelbox。是要添加环境变量吗?按照网上的结局方法,修改powershell权限后仍不成功。Agent日志为:Get-Content : 找不到接受实际参数“hilens\log\hda\hdad.log”的位置形式参数。
-
1. 个人用户,打开Gallery的项目,例如:https://developer.huaweicloud.com/develop/aigallery/notebook/detail?id=07c2ad16-ad45-449e-98f8-26dedff8f67d2. 点击右上角的“run in ModelArts”,打开JupyterLab,连接到免费运行环境,这个时候已经可以在JupyterLab里运行代码了。3. 打开ModelArts控制台,点击“开发环境”-》NoteBook,期望在这个页面里面看到Jupyterlab所使用的免费运行环境,但是我的账户里面看不见上述的notebook实例,因此不能用VSCode打开,问题:这种免费实例是不能用VSCode打开吗?
-
浏览器也能访问通,就这玩意儿也不知道有啥用
-
在开发环境Console控制台上提供VS Code按钮,通过该入口自动打开VS Code并连接实例。视频指导:cid:link_0直播视频回顾:cid:link_1活动时间:9月21日-11月30日参与方式:点击报名:cid:link_2根据【体验指导】,学习并完成案例;cid:link_4运行完所有命令后,截图发布到本贴评论区,活动结束后随机抽奖。活动抽奖:1、超过88人体验,随机抽20个幸运观众,送《机器学习》书籍2、超过288人体验,随机抽60个幸运观众,送《机器学习》书籍 / 体脂秤。(总共40本《机器学习》书籍、20个体脂秤)活动已结束,参与人数未达到活动抽奖要求,不给予抽奖 活动规则 1)请务必使用个人账号参与活动(IAM、企业账号等账号参与无效); 2)所有获得华为奖项的获奖用户,请于获奖后3日内完成实名认证,否则视为放弃奖励; 3)本次活动如一个实名认证对应多个账号,只有一个账号可领取奖励;一个实名认证账号只能对应一个收件人,如同一账号填写多个不同收件人或不同账号填写同一收件人,均不予发放奖励; 4)为保证您顺利领取活动奖品,请您提前填写奖品收货信息,如您没有填写,视为放弃奖励【点击此处填写信息】。活动获奖信息填写时间截止2022年12月15日,如未填写视为弃奖,请知; 5)本次活动,实物奖品预计于2022年12月30日前完成发放,发放时间根据实际情况动态调整,如有延期敬请见谅; 6)本次活动幸运奖将采用巨公摇号平台(https://www.jugong.wang/random-portal/)进行抽取,如您对评奖方式有异议,请勿参加本次活动; 7)其他事宜请参考【华为云社区常规活动规则】,本活动最终解释权归华为云所有。https://bbs.huaweicloud.com/forum/thread-5766-1-1.html
-
VScode 是目前非常流行的编辑器之一,基于 Electron 开发的桌面版应用Electron 通过使用Node.js(作为后端)和Chromium的渲染引擎(作为前端)完成跨平台的桌面GUI应用程序的开发(Electron - 维基百科,自由的百科全书 (wikipedia.org))官方(Download Visual Studio Code - Mac, Linux, Windows)已提供arm64安装包,如下图实际下载rpm包或者tar.gz后安装,执行bin/code后会报错,如下:根据资料查询,vscode在arm64下,依赖的Electron框架(默认带的静态)是用4K pagesize编译的,而大部分arm64的os是64K页表(getconf PAGE_SIZE查询值是65536),所以非64K内核的系统下运行会segment fault,提示“ELECTRON_RUN_AS_NODE=1 "$ELECTRON" "$CLI" --ms-enable-electron-run-as-node "$@"”,如果要用的话,要么编译4K内核,要么设置electron的编译参数,指明要用64K页表,,去编译然后替换掉vscode目录的相关库。这个问题是个open的issuehttps://github.com/microsoft/vscode/issues/108509https://github.com/electron/electron/issues/25387已验证:重新编译os内核,配置4K页表,重启进入4K内核后,vscode能正常运行
推荐直播
-
TinyEngine低代码引擎系列第2讲——向下扎根,向上生长,TinyEngine灵活构建个性化低代码平台
2024/11/14 周四 16:00-18:00
王老师 华为云前端开发工程师,TinyEngine开源负责人
王老师将从TinyEngine 的灵活定制能力出发,带大家了解隐藏在低代码背后的潜在挑战及突破思路,通过实践及运用,帮助大家贴近面向未来低代码产品。
即将直播 -
华为云AI入门课:AI发展趋势与华为愿景
2024/11/18 周一 18:20-20:20
Alex 华为云学堂技术讲师
本期直播旨在帮助开发者熟悉理解AI技术概念,AI发展趋势,AI实用化前景,了解熟悉未来主要技术栈,当前发展瓶颈等行业化知识。帮助开发者在AI领域快速构建知识体系,构建职业竞争力。
去报名 -
华为云软件开发生产线(CodeArts)10月新特性解读
2024/11/19 周二 19:00-20:00
苏柏亚培 华为云高级产品经理
不知道产品的最新特性?没法和产品团队建立直接的沟通?本期直播产品经理将为您解读华为云软件开发生产线10月发布的新特性,并在直播过程中为您答疑解惑。
去报名
热门标签