前言：关于前端IDE，流行的就那么几个，但如果要问哪个编辑器是最好用的，那么毫无疑问，vscode是开发起来最舒服的。不得不说vscode有代码提示、import跳转、import语句自动补全等功能，而且git支持很好。加入typescript之后，开发体验真的提升了一个非常高的水平。年级。但是HBuilderX在这些方面的支持实在是太差了。只有内置的代码提示，不支持d.ts文件，自定义扩展函数少，使用typescript开发完全失去类型提示，使得typescript在写的时候发现问题。优势完全丧失。所以我们公司的多终端程序都是使用uni-cli脚手架搭建的工程在vscode中运行，但是和HBuilderX相比，缺少运行后自动打开小程序的功能，那么问题来了，HBuilderX可以做到，为什么我们vscode做不到！其实这样做很简单，导致我怀疑HBuilderX为了宣传自己的编译器没有做这个功能……（其实是真的）目前我已经做了第三个——派对插件，可直接使用。这篇文章的主要目的是记录一下用到的技巧，比如如何自己制作一个脚手架程序。个人博客：gitee.io/mao-blog脚手架自动打开小程序：open-devtools微信小程序命令行v2微信开发者工具提供cli命令，可以使用cmd对外打开和操作项目。这里只使用了一些说明，有兴趣的同学可以去官网文档。首先找到开发者工具的目录，用cmd打开当前目录，我们创建一个小程序项目放到开发者工具的根目录下，然后尝试用命令行打开这个项目。cdF:softsWeChatwebdevelopertoolcliopen--projectF:softsWeChatwebdevelopertooldemo运行后会发现开发者工具自动打开程序，这里需要注意，运行路径一定要选绝对路径，否则会报错。npm命令行调用节点工具。这里我只记录下我的使用方式。它可能不是很全面。推荐阅读这篇文章用nodefrom0编写自己的命令行程序#初始化项目npminit#修改package.json中的bin字段"bin":{"open-dev":"./index.js"}#newindex.js#!/usr/bin/envnodeconsole.log('open-dev')#`#!/usr/bin/envnode`意思是让系统自己找到node的执行程序，这条线是必不可少的。#执行npmlinknpmlink#运行脚手架工具git-tool#index.js中的process.argv可以用来获取命令行参数#注意#!/usr/bin/env节点是必需的#!/usr/bin/envnodeconsole.log('open-dev')console.log(process.argv)#['...','...',....]使用shelljs调用cmd命令ShellJS在Node之上.jsAPIUnixshell命令的可移植(Windows/Linux/macOS)实现。它是基于Node.jsAPI的封装。其他API可以在官网查看：shelljsconstshell=require('shelljs')//进入目录shell.cp('F:\\softs\\WeChatwebdevelopertools')//调用命令，这里你需要注意的是，调用命令的时候需要在末尾加上--color=always，否则不会出现命令行colorshell.exec('cliopen--projectF:\softs\WeChatwebdevelopertools\demo--color=always')获取当前的执行环境下面我们来仔细看看uni-cli自带的命令。他们面前有一长串命令。该命令的具体作用是区分当前的运行环境和类型。如果想了解更多，可以看看cross-env的官方文档。运行参数为cross-envNODE_ENV=developmentUNI_PLATFORM=mp-weixin"dev:mp-weixin":"cross-envNODE_ENV=developmentUNI_PLATFORM=mp-weixinopen-devtools"的命令会相当于我们命令js中的处理在.env环境变量中添加两个参数constNODE_ENV=process.env.NODE_ENV//developmentconstUNI_PLATFORM=process.env.UNI_PLATFORM//mp-weixin获取pageage.json中的字段我们需要知道微信开发者工具的路径是不确定的，所以需要一开始就确定。我的想法是将pageage.json存储在项目中。{"devtoolsConfig":{"weixin":"F:softsWeChatwebdevelopertools"}}脚手架真正的开发有了这些基本的东西，基本的思路已经有了，实现功能的具体路线就是基本路径和developerToolPath""RunDeveloperTools""调用对应项目运行命令//index.js#!/usr/bin/envnodeconstfs=require("fs")constpath=require("path")constshell=require('shelljs')constutils=require(path.resolve(__dirname,'./src/utils'))//运行项目路径读取，这里需要注意的是安装依赖时，当前路径是xxx/node_module/xxx，所以需要回滚两层//当前运行的环境变量和运行命令，getRunPresetExec是我封装的方法，可以获取当前对应的运行命令//例如development|mp-weixin对应->npxcross-envNODE_ENV=developmentUNI_PLATFORM=mp-weixinvue-cli-serviceuni-build--watch--color=alwaysconstNODE_ENV=process.env.NODE_ENVconstUNI_PLATFORM=process.env.UNI_PLATFORMconstEXEC_CODE=utils.getRunPresetExec(NODE_ENV,UNI_PLATFORM)//微信项目源码路径，此处为项目constEXEC_CODE_TYPE=NODE_ENV==='development'中的小程序源代码路径？'dev':'build'constWEIXIN_PRESET_PATH=path.resolve(PRESET_PATH,`dist/${EXEC_CODE_TYPE}/mp-weixin`)//获取开发者工具目录(pageage.json)constPACKAGE_CONFIG=JSON.parse(fs.readFileSync(PACKAGE_PATH).toString())constDEVTOOLS_CONFIG=PACKAGE_CONFIG.devtoolsConfig||{}constWEIXIN_DEVTOOLS_PATH=DEVTOOLS_CONFIG.weixin//如果调用环境是微信if(UNI_PLATFORM==='mp-weixin'){//先递归写，防止调试工具因为没有内容而报错//这里是需要注意的是不能直接写入文件，需要先创建一个完整的目录//否则会直接报错。这里的mkdirsSync是我打包的递归目录创建方法utils.mkdirsSync(WEIXIN_PRESET_PATH)constwriteFileStr=JSON.stringify({appid:'touristappid',projectname:'open-devtools'},null,"\t")fs.writeFileSync(path.resolve(WEIXIN_PRESET_PATH,'./project.config.json'),writeFileStr,{flag:'w'})//打开小程序工程constopenDevToolsShell=`cliopen--project${WEIXIN_PRESET_PATH}--color=always`shell.cd(WEIXIN_DEVTOOLS_PATH)//打开后运行编译工具shell.exec(openDevToolsShell,()=>{shell.cd(PRESET_PATH)shell.exec(EXEC_CODE)})//返回当前状态，防止运行的代码返回false；}//如果上面的代码没有执行，直接执行运行项第一个命令shell.cd(PRESET_PATH)shell.exec(EXEC_CODE)
