当前位置:首页 > 实用技巧 >

hbuilderx详细教程(hbuilder x安装教程)

来源:原点资讯(www.yd166.com)时间:2023-11-14 03:24:13作者:YD166手机阅读>>

代码块是快速开发的利器。简单的敲几个字母,回车,就能生成大段代码。

比如我们经常会敲if...else结构,在HBuilderX中,只需敲ife回车,就能直接生成相应的代码结构。

1.敲ife

hbuilderx详细教程,hbuilder x安装教程(1)

2.回车后生成if结构体

hbuilderx详细教程,hbuilder x安装教程(2)

HBuilderX已经内置了大量常用的代码块,熟悉这些代码块,对于提高编程效率有重要帮助。

查看内建的代码块,点菜单-工具-代码块设置,选择你要查看的语言的代码块。

hbuilderx详细教程,hbuilder x安装教程(3)

打开的界面中,左侧即是预置的代码块,右侧是开发者可以自己扩展代码块的地方。

hbuilderx详细教程,hbuilder x安装教程(4)

常用代码块列表

通用js代码块

  • iff :简单if
  • forr :for循环结构体
  • fori :for循环结构体并包含i
  • funn:函数
  • funa:匿名函数
  • clog:打印日志
  • clogvar:打印变量命名和值

dom代码块

  • dg :document.getElementById
  • dl :$("")

vue代码块

  • 敲v,即可拉出各种vue代码块

uni-app代码块

  • 敲u,即可拉出各种uni-app代码块
  • 还有ifios、ifandroid,这2个平台判断代码块(HBuilderX 1.9.10 )
模板示例

自定义代码块都是配置json文件中的,直接来一个js例子吧,上述ife代码块的配置如下:

复制代码 { "if ... else": { "body": [ "if ($1) {", "\t$0", "} else{", "\t", "}" ], "prefix": "ife", "scope": "source.js" } } 代码块配置格式说明

HBuilderX使用json定义代码块的格式,兼容vscode的代码块格式,也就是你可以把vscode里已经配置的自定义代码块方便的挪到HBuilderX中使用。

每个配置项的说明如下:

key

"key" :代码块显示名称,显示在代码助手列表中的名字。key是不能重复的。

上面例子中"if ... else"就是一个key。

prefix

"prefix" :代码块的触发字符,就是敲什么字母可以激活这个代码块。

body

"body" :代码块的内容。内容中有如下特殊格式

$1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1;如该位置有预置数据且需要选中,则写法是${1:selectedtext};这里还支持下拉候选菜单,多选项即下拉候选列表使用${1:foo1/foo2/foo3}

$2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop,在HBuilderX中看到类似绿色光标的不闪的竖线,就可以按tab或回车跳转光标过去)

$0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。

双引号使用\"转义

换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔

缩进需要用\t表示,不能直接输入缩进或空格!

triggerAssist

"triggerAssist" :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false。

project

project: 将代码块控制在指定项目类型下生效。可取值有:uni-app、Web、App、Wap2App

比如:"project": "uni-app",代表这个代码块仅在uni-app项目下生效

如果不设置,则该代码块在所有项目类型下均生效。

Web指普通项目,App指5 App项目。

如需设置多种项目类型,用逗号分隔。比如:"project": "uni-app,App"

注意事项
  1. 每个代码块以key为主键,多个代码块需要逗号分隔。
  2. 如果json语法不合法,编辑器状态栏会弹出错误信息,json中会画出红波浪线,请注意修正。
,

栏目热文

hbuilderx 官网(hbuilderx是免费软件吗)

hbuilderx 官网(hbuilderx是免费软件吗)

现在前端开发大多数使用的是VSCode,VSCode确实强大,它有很多的优点,这里就不多赘述了,但是VSCode有一个不...

2023-11-14 03:53:32查看全文 >>

hbuilderx安装步骤(hbuilderx怎么导入本地文件)

hbuilderx安装步骤(hbuilderx怎么导入本地文件)

HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。...

2023-11-14 03:24:41查看全文 >>

hbuilderx怎么加入图片(hbuilderx怎么插入字体)

hbuilderx怎么加入图片(hbuilderx怎么插入字体)

开发语言:Html5开发工具:HBuilderX先说一下,开发工具下载,可以直接去百度搜HBuilderX,百度搜“HB...

2023-11-14 03:46:58查看全文 >>

hbuilderx微信小程序教程(微信小程序lv教程)

hbuilderx微信小程序教程(微信小程序lv教程)

主讲人:笨小猪 QQ 1218764060 微信:liufeicloud 官网:【什么是HBuilder X?】HBui...

2023-11-14 03:11:07查看全文 >>

hbuilderx实例教程视频(最新版hbuilderx使用方法)

hbuilderx实例教程视频(最新版hbuilderx使用方法)

HBuilderX是一款轻巧、高效、极速的编辑器 IDE合体程序,它的前身Hbuilder是最好用的JavaScript...

2023-11-14 03:12:30查看全文 >>

hbuilder入门(hbuilder使用方法)

hbuilder入门(hbuilder使用方法)

HTML的入门1. HTML的代码文件(1)打开Hbuilder开发工具,新建项目,点击右键新建一个HTML文档。(2)...

2023-11-14 03:34:39查看全文 >>

hbuilderx怎么改成中文(hbuilderx的输入提示怎么打开关闭)

hbuilderx怎么改成中文(hbuilderx的输入提示怎么打开关闭)

之前一直使用的是2.6.X的版本,今天更新了一下HBuilderX,更新到了3.1.13。打包app的时候出现了错误,查...

2023-11-14 03:34:33查看全文 >>

hbuilder个人简介(怎么用hbuilder做个人介绍)

hbuilder个人简介(怎么用hbuilder做个人介绍)

在开发实践中,会使用到各种第三方组件,比如Element UI,通常的做法是到官网中复制模板再在本地根据设计要求进行修改...

2023-11-14 03:48:26查看全文 >>

hbuilderx使用教程视频(hbuilderx怎么插入图片视频)

hbuilderx使用教程视频(hbuilderx怎么插入图片视频)

同学,学uni-app好啊,大致上写一套代码能生成这么多个平台的应用,我简单念一下,它们分别是Android应用、IOS...

2023-11-14 03:18:23查看全文 >>

hbuilderx运行不了(下载hbuilderx怎么打不开)

hbuilderx运行不了(下载hbuilderx怎么打不开)

本文简介点赞 关注 收藏 = 学会了记录一个在使用 HBuilderX 开发 App 时遇到的问题。同步资源失败...

2023-11-14 03:28:39查看全文 >>

文档排行