编写一个vscode的插件

最新推荐文章于 2023-07-28 20:35:20 发布

xiaoshunshi

最新推荐文章于 2023-07-28 20:35:20 发布

阅读量495

点赞数

分类专栏： js插件文章标签： vscode javascript ide

本文链接：https://blog.csdn.net/xiaoshunshi/article/details/126726926

版权

js插件专栏收录该内容

16 篇文章 0 订阅

订阅专栏

编写一个vscode的插件

需求

前端h5页面开发中，开发新功能都要从浏览器复制链接发送到微信然后打开
原生端在webview中，调试本地的h5也要输入url地址，非常繁琐
期望vscode可以自动生成一个二维码，供手机端扫码

准备

安装vscode插件开发工具脚手架
vscode插件api官方文档

npm install -g yo generator-code

生成demo

yo code

在这里插入图片描述

根据提示，输入项目名称，扩展的内容等
生成好的项目是一个默认的helloword插件
vscode打开项目
F5，会自动打开一个调试的vscode

开发自己的插件h5-helper

package.json

//  启动命令为h5-helper
 "activationEvents": [
    "onCommand:h5-helper.h5-helper"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      // 配置的启动命令
      {
        "command": "h5-helper.h5-helper",
        "title": "h5-helper"
      }
    ],
    "menus": {
      // 配置文件内右键快捷键
      "editor/context": [
        {
          "when": "editorFocus",
          "command": "h5-helper.h5-helper",
          "group": "navigation"
        }
      ]
    }
  },

extension.js
getIpAddress方法，获取电脑的ip地址

（这里只获取了wifi下的，如果是网线链接，请自己修改方法）

getParams 获取配置文件的参数
QRCode 根据文本生成一个二维码

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
const os = require("os");
const fs = require('fs')
const QRCode = require('qrcode')
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function getIpAddress() {
	/**os.networkInterfaces() 返回一个对象，该对象包含已分配了网络地址的网络接口 */
	var interfaces = os.networkInterfaces();
	console.log(interfaces)
	const {
		WLAN
	} = interfaces
	const ipv4 = WLAN.find(item => item.family === 'IPv4')
	return ipv4.address
}

function getParams(form) {
	let url = '';
	if(!form){
		return url
	}
	const keys = Object.keys(form);
	for (let i = 0; i < keys.length; i++) {
		if (!form[keys[i]]) {
			continue;
		}
		if (url) {
			url += `&${keys[i]}=${form[keys[i]]}`;
		} else {
			url += `?${keys[i]}=${form[keys[i]]}`;
		}
	}
	return url;
}
/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Congratulations, your extension "h5-helper" is now active!');
	let disposable = vscode.commands.registerCommand('h5-helper.h5-helper', function (uri) {
		// 文件路径 
		const filePath = uri.path.substring(1);
		fs.stat(filePath, (err, stats) => {
			if (err) {
				vscode.window.showErrorMessage(`获取文件时遇到错误了${err}!!!`)
			}
			if (stats.isDirectory()) {
				vscode.window.showWarningMessage(`检测的是文件夹，不是文件，请重新选择！！！`);
			}
			const splitFilePath = filePath.split('/')
			const fileName = splitFilePath[splitFilePath.length - 1]
			//  判断是否是需要的文件
			if (fileName !== 'h5-helper.json') {
				vscode.window.showWarningMessage(`请选中h5-helper.json文件，请重新选择！！！`);
				return
			}
			//  读取文件的内容
			const fileData = JSON.parse(fs.readFileSync(filePath).toString())
			const {
				port,
				projectName,
				params,
				appLinkConfig
			} = fileData
			let isAddAppLink = appLinkConfig.includes(projectName) ? 'applink/':''
			// 拼接成url路径
			const qrCodepath = `http://${getIpAddress()}:${port}/${isAddAppLink}${projectName}/${projectName}.html${getParams(params)}`
			// 开启一个新的页面，在页面中生成二维码
			const panel = vscode.window.createWebviewPanel(
				'Test', // 标识webview的类型
				'webview1', // 展示给用户的面板的标题
				vscode.ViewColumn.One, // 显示webview面板以编辑器新列的方式.
				{} // webview其他的选项
			)

			function getWebviewContent(imgPath, url) {
				return `<!DOCTYPE html>
		  <html lang="en">
		  <head>
			  <meta charset="UTF-8">
			  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			  <title>Cat Coding</title>
		  </head>
		  <body>
			  <img src="${imgPath}" width="300" />
			  <p>${url}</p>
		  </body>
		  
		  </html>`;
			}
			// 创建一个二维码
			QRCode.toDataURL(qrCodepath, function (err, url) {
				panel.webview.html = getWebviewContent(url, qrCodepath);
			})
		});
	});
	context.subscriptions.push(disposable);
}

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

module.exports = {
	activate,
	deactivate
}

打包

安装打包工具

vsce版本过高会导致不能打包

yarn add vsce@1.6.0 -g

执行打包命令

vsce package

在这里插入图片描述

出现上图则是打包成功

可能会出现缺少作者提示，package.json中添加 “publisher”: “xiaoshunshi” 即可

插件的安装和使用

vscode中点击左侧扩展按钮
项目中根目录配置h5-helper.json

文件名称必须是h5-helper.json，不然会报错

{
    "port":8090, //端口号
    "projectName":"coupon", // 项目名称
    "appLinkConfig":["coupon"],// 是否需要添加前缀applink
    "params":{ // 链接参数
        "name":"xiaoshunshi"
    }
}