震惊！装了这个插件能让你的vscode开发效率快10倍！

1. 简介

上一篇我们介绍了在idea里边摸鱼，斗地主，看小说，玩大富翁，经过了一段时间这个vscode版本的插件终于是做出来了
先是搞了一个vue和electron版本的，可以支持web和打包成 windows，mac, linux安装包
整了几天之后终于是能够在vsocde插件中的webview展示出来了

1.1 效果展示

2. 安装

2.1 从插件市场安装

打开vscode的插件市场，CTRL + SHIFT +X,直接搜索xechat-vscode安装即可，打包的版本是vscode最新版1.82.2，最低支持版本为1.18.0,如果版本太低可以升级一下版本，反正是免费的

2.2 自己打包安装

我这有一份打包好的vsix文件，选择 install form VSIX安装就行了,没找到怎么分享，自己来qq群拿吧754126966

2.3 怎么添加功能

这个需要下载 xechat-vue改完自己的需求然后打包成dist, 然后下载xechat-vscode项目
目录结构如下

1. 将刚才打包的dist复制到src下把原有的dist替换了，vue打包的时候需要将vue.config.js配置变更一下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 防止打包出的index.html 双击之后空白页
  publicPath: './'
})
1
2
3
4
5
6

2. 找到src/extension.ts 找到 vueWebview方法，替换 chunkJs、chunkCSS、indexJS、indexCSS四个变量的名字为你的dist中的名字

export function vueWebview(context: vscode.ExtensionContext, panel: vscode.WebviewPanel) {
	// 把这四个文件的名字换一下
	const chunkJs = getAsWebviewUrl(context, panel, 'src/dist/js', 'chunk-vendors.01170ff8.js');
	const indexJs = getAsWebviewUrl(context, panel, 'src/dist/js', 'index.6a1085b3.js');
	const chunkCSS = getAsWebviewUrl(context, panel, 'src/dist/css', 'chunk-vendors.cec497f3.css');
	const indexCSS = getAsWebviewUrl(context, panel, 'src/dist/css', 'index.82d4104a.css');
	return `


  
  
  
  
  
  
  ${chunkCSS}" rel="stylesheet">
  ${indexCSS}" rel="stylesheet">




`;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 实现了什么功能

• 已实现的命令

• 暂未实现的命令

4. Feature

• 插件跟随vscode主题变更颜色
• 被其他人@提示出来vscode消息
• 适配游戏
• 快速关闭打开的webview
• 最好做成侧边栏的效果，就和插件市场那样就展示那么大