美文网首页
HBuilderX使用技巧

HBuilderX使用技巧

作者: WeekDiffculty | 来源:发表于2021-03-10 17:20 被阅读0次

    最近使用HBuilder做开发,整理了一下一些有用的快捷键,仅部分,完整版请前往官网。
    HBuilderX官方文档

    免拖动选择

    用鼠标拖着选中一片文本,是一个很容易让食指抽筋的操作。尤其是触摸板更痛苦。
    但是背诵很多相关的快捷键也一样痛苦。
    HBuilderX提供了更友好方式:智能双击和Ctrl+扩大选区。

    截屏2021-03-1015.46.51.png

    智能双击

    在HBuilderX中,但凡特殊点的字符,都能智能双击。

    双击引号/括号内侧,是选中引号/括号内的内容

    截屏2021-03-1015.51.09.png

    双击逗号两侧,是选择逗号前一段或后一段


    截屏2021-03-1015.51.42.png

    双击行尾,是选中该行(不含回车符)


    截屏2021-03-1015.52.11.png

    双击连词符(-_)选中整个词


    截屏2021-03-1015.52.53.png

    双击折叠行首内容开头,选择折叠段落


    截屏2021-03-1015.53.22.png

    双击行首缩进,选择相同缩进的段落

    双击列表符号,选择列表段落
    双击Tag开头或结尾,选择整段Tag
    双击属性赋值等号=,选择Html属性
    双击if、function等关键字,选择整段包围区域


    [图片上传中...(截屏2021-03-1016.09.53.png-5c5545-1615363796730-0)]

    双击引号/括号内侧,是选中引号/括号内的内容
    双击逗号两侧,是选择逗号前一段或后一段
    双击行尾,是选中该行(不含回车符)
    双击连词符(-_)选中整个词
    双击折叠行首内容开头,选择折叠段落
    双击行首缩进,选择相同缩进的段落
    双击列表符号,选择列表段落
    双击Tag开头或结尾,选择整段Tag
    双击属性赋值等号=,选择Html属性
    双击if、function等关键字,选择整段包围区域
    双击分号,选择js等语言的;分号前段落
    双击css类名左侧,选择Css类
    双击注释符选择注释区域
    双击#选择markdown标题段落
    双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区
    双击分号,选择js等语言的;分号前段落

    双击css类名左侧,选择Css类


    截屏2021-03-1016.10.46.png

    双击注释符选择注释区域
    双击#选择markdown标题段落
    双击语法定义符开头选择markdown图片、超链接、加粗、倾斜、代码等语法区

    插件安装

    截屏2021-03-1016.22.31.png 截屏2021-03-1016.22.36.png 截屏2021-03-1016.22.47.png

    大纲

    调出文件大纲,快速进行方法定位等,更加简洁的导览。
    win: alt+w Mac:ctr+w

    截屏2021-03-1016.30.43.png

    折叠

    alt + +或者-


    截屏2021-03-1016.33.29.png

    alt + shit + o 折叠当前选区以外的所有,以专注编辑当前的内容


    截屏2021-03-1016.35.14.png

    转到定义

    alt + 鼠标左键
    ctr + alt + 鼠标左键打开定义并开另外的一个窗口,同时编辑。mac:cmd + alt + 鼠标左键


    截屏2021-03-1016.41.25.png

    格式化代码和批量合并

    win ctr + k 截屏2021-03-1016.47.44.png

    Mac cmd + k


    截屏2021-03-1016.48.28.png
    • 反格式化,批量合并为单行 截屏2021-03-1016.49.46.png

    win ctr + shift + k
    Mac cmd + shift + k

    多选及选中互换

    ctr 按下可选择另一个区域
    Mac cmd

    截屏2021-03-1016.55.21.png
    • 互换
      ctr + shift + x
      cmd + shift + x


      截屏2021-03-1016.56.34.png

    选中相同词

    • Mac cmd + d 按一次多选中一个
      • Win ctr + e
    截屏2021-03-1017.04.37.png
    • 批量选中全部相同词(不建议在此模式下修改,会选中不想干的内容,包含这个词的都会)
      Mac ctr + alt + d
      Win ctr + alt + e

    使用Ctrl+Shift+e(mac是Cmd+Shift+d),会智能识别语法,剔除不相干的词。(亲测不好使,因情况而异)

    截屏2021-03-1017.07.45.png

    以下为一些简单的使用方法

    • 快速跑起一个web项目或者看原型文档。


      截屏2021-03-1017.24.30.png
    • 1、将目录拖进编辑器或者打开目录
    • 2、工具栏点击运行至。。。 截屏2021-03-1017.26.14.png

    插件安装

    截屏2021-03-1017.27.26.png 截屏2021-03-1017.27.52.png

    点击前往插件市场搜索需要的插件


    截屏2021-03-1017.28.42.png
      • 点击使用HBuilderX 导入插件会自动安装
        或者下载zip 解压 cd 到目录下 npm install

    创建项目

    截屏2021-03-1017.37.31.png

    可快速创建项目,免命令行配置

    相关文章

      网友评论

          本文标题:HBuilderX使用技巧

          本文链接:https://www.haomeiwen.com/subject/xlvwqltx.html