在HBuilderX中用代码块功能快速生成代码

客官°小女子只卖身不卖艺 2024-04-23 12:43 171阅读 0赞

[https://hx.dcloud.net.cn/Tutorial/Language/Snippets][https_hx.dcloud.net.cn_Tutorial_Language_Snippets]  
![在这里插入图片描述][2754a6d684cc46c095aae722a7e8b6ef.png]

## 示例 ##

例如，我在下面的区域想快速生成轮播图的代码块，用的是uni-app的代码块  
![在这里插入图片描述][84efc55270184733b71a386f7023870f.png]

uni-app的代码块按u键来激活，我按了u：  
![在这里插入图片描述][9a8a781577bd4334994a536b512b44ef.png]

再继续按s：  
![在这里插入图片描述][ed00fef034ab4a81a7f2e20d51d455f4.png]

选择uSwiper这一项，然后双击：  
![在这里插入图片描述][9928c1946d784bd497626b0edeafb6d4.png]

就快速生成了代码块：  
![在这里插入图片描述][2e43aa6abd134e00a39e0871ed6b371e.png]

## 在HBuilderX中查看内置的代码块 ##

![在这里插入图片描述][2f3d97486d6445258595d40ecccb8444.png]

工具-》代码块设置：  
![在这里插入图片描述][13113c8eb3534d7fafb6486488312c24.png]

假设，我要查看vue代码块：  
![在这里插入图片描述][ba16af200d7646beaff0b06350d30b00.png]

![在这里插入图片描述][99a94547a28042669875827892f23ecd.png]

**其中prefix的内容就是代码块的触发字符，就是敲什么字母可以激活这个代码块。**

[https_hx.dcloud.net.cn_Tutorial_Language_Snippets]: https://hx.dcloud.net.cn/Tutorial/Language/Snippets
[2754a6d684cc46c095aae722a7e8b6ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1190c09c25a640d0823073fcf9b5ac77.png
[84efc55270184733b71a386f7023870f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/65fdc98627b54840b38b75f57ce74603.png
[9a8a781577bd4334994a536b512b44ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/4298f1a84b534191b20d0cc9007c8c9d.png
[ed00fef034ab4a81a7f2e20d51d455f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c4022c903a4541d094b88ccd51df0c8e.png
[9928c1946d784bd497626b0edeafb6d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/40e29ed9742e41858be4d95a39188967.png
[2e43aa6abd134e00a39e0871ed6b371e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e7e275794e4a4bda8d7f6b982dcde532.png
[2f3d97486d6445258595d40ecccb8444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/604a77dc00834585933813fb9192215e.png
[13113c8eb3534d7fafb6486488312c24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8a2b7f274ffa45db84c51e901710e582.png
[ba16af200d7646beaff0b06350d30b00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/58e0c162738d45c191c1b441c2aacf06.png
[99a94547a28042669875827892f23ecd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/51ff8fdb1b954b8e9c036170ad1000a0.png