Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Picasso HamburgerNew to Visual Studio Code? Get it now.
Picasso Hamburger

Picasso Hamburger

zhangwei72

|
162 installs
| (1) | Free
Picasso Develop Helper for Meishi Group
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Picasso Hamburger

Picasso Hamburger 专门用于辅助美团美食同学开发 Picasso,支持如下功能:

  • Live Load
  • 快速打包当前 TS 文件(支持对以 -vc.ts 或 -view.ts 为后缀的文件)

其中 Live Load 是重点打造的功能。安装本插件并成功激活后,对 -vc.ts 或 -view.ts 结尾的文件进行保存,会触发该文件打包的文件同步到注册的客户端上,进而同步渲染。

插件提供了两个命令(可在 Shift + Cmd + P 中键入 Hamburger 查看):

  • Pack Current File(hamburger.pack.current): 对当前文件进行打包
  • Live Load Current File(hamburger.liveload.current): 开启Live Load

插件提供了三个配置项(Cmd + ,打开「设置」,键入Hamburger关键字可以过滤看到相关的设置项):

  • hamburger.enable: 用于激活或者关闭 Hamburger
  • hamburger.tsConfigPath: 为 tsc 工具提供配置
  • hamburger.packCommandGeneratorPath: 该路径的 js 文件应该 export 一个函数,函数能根据入参(path)返回打包命令(shell 命令)

如果想激活 Picasso Hamburger,这三个配置项均需要设置正确。

在 Picasso 工程中,典型的 hamburger 配置如下:

status

Live Load

所谓 Live Load 功能,基本原理是让 VSCode 充当 WebSocket 服务器,监听目标 ts 文件的变化,自动打包生成打包文件,然后广播同步到连接中的客户端中,后者根据 js 文件进行渲染;从而实现「实时渲染」。

如何使用Live Load,两个步骤:

  • 激活Hamburger
    • hamburger.enable 配置为true
    • hamburger.tsConfigPath 提供有效的 tsconfig.json 路径
    • hamburger.packCommandGeneratorPath 提供有效的打包命令生成函数的路径
  • 将编辑 tab 切换到目标文件,执行 Hamburger: Live Load Current File

Pack Current TypeScript File

和Live Load功能的限制一样,打包功能只能对 -vc.ts(Picasso v2)和 -view.ts(Picasso v1)有效。

其他

除了上述的命令,Picasso Hamburger 还提供了两个状态信息,如下(enable状态下可见):

status

左侧描述的是当前的client连接情况,点击可以弹出详情信息;右侧描述的是当前Live Load任务的目标module名。

一些可能的问题

Q: 能同时对多个Picasso Module进行LiveLoad吗?

A: 不能,但是可以切换,譬如将Live Load任务的目标module从Foo-vc.ts切换到Bar-vc.ts,只需要将编辑tab切换到Bar-vc.ts,然后执行Live Load Current File命令即可。

Q: 如何触发Live Load呢?

A: 保存(Cmd + S)目标module的-vc.ts文件,或者后者所依赖的ts文件,即可。

Q: 手机使用 LiveLoad 功能,为啥不灵光?

A: 电脑与手机使用的网段不能在同一个,比如电脑使用 MTDP 网,手机使用 MTDP-Tech 网。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft