hbuilderx安装教程_HBuilderX入门教程
HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的功能和于一身。
本文档面向入门用户,建议初学者仔细研读。
1. 介绍
执着于更快一步的理念,hx的左侧项目管理器是单击响应而不是双击。
单击展开目录,单击预览文件,双击打开文件。
预览文件时顶部标签卡是斜体的,此时继续预览其他文件会替换预览标签卡。双击文件后标签卡为正体,不会被替换。预览的文件一旦开始编辑,也会自动变为正式打开状态。
项目管理器默认是不显示图标的,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以选择显示图标。HBuilderX支持业内多种图标插件,可以在工具-插件安装中找到更多图标插件。
hx的文件保存是免丢失的,并且有热退出功能。所谓热退出,就是关闭hx时不要保存文件。再次打开时仍然是之前的状态。未保存的文件也会继续原样展现。
hx默认带有每30秒保存一次临时文件的策略(可以在设置里调节时间间隔)
不管是关闭hx,还是断电、崩溃,临时文件始终会自动保存。
前端预编译型语言越来越多,每次保存都触发编译比较消耗资源,有了hx,可以专注写代码而不需要隔一会按一下ctrl+s,需要编译时再保存,或编辑多个文件后按ctrl+alt+s全部保存。
2. 语法提示
拥有自研的世界级语法分析引擎一直是HBuilder系列产品傲视业内的资本。
但前端框架众多,框架的语法提示需要加载单独的语法提示库。
框架语法提示库是在页面的右下角选择。(如下图示例)
注意:
框架语法库是挂在项目下的,一个项目加载了一个框架语法库后,这个项目下所有js文件或HTML文件都会在代码助手提示这个框架的语法。
但如果一个文件是单独从硬盘打开,没有整项目拖入hx,那么此时无法加载框架语法库。
3. 代码助手
hx的代码助手,可以按alt+数字选择直接选择某个项目,类似中文输入法数字选词 (如下图示例)
4. 语法帮助
光标放到某api处,按下F1,就可跳转到这个api的官方手册。目前支持vue、uni-app、5+等api (如下图示例)
5. 编辑器与项目管理器的同步
hx默认是打开的标签卡和项目管理器自动关联,切换标签卡时项目管理器也会跟随变化,如不需要此功能,可以将鼠标移到项目管理器区域,右上角会悬浮菜单,在里面可以取消“与编辑器同步”。(如下图示例)
一般多项目时建议取消同步功能。
取消同步后,如需手动定位标签卡所在的项目,可以对编辑器点右键-“在项目管理器中定位”。(如下图示例)
6. 多光标
hx支持多光标,按 ctrl+鼠标左键 就可增加一个光标,ctrl+鼠标右键 可取消一个光标或选区。(如下图示例)
还可以选择相同词。ctrl+e (mac是cmd+d)可选中相同的词做批处理。(如下图示例)
7. 列选择
hx的列选择,是alt+鼠标拖选。或者用快捷键ctrl+alt+↑或↓。(如下图示例)
8. 选择编码、着色高亮
当你打开一个不认识的文档时,即hx的无法高亮着色,可以在右下角选择使用其他编辑器打开。
当你打开一个文件编码错乱,产生乱码时,也可以在右下角选择编码重新打开。(如下图示例)
9. 转到定义
转到定义是非常常用的功能,普通编辑器不长于此,只能猜单词跳转。
HBuilderX有强大的语法分析引擎,可以准确的跳转定义位置。
转到定义的快捷键是Alt+d,鼠标操作是alt+左键单击(注意不是ctrl,因为ctrl留给了多光标)
而HBuilderX还有一个特色是转到定义到分栏,ctrl+alt+左键,可以把一个定义处的代码打开在另一侧,方便共同查看
如何回到上一个光标位置?
在HBuilderX中,Alt+Left或点击工具栏上的
备注:支持切换【Ctrl+鼠标左键】或【Alt+鼠标左键】进行转到定义 (菜单【选择】,最后一个菜单)。
10. 文件快速打开
在顶部工具栏直接搜索工程下的文件名并打开,或者使用快捷键ctrl+p。(如下图示例)
比较常用的文件,可以在工具栏里添加到收藏夹。(如下图示例)
ctrl+p也是标签卡管理的重要工具,屏幕窄看不清左右打开的标签时,可以用它来浏览所有以打开的标签
11. 目录内搜索
项目管理器点右键,选:查找字符串(当前目录),可在该目录下所有文件中搜索字符串(如下图示例)
12. 缩进调整
hx默认使用tab缩进,tab长度为4个空格。
如果你需要调整缩进长度,比如tab长度为2个空格,在工具设置-编辑器中调整。(如下图示例)
如果不喜欢使用tab而喜欢使用空格,也可以在设置中调。注意这个调节只是编辑器里敲tab按键时转为了空格,格式化时仍是tab。
调节格式化设置,参考菜单工具-插件配置。hx支持几种格式化插件,他们都有自己的配置定义文件,请按插件配置中的说明修改设置。(如下图示例)
比如格式化插件Formator-Prettier,它的配置文件为:【工具】【插件配置】【formator-frettier】【formator.config.js】(如下图示例)
在菜单编辑-缩进中,可文件的缩进从tab转空格或从空格转tab。
13. 语法校验
hx的语法校验都是插件,在工具插件安装中选择各种校验插件,不同语言的校验插件不一样。安装校验插件后,保存文件时会自动执行语法校验。(如下图示例)
校验概要结果会显示在状态栏,比如有2个错误(如下图),可以按F4切换到不同的错误处,画有红波浪线(如下图),鼠标移到红波浪线上会显示具体的错误信息。(如下图示例)
你也可以不保存,直接点菜单工具-验证本文档校验语法 来进行校验。(如下图示例)
15. svn/git项目导入
以git为例:(git项目:需要安装git插件、以及TortoiseGit、并配置ssh秘钥)(如下图示例)
15. 预编译器(less/sass)
在【菜单】-->【插件安装】里有各种语言的预编译器,比如less、ts等。安装预编译器后,hx下的所有项目均可用共用。
sass示例: (如下图示例)
预编译器安装后使用入口在外部命令菜单中
sass/less插件配置小技巧:
less、sass可以在插件配置里,配置为保存文件时自动编译。
安装less或sass插件后,进入菜单【工具】【插件配置】【compile-less】,点击package.json文件,将onDidSaveExecution修改为true。注意修改后需要重启HBuilderX才能生效
{
"onDidSaveExecution": true
}
16. 更多文档教程
hbuilderx安装教程_HBuilderX入门教程相关推荐
- TensorFlow 中文资源精选,官方网站,安装教程,入门教程,实战项目,学习路径。
转载至:http://www.nanjixiong.com/thread-122211-1-1.html Awesome-TensorFlow-Chinese TensorFlow 中文资源全集,学习 ...
- 2021最新版本Python的下载安装及使用入门教程
1.进入官网下载: https://www.python.org/downloads/ 进入后,如下图所示操作,点击Downloads,我的电脑是Windows系统的,这里直接点击下载最新版本. 如果 ...
- extjs form java_[Java教程]ExtJS入门教程02,form也可以很优雅
[Java教程]ExtJS入门教程02,form也可以很优雅 0 2014-03-28 12:00:40 在上一篇<Extjs window 入门>中,我们已经看到了如何将一个form组件 ...
- hbuilderx 数据库_HBuilderX入门教程
1. 介绍 执着于更快一步的理念,hx的左侧项目管理器是单击响应而不是双击. 单击展开目录,单击预览文件,双击打开文件. 预览文件时顶部标签卡是斜体的,此时继续预览其他文件会替换预览标签卡.双击文件后 ...
- hbilderx 扫一扫_HBuilderX入门教程(一)
原标题:HBuilderX入门教程(一) HBuilderX是一个很不错的代码工具,能够让我们效率更高,但是不是所有的小伙伴都用过,今天呢,小优菌就给大家介绍下. 介绍 执着于更快一步的理念,hx的左 ...
- python第一次使用教程-python入门教程第一日
python 官方下载地址:https://www.python.org/downloads/ 根据系统的不同安装包也不同,但是开发的程序兼容各个操作系统,这点是python能吃得开的原因之一. py ...
- linux terminal教程,Linux入门教程 - 如何记录和重放Linux终端会话
原标题:Linux入门教程 - 如何记录和重放Linux终端会话 来自:https://www.linuxmi.com/replay-linux.html 使用命令,我们可以在type文件中记录终端会 ...
- python3 scrapy 教程_Scrapy 入门教程
Scrapy 是用 Python 实现的一个为了爬取网站数据.提取结构性数据而编写的应用框架. Scrapy 常应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 通常我们可以很简单的通过 ...
- python入门语言教程_Python入门教程(1)
人生苦短,我用Python! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于19 ...
最新文章
- php 5.4 iis6,WIN2003+IIS6+FastCGI+PHP5.4的安装配置
- java中的assert
- 如何将Mac OS X10.9下的Python2.7升级到最新的Python3.3
- 从命令行列出所有环境变量?
- HTML+MYSQL+PHP搭建带有cookie的登陆页面
- leetcode-283-移动零
- Google SRE 读书笔记 扒一扒SRE用的那些工具
- JS判断客户端是否是iOS或者Android
- 记录一次ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exis故障【已解决】
- CCF201409-4 最优配餐(100分)
- Qt5 自创简单音乐视频播放器(基础版)
- 线程安全的list之synchronizedList和CopyOnWriteArrayList
- 黑马程序员 Python学习笔记之 变量的命名
- Numpy之文件存取
- stata面板数据gmm回归_12短动态面板数据模型1-差分GMM估计-Stata软件操作教程
- PTT BBS-- 软件人的心路历程分享 (补习计算机、学习写程序、出书、出国、求职...这位前辈都经历过了)...
- 推荐 10 个实用但偏执的 Java 编程技巧
- 2020,好看视频的创作生态棋局
- Excle常用快捷键
- 请求servlet操作成功后,在JSP页面弹出提示框
热门文章
- 【PTA】平面向量加法
- life: zz 关于爱情
- 拼多多向1688开枪
- 服务器电脑上保存的文件找不到了,保存在电脑上的word文件突然找不到怎么办?该如何找回来...
- Python 把几张图片拼接成一张图片,并且写上文字
- 关于学校计算机的情景剧剧本,校园剧本校园情景剧
- npm install的报错 npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path D:\work\main/package.jsonnp
- (C语言编程)PTA里“三天打鱼两天晒网”
- 为什么建议选英文技术书籍
- camunda工作流开发实战------04 请假流程实例