crazyurus / miniprogram-vscode-extension

微信小程序 VSCode 插件，提供预览、打包上传、代码补全、语法高亮等特性

微信小程序开发工具

提供预览、打包上传、代码补全、语法高亮、依赖分析、项目模版等功能。可以在面板的底部“微信小程序”处使用，如下图所示。

功能

代码补全与语法高亮

• 支持小程序 API 的代码补全
• 支持 WXML 中组件的代码补全
• 支持 WXML WXSS WXS 的语法高亮
• 支持快速创建 Page 及 Component

预览和上传小程序

• 支持设置小程序上传目录
• 支持扫码预览小程序
• 支持小程序打包并上传到微信后台
• 支持查看小程序编译产物
• 支持下载最近上传的 SourceMap

代码分析

• 支持代码静态依赖分析
• 支持代码质量分析

项目设置

• 支持查看和修改项目配置
• 支持构建 npm
• 支持查看开发文档
• 支持打开微信开发者工具 IDE

主题

• 提供 Dark 和 Light 两种主题
• 提供图标

组件支持

• 支持点击自定义组件标签跳转到对应文件
• 支持点击绑定的函数名跳转到对应函数定义

其它

• 支持微信小程序开发文档搜索
• 支持代理设置

常见问题

1. IDE 默认会寻找项目根目录的 project.config.json。若小程序项目有单独的目录，将无法自动识别，需按照提示选择该文件进行设置。设置完成后会在项目目录下生成 .vscode/settings.json 用于存储。

2. 在 微信公众平台 - 开发 - 开发设置 下载代码上传密钥后，一定要关闭 IP 白名单 功能，否则无法正常预览和上传小程序。如果你的设备是静态 IP，也可以在白名单中配置设备 IP 使用（不推荐）。

反馈

创建 Issue

欢迎 Pull Request

Email: [email protected]

致谢

感谢以下开源项目：

• minapp-vscode

• vscode-miniapp-helper

• w-extension

• @tarojs/plugin-mini-ci

• minapp-comp-definition

部分功能的实现参考了微信开发者工具 IDE

License

GPL-3.0

miniprogram-vscode-extension's Issues

希望能够支持项目配置识别目录

类似uniapp和taro这类框架， 都会编译后生成一个小程序文件目录， 希望能加入配置直接进行识别。

都不维护的，Issues有什么用，都散了吧

MacBook M1 代码补全，不显示文字内容？

MacBook M1 代码补全，不显示文字内容。这里有截图（https://segmentfault.com/q/1010000043927991?_ea=307700682）

vscode不显示小程序操作面板了

切换到1.4.13是正常的。

您好，README.md文档里，反馈下的issue,PR链接都指向不对

GitHub项目描述建议也加上新的功能描述：模拟器，预览，打包上传，这样方便搜索

快速创建 Page 及 Component 失效

VScode 1.45.1
插件 1.36
系统 win10 2004
快速创建 Page 及 Component 失效

静态代码分析

你好，只能在微信小程序中分析代码资源吗，普通项目不能用吗

点击启动模拟器后在哪里看编译的进度或者报错？

我升级到1.3.2还是一直停留在正在编译编译小程序，没看到哪里显示编译的进度或者报错什么的

启动模拟器报错

新建Page报错 ENOENT: no such file or directory,

无论是新建Page还是Component都报错，显示的目录是C盘，而项目实际在E盘，重装VSCODE和扩展都无效。
ENOENT: no such file or directory, open 'C:...\pages\test.js'

此插件启动后让html文件js代码高亮失效和出现其他不可预期问题

如题，此插件启动后影响html后缀文件导致出现各种问题，如注释异常，script文件高亮失效等问题

云开发模式下启动模拟器无法正常工作

云开发模式下启动模拟器显示“请使用 2.2.3 或以上的基础库以使用云能力”，使用官方开发环境能正常开启模拟器。

这他呀的怎么用呀

这他呀的怎么用呀

昨天的升级，日志md没有修改

小程序代码上传密钥文件怎么下载

在vscode中使用插件需要选择一个文件作为代码上传的密钥，可是我在小程序后台管理页面的 开发管理-开发设置-小程序代码上传 里面只有重置密钥选项，并会得到一串AppSecret，只能复制其密钥的文本，并没有下载文件的选项啊……

---

启动模拟器报这个是什么问题,小白不太明白

SyntaxError parsing statement => case <= : Unexpected token (1:0)
at Parser.pp$5.raise (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:1761:8)
at Parser.pp$3.parseExprAtom (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3750:12)
at Parser.pp$3.parseExprSubscripts (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3494:19)
at Parser.pp$3.parseMaybeUnary (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3474:19)
at Parser.pp$3.parseExprOps (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3404:19)
at Parser.pp$3.parseMaybeConditional (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3381:19)
at Parser.pp$3.parseMaybeAssign (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3344:19)
at Parser.pp$3.parseExpression (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:3306:19)
at Parser.pp$1.parseStatement (c:\Users\Administrator.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\babylon\lib\index.js:1906:19) {
pos: 0,
loc: Position { line: 1, column: 0 }
}

微信开发者工具的服务端口已关闭，请打开设置 — 安全设置，将服务端口开启，已经打开了但还是这个提示

Error: errCode: -1 errMsg: get new ticket fail innerCode: -80002
微信开发者工具的服务端口已关闭，请打开设置 — 安全设置，将服务端口开启，已经打开了但还是这个提示

启动模拟器提示：指定目录不存在或者不是目录，请检查

怎么指定目录？我打开的就是项目根目录，一个上线了的小程序，不存在编译错误

是个人项目吗？README.md上个微信收款码，想给你打赏买一杯咖啡

上传小程序代码报错

如图，上次更新后上传成功。今天重新加载更新后，上传失败。

启动模拟器失败

Error parsing statement => wxs.Mtrltypeimage(type.mtrltypeid) <= : Unknown Type: CallExpression
at walk (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:6033)
at walk (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:4139)
at walk (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:4079)
at walk (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:3943)
at walkExp (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:6142)
at parseExp (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:6338)
at parseText (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:3639)
at pushProp (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:22554)
at processAttrs (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:21885)
at Object.start (c:\Users\ee160.vscode\extensions\crazyurus.miniprogram-vscode-extension-1.3.6\node_modules\wxml-transpiler\build.js:1:17799) {
name: 'Error parsing statement => wxs.Mtrltypeimage(type.mtrltypeid) <= '
}

预览小程序失败

是不是我的文件目录出了问题，可是我是用小程序的ide建的默认demo。
报错信息如下

代码补全如何工作

代码补全是如何工作的，你可以举个例子吗？
非常感谢！！

子目录作为微信小程序的工作目录

您好@crazyurus. 我遇到的问题类似 Issue #19.
我的工程目录包含server和client两部分, 微信小程序作为我的客户端, 源码放在client子目录下. 工程目录类似于:

root
├ .vscode
│  └ settings.json
├ client
│  ├ pages/index
│  │  ├ index.js
│  │  ├ index.json
│  │  ├ index.wxml
│  │  └ index.wxss
│  ├ app.js
│  ├ app.json
│  ├ app.wxss
│  └ project.config.json
└ server

如果我在根目录root下打开vscode, 会报错并提示:

Command 'MiniProgram: 预览小程序' resulted in an error (command 'MiniProgram.commands.compile.preview' not found)

请问我该如何指定client子目录为微信小程序的工作目录? 可以通过.vscode/setting.json完成配置吗?

ENOENT: no such file or directory, open 微信开发者工具

是否可以设置小程序的路径？

模拟器不是实时的吗？

模拟器不是实时的吗？

启动模拟器报错

扩展主机意外终止

预览和上传都是一样的问题

vscode上这个扩展包有多大？每次更新的时候都很久很久更新不完，我这里网速在1M/s以下

扫码预览小程序失败

扫码预览小程序失败

查看报错信息要是因为使用了可选链操作符（?.）
但是project.config.json中"es6"配置了true,
相同的代码现在使用微信开发者工具编译本地预览就没有问题

微信开发者工具的console输出信息在哪里看呢？

如题？
另外请问这个是官方的微信开发者工具的vsCode插件吗？

安装插件之后没有模拟器选项

使用上传密钥一直报错

文件是存在的。

如何修改wxml代码补全?

如何修改wxml代码补全的内容。
例如：view组件不需要补全里面的内容
`<view
hover-class="{{hover-class}}"
hover-stop-propagation="{{hover-stop-propagation}}"
hover-start-time="{{hover-start-time}}"
hover-stay-time="{{hover-stay-time}}"

`

json文件警告：Incorrect type. Expected "object".

当json文件里最上层是array的时候，插件会给出警告

希望可以增加自定义小程序IDE路径配置字段

如上图，IDE在D盘。

提示找不到IDE。

建议增加loading效果和节流， 有些按钮点击没反应

启动预览报错

project.config.json: project.config.json not found

期待这个扩展+CODING的Cloud Studio组合，然后实现网页上就开发微信小程序

左下角打开微信开发者工具时提示服务端口已关闭，但是明明是开着的。

如图：

模拟器启动后，显示一片白，除了顶栏

平台：macOS 10.15.4
小程序框架：Mpx。编译出来的内容，微信小程序开发工具可正常识别。
扫码预览小程序功能正常。