Efficient Geek skills
Generally, IDE and editor are different product categories. IDE focuses on the syntax analysis, prompting, goto definition and debugging of a programming language. The editor focus on text processing and provides more powerful text processing than IDE. The latest HBuilderX provides lightweight and world-class text processing. After reading the following content, you will be amazed by the powerful functions of HBuilderX.
Drag-free selection
When frequently dragging and selecting a code block with the mouse is not an easy task. It is also painful to use the touchpad and remember many shortcuts.
HBuilderX provides a more friendly way: intelligent double-clicking
and Ctrl+ Enlarge selection
.
Intelligent double-clicking
In HBuilderX, many special symbols support intelligent double-clicking.
- Double-click the inside of
quotation marks/brackets
to select the content inquotation marks/brackets
- Double-click on both sides of the
comma
to select a code block before or after the comma - Double-click the
end of line
to select the entire line (without carriage return) - Double-click the
conjunction symbol
(-_) to select the entire word - Double-click the beginning of the content at the beginning of the collapsed line and select the collapsed section
- Double-click the beginning of the indent to select the entire section with the same indent
- Double click
list symbol
to select the entire list block - Double-click the beginning or end of any
tag
to select the entire tag block - Double-click equal sign
=
in the html attribute, select the entire html attribute - Double-click on keywords such as
if
,function
, etc. to select the entire wrapped area - Double-click
semicolon
, select entire block before semicolon - Double-click on the left side of the
css
class name and select the entire css class - Double-click
comment symbol
to select comment block - Double-click
#
to select entire markdown section - Double-click the beginning of the grammar delimiter to select markdown images, hyperlinks, bold, italic, code and other grammatical areas
- JSON intelligent double-click
The following is an example. Double-click to select the tag and wrap the parent tag
- Double-click the beginning or end of
div tag
to select entiretag
and clicking position is the left side of the beginning<
or the right side of the end>
. In addition to, many positions can be selected by intelligent double-clicking, such as double-clickif
, double-clickindentation
, double-clickinside bracket quotation mark
, etc. See theselect
menu of HBuilderX for more details. - Press
Ctrl+]
to wrap, you can add parent tags at the beginning and end of this selection, the cursor blinks at the same time. If you are in js file, pressingCtrl+]
does not wrap the tag, but wraps code block such asif
,for
, etc., then you can quickly add a code block into theif
bracket. - Enter
div
to add tag wrapping at the beginning and end of block.
Multi-cursor
Expand the selection
Ctrl+=
is pressing the Ctrl
key and the +
key together.
HBuilderX can intelligently judge the selected area, and use the shortcut key Ctrl+=
to continue to expand the area without using the mouse.
Unwrap tag
- Double-click the beginning of tag p and select the block of tag p.
- Press “Ctrl+Shift+]” to remove the tag p and automatically process the indentation of the child nodes.
HBuilderX uses symbolization to improve the memorability of shortcut keys. Because of the alphabetization, it is more difficult to remember.
Symbolization makes it easier to memorize shortcut keys, for example Ctrl+]
is to wrap tag.
The reverse operation or enhancement operation is generally to add Shift
, for example, Ctrl+Shift+]
is to unwrap tag.
Select words and skip a word
- In the figure below, all ‘div’ words will be selected with shortcut key
Ctrl+e
(MacOSX:Cmd+d
). But usingCtrl+Shift+e
(MacOSX:Cmd+Shift+d
), HBuilderX will skip irrelevant word through intellisense syntax analysis. - In the following figure, press
Ctrl+Shift+e
(MacOSX:Cmd+Shift+d
), only the pair ofdiv
tags will be selected, and the same type of tags in the child nodes will be excluded. - Then you can easily rename the original
div
top
Remark:
-If you only want to choose a pairing tag, you cannot with shortcut key Ctrl+e
(MacOSX: Cmd+d
). You should use shortcut key Ctrl+Shift+e
(MacOSX: Cmd+Shift+d
)
-To batch select all the same words is Ctrl+Alt+e
(MacOSX: ctrl+alt+d
)
Select All Reference Symbols
Menu【Select】【Select All Reference Symbols】
MacOSX shortcut keys:command+shift+d
Windows shortcut keys:ctrl+shift+e
Swap selection content
Usually, we swap the content of the two selection blocks through the following operations, select a, cut, click in front of b, paste, select b, find the position of a before, click, paste… That is a inefficient operations.
Compared with Ctrl+x, Ctrl+Shift+x
is an enhanced operation to swap selection content.
- Double-click the inside of the quotation mark of first style attribute and select the entire content of the quotation mark.
- Press Ctrl and double-click the inside of the quotation mark of the second style attribute to select the entire content of quotation marks.
- Press
Ctrl+Shift+x
to swap the contents of the style attribute.
If you don’t select the content, just place the cursor before the beginning of two blocks, and you can directly swap the content of these two blocks.
Undo the last multi-selection area or multi-cursor
If you select the wrong blocks, it is easy to select again. Ctrl+Shift+z
is not to undo the edited content, but to undo the last selection.
- Double click to select class
- Press
Ctrl+e
to select the same words - Press
Ctrl+Shift+z
, deselect the last word.
If you select one more word, you can click Ctrl+right mouse click
to cancel a selection.
Skip the current word and select the other same words with shortcut Alt+Shift+e
(mac is ctrl+shift+d
)
Join Lines
This example is a shortcut to merge multiple lines of css code into one line.
- Double-click inside
{
to select class - Press
Ctrl+double-click
to select another class - Press shortcut key
Ctrl+Shift+k
to merge each css block code into one line Ctrl+k
is to format code according to indentation,Ctrl+Shift+k
is to merge multiple lines into one line.
Comment if
tag
In addition to wrap tag
or unwrap tag
, we also often comment if
tags.
- Double-click
if
to select theif
code block - Press
Ctrl+\
to add the cursor at the beginning and end of theif
bracket at the same time - Press
Ctrl+/
to comment out the first and last lines of the selection