摘要
本文主要介绍了vscode 插件开发的流程，以及一些小的技巧！开发中使用到的是vscode、node以及一些依赖。针对快速预览，我在这次项目中使用到的是http serve以及socket，为什么会使用到socket，本文会详细讲到
说明
本次项目的诞生主要是因为懒，在重复又重复的工作中开始有些厌烦，很早就萌生了一键开发、快速生成、便捷修改、模块化的概念。然而在落地页中这些都不能像使用框架那么容易实现。所以这次偶然间遇到了vscode插件可以实现部分功能。我就开始了其妙之旅。
开发
一、准备工作
1、vscode插件开发我们需要申请微软的开发token，用于打包、上线使用，没有这个token无法完成打包! 移步至：Microsoft vscdeo 开发者管理系统
创建一个projects
进入个人 token页
申请一个token
得到token,这里一定要注意复制并保存token ，要不然关闭后就找不到了就得重新再申请一个token！
2、 vscode插件生产工具：官方推荐使用Yeoman 和 VS Code Extension Generator。用如下命令安装：
// 安装自动化工具
npm install -g yo generator-code
// 生成开发项目文件
yo code
// 运行
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
(Move up and down to reveal more choices)
//在os系统上通过上下键来选择要创建的类型
//在win系统上输入1、2、3后按回车来选择
至此开发所需的准备已做好，生成的项目目录结构如下：
├── .vscode // 资源配置文件
├── CHANGELOG.md // 更改记录文件，会展示到vscode插件市场
├── extension.js // 拓展源代码文件
├── jsconfig.json
├── package.json // 资源配置文件
├── README.md // 插件介绍文件，会展示到vscode插件市场
├── test // 测试文件
└── vsc-extension-quickstart.md;二、项目配置
让我们打开package.json文件！
1、 下图是我们最后开发好的效果，在侧边栏上有两个按钮，一个是复制使用，一个是预览使用。点开复制专题按钮后是两个栏目，一个是模板，一个是历史项目文件夹名称。
2、 下图是我们状态栏的代码，红框1中是vscode 侧边活动栏的按钮配置代码，里面有名称，icon图片！篮框2中是点开后的栏目，里面有名称，以及执行任务的id，打开vscode后会执行id对应的程序方法！
3、 下图是默认文件夹地址，主要是用于获取用户的项目目录！后期用户使用时是可以在vscode 的settings.json 文件中配置，非常方便。
4、 下图是我们的项目依赖，项目依赖分为两部分，一部分是开发使用，一部分是项目使用，也就是打包后也需要使用的依赖！这些是要放到dependencies里面的。
在安装时作者遇到过cnpm安装不成功的情况，改用npm安装后就可以了
三、强撸代码
1、 下面是我们extension.js文件中部分代码片段拿来说明，主要也就是这两段代码的一些功能在项目中使用！
// 这里生成的代码是 hzcj-project-vs-cli.view 当用户点击文件夹名称时会调用这个方法
createCommand(context, 'hzcj-project-vs-cli.view', function(args) {
if(!liveView.pageIsOpen){
cp.exec('start http://127.0.0.1:8108/index.html');
}
liveView.socket.emit('message',"http://localhost:8109/" + args +"/index.html")
})
// 这里的代码是生栏目中的项目目录，会在栏目中显示，并且携带了方法名称
vscode.window.registerTreeDataProvider(
'hzcj-project-vs-view.special',
new SpecialTreeData({root: conf.project, command: 'hzcj-project-vs-cli.view'}),
);
2、 下面是creat.js文件中部分代码片段，主要是用于复制粘贴文件使用！
const path = require('path');
const shell = require('shelljs');
const mkdirp = require('mz-modules/mkdirp');
module.exports = class Download {
constructor() {}
copy(sourceDir, targetDir, option = { dir: '', hide: true }) {
}
formatNumber (n){
}
getDate(){
}
async init(demoPath, projectPath, pkgName) {
const self = this;
let projectName = self.getDate() +"-"+ pkgName ;
const sourceDir = path.join(projectPath, projectName);
await mkdirp(sourceDir);
self.copy(demoPath, sourceDir);
return sourceDir;
}
};
3、 下面是LiveView.js文件中部分代码片段，主要是用于快速预览使用！
const fs = require('fs');
var http=require('http')
var sio=require('socket.io')
const cp = require('child_process');
const vscode = require('vscode');
module.exports = class LiveView {
constructor(){
this.clientServe = null
this.projectServe = null
this.socket = null
this.pageIsOpen = false
this.conf = vscode.workspace.getConfiguration('hzcj') ;
}
init(path){
this.creatClientServe(path);
this.creatProjectServe();
this.creatSocket();
// return this;
}
creatClientServe(path){
// 客户端窗口 服务
this.clientServe = http.createServer((req,res)=>{
var url = req.url;
let isScoket = url.indexOf('socket.io/?EIO') >-1?true:false;
if(url.indexOf('socket.io/?EIO')>-1){
return;
}
if(url=='/' || url.indexOf('html') > -1 && !isScoket){
res.writeHead(200,{'Content-Type':'text/html'});
fs.readFile(path + '/src/index.html', function(err, data) {
if (err) {
console.error(err);
return;
}
res.end(data);
});
}else if(url != '/' && !isScoket){
var surl = url;
var type = surl.substr(surl.lastIndexOf(".")+1,surl.length)
res.writeHead(200,{'Content-type':"text/"+type});
fs.readFile(path +"/src"+ surl, function(err, data) {
if (err) {
console.error(err);
return;
}
res.end(data);
});
}
}).listen(8108);//创thhp建服务器
// 打开页面
cp.exec('start http://127.0.0.1:8108/index.html');
}
creatProjectServe(){
this.projectServe= http.createServer((req,res)=>{
var url = decodeURI(req.url);
// console.log("==========url=",__dirname,url)
// respone.writeHead(200,{'Content-Type':'text/html'});
if(url=='/' || url.indexOf('html') > -1){
res.writeHead(200,{'Content-Type':'text/html'});
fs.readFile(this.conf.project + url, function(err, data) {
if (err) {
console.error(err);
return;
}
res.end(data);
});
}else if(url != '/'){
var surl = url;
var type = surl.substr(surl.lastIndexOf(".")+1,surl.length)
res.writeHead(200,{'Content-type':"text/"+type});
fs.readFile(this.conf.project + surl, function(err, data) {
if (err) {
console.error(err);
return;
}
res.end(data);
});
}
}).listen(8109)
}
creatSocket(){
this.socket = sio.listen(this.clientServe)//监听http服务器
// console.log("=====listen===openServer")
this.socket.on('connection', ()=> {
this.socket.emit('message','服务器socket工作中！');
this.pageIsOpen = true;
this.socket.on('my other event', function (data) {
console.log(data);
});
this.socket.on('disconnect', function () { // 这里监听 disconnect，就可以知道谁断开连接了
console.log("=====socket===:断开连接了");
this.pageIsOpen = false;
});
});
}
}
;
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。