大家应该都见过微信小程序开发工具的界面吧。一侧是代码、文件管理、GIT管理，一侧是模拟器。
事实上，VSCode也提供了大部分的能力，美中不足是没有模拟器，而且有些是通过控制台来执行的。
那么，这篇就用VSCode来山寨一个Web开发的IDE吧。
功能集成
日常的web开发，还有些npm脚本要执行，然后（也许是自动）打开浏览器，进入到本地指定端口，开始开发。在开发过程中，写一会代码，然后切换到浏览器看一下，写一会，切换看一下，就酱。
集成脚本指令
我们进入运行与调试标签，点击创建launch.json文件。
然后选择Chrome来初始化文件。
这样我们拿到一个原始的launch.json内容：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
使用添加配置，新建一个npm调用：
选择Node.js: Launch via npm：
然后对自动生成的代码做一下简单修改，最后是这个样子：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": [
"run-script",
"serve",
"--",
"--port=8082"
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node"
}
]
}
然后到调试与运行中，启动Launch via NPM这一项：
而后启动调试控制台，此时该界面的输出，就是之前我们在命令行中，手动运行npm run serve之后的输出内容。
当你点击右上角控制面板的停止按钮，该服务也就终止了。
这样我们的服务的集成就完成。同理也可集成build等所有的scripts脚本。
集成模拟器
也可以通过launch.json集成浏览器的启动：
使用添加配置，添加Chrome: Launch：
简单修改：
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8082",
"webRoot": "${workspaceFolder}"
}
注意这里的8082与之前的npm启动参数是对应的。看下效果：
先选中Launch Chrome这一项，然后点击启动：
然后系统打开了一个新的chrome浏览器：
注意控制台内容，我们在调试控制台中，也能看到同样的内容：
也就是说，通过launch.json启动的chrome，它的控制台与vscode是打通的。
并且，当我停止这个launcher时，被打开的浏览器也会被自动关闭。
IDE内的模拟器
通过一个vscode扩展实现：搜索just-preview：
安装完成后，调用这个扩展，并用这个扩展打开本地开发地址；再做一下界面调整，打开调试控制台，最终效果如下：
噗哈哈哈哈，就很有喜剧效果。
这个just-preview有一丢丢糙了，但咱还不会写这个，咱就不敢说多了。感谢作者！
另外一种集成模拟器思路
不浪费新启动的那个浏览器，直接使用mac的全屏拼接，直接拼成一屏，看起来也还好。
总结
不管是开发工具的优化，还是vscode扩展本身，都是个挺有意思的事情。
后面将继续研究vscode的插件编写，同时考虑electron开发集成ide的思路。
以上。
