推广 热搜: 服务  软件  数据分析  关键词  好友  对方  数据分析系统  搜索  获取  冬季 

HBuilder X 编辑器不得不知道的快捷操作(编写代码和markdown)

   日期:2024-11-12     作者:izped    caijiyuan   评论:0    移动:http://changmeillh.kub2b.com/news/420.html
核心提示:说在前头:补充的新内容有:① 界面书签、折叠代码、代码显示框、转到定义、转到匹配的括号。② 善用官方文档和编辑

HBuilder X 编辑器不得不知道的快捷操作(编写代码和markdown)

说在前头:补充的新内容有: ① 界面书签、折叠代码、代码显示框、转到定义、转到匹配的括号。 ② 善用官方文档和编辑器内部文档,扩展部分。

它是vue.js官网推荐的一款做前端开发的编辑器。 个人使用感觉轻盈,容易上手,界面清爽,最大特点是内置了浏览器视图,不需要切换到浏览器上观看代码效果。还提供小程序,APP等打包和发行。

由中国人研发的,当然界面和说明都非常友好。你想要什么功能还直接能在帮助的需求墙上写。其他别的我不敢说,但是在前端小白编辑器的使用上,我觉得能给打最高分。

这里给上网址HBuilder X官网,旗下多个产品,具体功能自己看。 在这里插入图片描述

除去头部菜单栏,底部状态栏,最主要的就是中间的五块区域:项目管理器q,文档结构图w,编辑区n,迷你地图o和内置浏览器p。他们的快捷键十分好记,请彻底理解下面这句话。

关于界面切换,就用alt。中间靠边的四个块 ,分别对应键盘第一行字母的两端。还可用数字切换不同打开的标签页。

界面图 对应键盘键 在这里就具体说说,在该编辑器中,界面相关的快捷键操作大多数都与alt相关。

  1. 打开或隐藏视图栏目:除了上面图的四个快捷键(alt+q/w/o/p),还有 alt+n是把焦点聚焦在编辑区中。

  2. 配合数字,打开对应的标签卡:就是切换到第一个标签卡。(补充:浏览器用的是ctrl+数字切换,电脑任务栏是win+数字,都可以去试试,别混淆就好。) 标签卡(新建/关闭/恢复)

ctrl+t -> 新建标签卡 (这两个和谷歌浏览器的标签页使用是一样的,为啥是t? 因为tag标签) ctrl+shift+t -> 恢复关闭的标签卡 ctrl+q -> 关闭其他标签卡 ctrl+w -> 关闭当前标签卡 (似曾相识的qw又来了,q在w的左边,先关闭其他q,再关闭自己w

  1. 打开菜单,方便查看命令:alt+第一行剩下的字母,如e r t y u i 这些都是打开菜单的,不信你观察一下菜单栏每个项目的后面是不是有个字母?非常巧妙的是,他们都是第一行键盘字母。那么还有其他的吗?有,alt+x显示控制台,alt+c显示终端。发现了吗?都在最后一行字母的左边,它出现的位置也不难想象。

如果不想用快捷键,可以直接在菜单->视图里选择,或者用新版提供的几个小按钮(项目管理器右边界中间的按钮,状态栏的文档结构图和终端图标,如下

  1. 新增 - 界面小按钮 与 书签功能 界面小按钮 【书签功能】给某行定位,后期能在滚动条里快速跳转或查看。 场景1: 在测试中发现需要修改的地方不止一处时,可以先打个标记,之后再处理; 场景2: 给笔记的重点与难点打个标记,方便日后处理或复习。 书签功能
  2. 其他:折叠代码、显示代码提示框、转到定义、转到匹配的括号

折叠其他 others (写markdown文档时很好用) 折叠全部 (三键配合减号->全缩了) 代码提示框 转到定义:先选中函数名或变量名 -> 然后按下或 转到定义到分栏: 转到匹配的括号折叠

  1. 先来简单的,可以靠技巧记忆的。

    关键词:粘贴,缩进,排版,注释

ctrl+shift+v -> 粘贴成HTML标签-保留复制内容的原来样式 -> 粘贴自历史 (这个非常好用,不过历史指的是在该编辑器里复制的历史列表

tab -> 向右跳格缩进 shift+tab -> 向左缩进 (类似此种含有左右或上下两种可能的快捷键,考虑加减shift的情况

ctrl+k -> 代码重排,变规整,适用于表格变整齐(此处不支持合并和单元格换行) ctrl+shift+k -> 合并多行, 代码显示1行 (排版这么难看o不ok?当然不OK,那就k它。

ctrl+/ -> 行注释 ctrl+shift+/ -> 块注释 (其实相当于ctrl+? 出问题了,注释也多了,需要用问号备注

  1. 挑的都是比较常用的,多用用就好了

    关键词:撤销恢复,插空行,花样选中,复制-剪切-交换-移动-删除

ctrl+z 撤销    ctrl+y 恢复

ctrl+enter -> 强制添加下一行(加上shift表向上插入空行

-> 选中当前行或多行   (L表line,去行首空白需再加shift键) ctrl+[ -> 选择括号内的     ctrl+’ -> 选择引号内的     ctrl+= -> 可逐级放大选区–按层次的哦 常用,鼠标三击选中整段 【选择下一个相同词 ,选择配对相同词 ,选择所有相同词 ctrl+alt+e】选择相同词

ctrl+c -> 复制当前行或选区 | ctrl+拖动选中文字表复制 ctrl+x -> 剪切当前行或选区 ctrl+shift+x -> 交换行或选区 -> 移动行

-> 删除行 (删行就取delete的首字母d) ctrl+退格或删除键 -> 删除光标前面或后面的词 -> 从光标处删除到行首或行尾 (我们知道退格键删前一个字符,delete键删后一个字符 => 加了ctrl就是删字符变删词了。把ctrl改成shift的话,是删除光标处到行首或行尾部分

  1. 函数包围 ctrl+],例如输入function ,按下快捷键就会得到 function(){}(去包围的话加shift–使用前还需要选中整体
  2. 加光标操作,与有关。 (与 / 相关的是 ) 【光标的作用就是同时写多个相同的代码,但没有代码提示了,按住ctrl加上点击操作能定义多个光标】         -> 选区头尾加光标             -> 选区的行首加光标
  3. 自定义代码块 [这是个代码模板般的存在了,写代码的时候会提醒的那些可以自定义!](后面会有介绍

-> 查找选中的字符串 (以选中区域为查找范围 - 加 shift | 跨文件查找选中内容 - 加 alt = 它的结果是用新标签页显示的,与界面搭得上边(显示匹配个数与替换区。之后按 Enter/F3 能跳到下一个匹配, shift+Enter/F3则能跳到上一个) 且输入num -> 转到行(跳转到第num行) -> 查找当前文件索引符号(包括HTML标签-含选择器、变量、函数)——它便于跳转到函数或变量的定义 [其他转到定义:先选中函数名或变量名->然后按下或也可跳转==>转到定义到分栏]

ctrl+p -> 查找文件 (文件papers

★★ 官方教程之代码块: https://hx.dcloud.net.cn/Tutorial/Language/Snippets 【通用js代码块】 iff :简单if -> 含else用(ife) forr :for循环结构体 fori :for循环结构体并包含i funn:函数 funa:匿名函数 clog:打印日志 clogvar:打印变量命名和值

1. 自定义代码块 (推荐多行或复杂常用的代码使用

(1)首先,入口在菜单的工具——代码块设置。下面以css代码块为例。 代码块 (2)点击css代码块,就会打开一个名叫“css.json”的标签卡。右边就注释了具体的设置说明和注意事项,但我还是要说几个点。 在这里插入图片描述

  • 首先,除了最外层看到的显示名"float_left" 可以自定义,其他的都是属性值才可自定义(如ffl,代码块,星号,描述文字等)。
  • 其次,关于"scope"范围的值,你可以参考左边那栏系统内置代码块,我这里是没写范围的话就无法提示,最好写上。很多不会写的都可以模仿左边的系统配置好的内置代码块来写。
  • 最后,注意逗号,冒号这些,如果写错了,错的地方下面会出现红色波浪线。

下面就尝试用一下。输入ffl ,弹出框,刚好是第一个,按enter回车,这样,想要的代码就出现屏幕上了。 在代码块测试图

2. Emmet (配合Tab键使用)

Tab键的使用: tab缩进; shift+tab向左缩进; 在简写代码后tab。
(1)这个究竟是啥,能干啥

这是个提高写代码速度的利器,相信你看前端学习视频的时候看着别人打出ul>.item*3,然后突然就变成了下面代码的时候,整个人都是懵的,纳闷怎么实现的?这就用了Emmet 。 emmet效果展示

(2)怎么用

首先上资料:Emmet官网:https://emmet.io/ 官网示例:https://docs.emmet.io/cheat-sheet/ 然后从 HTML CSS 两方面学习。

  • HTML中: 【标签及标签间】 >父子 +兄弟 ^升级/父级 ()整体 *数量 $数字序列 {}文字内容 【标签内:可连写】 #id .class类 []属性 【随机文本 lorem】该单词后面可以加上数字,如

标签内如: 、 更多:ul>.item*3,a:link,a:mail,form:post,input:file,select>[value=‘item$’]*3

示例($常和*一起使用在这里插入图片描述在这里插入图片描述

  • CSS中:辅音字母组合 数值后面r表示rem,p表示百分比,默认是px单位。

m0 p0 df m10-20 m-10–20 m10r p20p mr10 颜色c#f0

相对定位pore,绝对定位posa,不显示d:n,溢出隐藏ov:h,小手鼠标cur:p,文本居中ta:c,字号设置fz16

这个更具体的可以直接点击编辑器菜单 “帮助->Markdown语法帮助(M)” 来查看。

概要:6级标题 4种列表 文字-加粗斜体删除线 表格 分割线 代码区 注释 emmet快捷输入

【emmet快捷输入 】h2(6级)day time code hr table3*3 img a b i(emmet语法+Tab,仅行首生效

【文本样式】两个或_是加粗,一个或_是斜体,两个~是删除,三个*或-或=是分割线

【链接】打开链接:Alt+鼠标单击;如果是本地文件,可通过Shift+Alt+单击,在另一分栏打开文件

【列表】以形配合ctrl和alt使用: Ctrl+Alt + 1 设置或取消有序列表符, Ctrl+Alt + - 设置或取消无序列表的 -, Ctrl+Alt + 8 设置或取消无序列表的 * (*与8同一个键, Ctrl+Alt + = 设置或取消无序列表的 +=与+同一个键, Ctrl+Alt+] 未完成 Ctrl+Alt+] 已完成, Ctrl+Alt+Shift+. 引用列表

  1. 该编辑器的界面快捷键设计得很人性化,请务必不要记!用 alt键 靠理解就能驾驭了。
  2. 对于代码的操作及书写的快捷键一览,请按左边的中文先回忆一下,再比对右边的快捷键。

折叠全部 ctrl+shift+alt+ - 折叠其他 alt+shift+o (o表others=> 另查找当前文件索引符号-另类转到定义 ctrl+shift+o (o表对象-包括变量 标签(另: ctrl+o 打开文件-作open, alt+o 打开迷你地图-按键盘位置排的

【标签卡 ctrl+qwt | alt+数字】 关闭其他标签卡 ctrl+q 关闭当前标签卡 ctrl+w 新建标签卡 ctrl+t (标签是tag) 恢复关闭的标签卡 ctrl+shift+t

向右缩进 tab (Emmet语法写的简写后点击tab才转换) 向左缩进 shift+ tab 代码重排 ctrl+k 代码显示1行 ctrl+shift+k 移动行直接 ctrl+up/down 往下插入空行 ctrl+enter | 往上插入空行 ctrl+shift+enter

【提示注释,与有关】 行注释 ctrl+/ 块注释 ctrl+shift+/ 出现代码提示框 alt+/ 【加光标操作,与有关】光标能同时给多处添加内容,但就没有代码提示了 选区头尾加光标 ctrl+ 选区的行首加光标 ctrl+shift+

选中当前行或多行 ctrl+L (因为L是line行) —— 去行首空白,需加shift键:ctrl+shift+L 删除行 ctrl+d (d表delete) 转到选择内容定义的位置 或 (加了shift 可分栏查看定义:alt+shift+d

常用:鼠标双击选中最近标点间的文本 选择下一个相同词 ctrl+e 选择与选中词配对的词 ctrl+shift+e 选择所有相同词 ctrl+alt+e 删除光标前后词 ctrl+退格或删除键 删除光标到行首或行尾的内容 shift+退格或删除键

复制当前行或选区 ctrl+c(剪切同理 ctrl+x,交换 ctrl+shift+x) 粘贴ctrl+v, 撤销 ctrl+z, 恢复 ctrl+y 粘贴自历史-弹出本编辑器复制的历史列表框 粘贴成HTML标签-保留复制内容的原来样式 全部文件保存 ctrl+alt+s

【选中用,增减括号花括号用】 选中括号内的内容 ctrl+[ 转到匹配的括号-匹配的是光标前后的括号 函数包围 ,例如输入function ,按下快捷键就会得到 function(){}; 去包围-需先选中整体,再

自定义代码块 [务必试一试]

找字符 ctrl+f (F3下一个,shift+F3上一个 【此处Enter可替代F3】) 找文件 ctrl+p 转到行 ctrl+g+写入数字

  1. 当然还有其他的快捷键,当你发现你总是重复做某个操作的时候,你看看菜单上有没有你要的功能,这时再把那个快捷键记下来就好了。上面这些,难记的也不必记住,有需求的时候找来用就好了。

附上:官方文档教程页 里面的操作都带动图,很详细,很清晰。 在这里插入图片描述

基本的都熟练之后,好好看看官方文档的进阶用法。地址:高效极客技巧

  • 选区选多了或选错了,不用担心要重头选,用Ctrl+Shift+z撤销最后一个选区。
  • 跳转后想回到上次修改位置,用Alt+Left (MacOSX: ctrl + -)、点击工具栏上的<, 即可回到上一个光标位置。
  • 打开的文件太多了,可用 Ctrl+Tab 快速切换(一直按住ctrl,多次单击tab来切换)。
  • 支持区域内搜索,选中一段文本后, Ctrl+Shift+f 区域内查找字符。
  • 支持文件对比,选中两个要对比的文件,右键菜单,点击【对比选中文件】。
  • 支持右键查看文件的本地历史记录,Ctrl+Shift+H。
  • 想了解更详细的快捷键,别错过编辑器菜单上 “工具->自定义快捷键(K)”,快捷键全都有,还支持修改。(内容如下面第二张图
  • 同理,它支持的markdown也有文档 “帮助->Markdown语法帮助(M)” (内容如下面第三张图,笔者是调了主题里的部分颜色的【工具->设置->源码视图】在这里插入图片描述 在这里插入图片描述
本文地址:http://sicmodule.kub2b.com/news/420.html    企库往 http://sicmodule.kub2b.com/ , 查看更多
 
标签: 编辑器
 
更多>同类最新资讯
0相关评论

新闻列表
企业新闻
推荐企业新闻
推荐图文
推荐最新资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号