vscode用来js开发的插件
时间: 2023-09-15 17:20:19 浏览: 190
vsCode插件
引用:执行 yo code之后,会有下面几个选项: ? What type of extension do you want to create(您想要创建什么类型的扩展?)? New Extension (JavaScript)? What's the name of your extension(你的分机名是什么,也就是项目名)?demo? What's the identifier of your extension(你的扩展的标识符是什么)?demo? What's the description of your extension(什么是您的扩展的描述)?learn vscode plugin? Enable JavaScript type checking in 'jsconfig.json'(在'jsconfig.json'中启用JavaScript类型检查)?Yes? Initialize a git repository(初始化一个git仓库)?Yes? bundel the source code with webpack (是否用webpack打包源码)?Yes? Which package manager to use(使用哪个包管理器)? yarn 。
引用:官方为了方便开发人员进行vscode插件的开发,提供了对yo应的脚手架来生成对应的项目。vscode 扩展开发官方文档 // 全局安装需要的包 npm install -g yo generator-code 。
引用:VSCode插件的WebView类似于iframe的实现,但并不是真正的iframe(我猜底层应该还是基于iframe实现的,只不过上层包装了一层),通过开发者工具可以看到: 1、实现一个简单的webview功能 const vscode = require('vscode'); /** * @param {vscode.ExtensionContext} context */ function activate(context) { let disposable = vscode.commands.registerCommand( 'demo1.webview', showWebview ); context.subscriptions.push(disposable); } function showWebview() { // 创建webview const panel = vscode.window.createWebviewPanel( 'testWebview', // viewType 'WebView演示', // 视图标题 vscode.ViewColumn.One, // 显示在编辑器的哪个部位 { enableScripts: true, // 启用JS,默认禁用 retainContextWhenHidden: true, // webview被隐藏时保持状态,避免被重置 } ); panel.webview.html = `<html><body>你好,我是Webview</body></html>`; } function deactivate() {} module.exports = { activate, deactivate, }; 。
vscode用来js开发的插件时,可以使用官方提供的脚手架yo code来生成对应的项目。首先需要全局安装yo和generator-code这两个包,然后执行yo code命令,按照提示选择New Extension (JavaScript)作为扩展类型,并设置项目名、标识符、描述等信息。在生成的项目中,可以使用VSCode的开发者工具和WebView类似于iframe的实现来实现插件的功能。可以通过创建Webview来展示自定义的HTML内容,并通过JavaScript来与插件进行交互。
阅读全文