JoyCoder编码辅助

物料导入

鼠标选择插入物料的位置，然后点击右上角JoyCoder图标，可呼起物料面板，选中物料后点击添加即可插入代码，若项目不存在npm包则触发安装。若导入内容有不清楚的地方，可以点击查看文档和源码。

代码片段自动索引填充

编辑器中输入关键字后自动索引相关代码并给出提示，选择后自动插入相关代码

note

除了内置的代码片段，您还可以选择增加公共代码片段以及私人代码片段。

如需增加公共代码片段，可先在代码片段生成工具中生成配置，然后在JoyCoder配置后台中配置即可。

如需配置私有代码片段，可打开插件设置页配置即可。

note

若您不习惯这样的编码方式，可以在插件设置中选择关闭该功能。

Taro编码辅助

代码片段

JoyCoder 内置了若干 Taro 相关的代码片段，包括 Taro API、Taro 组件、Taro Hooks、Taro 条件语法、React Hooks、React 标签等 800+ 条代码片段，输入关键词即可得到对应的片段提示。各个关键词与代码片段的对应关系见：内置代码片段

note

1、为了避免造成不必要的打扰，JoyCoder 会检测当前 VSCode 窗口下项目的技术栈，根据技术栈动态加载不同框架的代码片段。而这样的体验优化同时也带来了一个问题，即代码片段跟随窗口项目技术栈变更时可能出现不会实时生效的情况，这时需要您重载一下窗口。操作步骤：Command(Ctrl) + SHIFT + P 呼起命令面板，选择 Reload Window。

2、若您不习惯这样的编码方式，可以在插件设置中选择关闭该功能。

路由补全、跳转

• 输入小程序路径时会触发补全提示；
• 按下 Command(Ctrl) 并鼠标点击路由会跳转到该路由源代码

文档辅助

悬浮React Hooks、Taro组件、Hooks、API时提示官方文档入口，点击后可在VSCode中浏览文档

import辅助

输入import后插件将推算出可能的引入，选中回车即可完成引入

上传图片并自动填充代码

上传本地图片至京东图片服务器，然后自动插入相关代码。上传前会经过tinypng压缩，视觉还原神器~

• 操作：使用快捷键：shift + alt + p或右击后菜单栏中选择 JoyCoder: 图片上传-上传图片 呼起文件选择器
• 选择图片文件后点击上传，上传完成后插件将在光标处自动填充代码。填充的代码分三种类型：
  • .css、.scss、.less、.sass、.styl文件

      width: 40px;  height: 40px;  background-image: url(https://img14.360buyimg.com/img/jfs/t1/158068/27/21462/1987/61e7af59E65944d79/102b476b54f4df5a.png);  background-repeat: no-repeat;  background-size: 100% 100%;

  • .md文件

    ![红包选中.jpg](https://img14.360buyimg.com/img/jfs/t1/158068/27/21462/1987/61e7af59E65944d79/102b476b54f4df5a.png)

  • 其他文件只插入图片链接

上传剪切板中的截图并自动填充代码

上传剪切板中的截图并自动填充代码，写技术文档的神器~

• 操作：使用快捷键：shift + alt + v或右击后菜单栏中选择 JoyCoder: 图片上传-上传截图 即可上传图片
• 上传完成后插件将在光标处自动填充代码，填充规则同上传本地图片

标签及CSS自动补全

输入标签名加下划线加类名（如View_main）后回车或按Tab键会自动生成 CSSModule 形式标签，若不存在module.scss文件和引用，则自动创建，并在CSS文件中补充新键入的类名定义。

HTML转CSS/SCSS/LESS

提取 XML 中的类名并将其转为 CSS/SCSS/LESS 语法

CSS转CSSModule

将选中的 CSS 转为 CSSModule，不选中则转当前行

CSS悬浮提示及跳转定位

鼠标悬浮至类名时会提示该类名对应的 CSS 代码，按住 Command(Ctrl) 并点击类名可跳转到对应的 CSS 代码处

快捷Console

暂不支持JS/TS之外的语言

选中要打印的变量，按下快捷键：Command(Ctrl) + SHIFT + C即可