HBuilderX-Efficient Geek Tips
Generally speaking, IDEs and editors are two product categories.
IDE focuses on syntax analysis, prompts, go to definition, and debugging of a certain language.
The editor is for general text processing, but provides more efficient general text processing capabilities.
The previous generation HBuilder was a typical IDE with very powerful language processing, but it was objectively inferior to excellent editors in terms of word processing.
The new HBuilderX is positioned as the perfect combination of ide and editor, so HBuilderX will provide the world's top efficient word processing capabilities.
After reading this, you will definitely be amazed that this is how geeks play.
Drag-free selection
Using the mouse or dragging to select a piece of text is an operation that can easily make your index finger cramp. The touchpad in particular is a pain.
But it is also painful to memorize many related shortcut keys.
HBuilderX provides a more friendly way: smart double-click and Ctrl+= to expand the selection.
Smart double click
The following is an example of smart double-clicking to select a tag and surround the parent tag.
1. Double-click the beginning or end of the div to select the tag. Of course, double-click if, double-click the indent, double-click inside the brackets and quotes... many positions can be selected through smart double-click. See HBuilder's selection menu for details.
2. Press Ctrl+] to surround, you can add parent tags at the beginning and end of this selection while blinking the cursor. Currently, pressing Ctrl+] in js will not surround tags, but will surround function libraries such as if and for.
3. Enter div to add surrounding tags at the beginning and end
Expand selection Ctrl+=
= is the default key position for +, so Ctrl+= actually means pressing the Ctrl key and the + sign together.
In HBuilderX, you can intelligently determine the range of the selection, continuously expand the selection, and quickly select the selection you need without using the mouse.
Counter encirclement
When we talked about encirclement above, there is naturally counter-encirclement.
1. Double-click the beginning of tagp to select the tag.
2. Press Ctrl+Shift+] to remove tagp and automatically handle the indentation of child nodes.
One more thing to mention here is the shortcut key concept of HBuilderX, which is symbolization, not alphabetization.
The shortcut keys for many tools are control keys + a letter in the English word for the function, which is extremely difficult to remember.
Symbolization makes it easier to remember shortcut keys, such as Ctrl+] for bracketing.
The reverse operation or enhancement operation is generally done by adding Shift, such as Ctrl+Shift+] is anti-bracketing.
Select the same grammatical words
In the picture below, using ordinary selection of the same word will select all divs. But using Ctrl+Shift+e (Command+Shift+d for mac) will intelligently recognize the grammar and eliminate irrelevant words.
In the picture below, press Ctrl+Shift+e to simultaneously select the divs at the beginning and end of the tag, but not the divs of the child nodes.
Then you can easily rename the original div to p
When selecting a bracket, you can also select the same grammatical word to select another corresponding bracket.
Swap selection content
When you need to interact with the contents of two selections, select a, cut, click in front of b, paste, select b, find the previous position of a, click, and paste... Such a long operation is too inefficient.
Let’s take a look at HBuilderX’s Ctrl+Shift+x interactive selection, which is an enhanced version of Ctrl+x.
1. Double-click inside the quotation marks after the first style attribute to select the quotation marks.
2. Press Ctrl and continue to double-click inside the quotation marks after the second style attribute to select the selection within the two quotation marks.
3. Press Ctrl+Shift+x to exchange the contents of the style attribute.
If you do not select content and place the cursor on line 2, you can directly exchange the contents of these two lines, as shown below
Undo the last multi-selection or multi-cursor
If you select too many selections or select the wrong one, don’t worry about having to make a selection again. Ctrl+Shift+z does not undo the edited content, but undoes the last selection.
1. Double-click to select the class
2. Press Ctrl+e to select the same word
3. Press Ctrl+Shift+z to no longer select the last word.
Batch merge rows
The example below is a quick operation when merging css into one line.
1. Double-click {inside to select class
2. Press Ctrl+double-click to select another class
3. Press deformat Ctrl+Shift+k to merge each css block code into one line
Ctrl+k is formatting code, then Ctrl+Shift+k is to merge it into one line.
Comment the beginning and end of the if section at the same time
The adjustment of if blocks is very common. In addition to surrounding and anti-surrounding, common operations include commenting out the beginning and end of the if section at the same time.
1. Double-click if to select the if code block
2. Press Ctrl+to add cursors at the beginning and end of the selection to turn into multi-cursor mode.
3. Press Ctrl+/ to comment out the first and last lines of the selection
HBuilderX FAQ
How to import projects in hbuilderx
1. Open the HBuilderX software downloaded from this site. After opening the software, click [File], click the file in the pop-up options, select the [Import] option in the pop-up options, and select where you want to import the file from [SVN] or [Git], you have more options based on your actual situation.
2. Click [Browse] in the opened import project window.
3. Select the folder you want to import the project into. After selecting, click the [Select Folder] option to import the entire project file, and then click the [Import] button in the import window.
4. Then a complete project is successfully imported into HBuilderX.
How to modify HBuilderX project to app project
1. Select the item you want to modify, right-click the mouse, and click [Properties] in the pop-up options.
2. Click [Project Natures] in the properties window that opens, check the required app properties in the property selection box on the right, and then click [OK].
3. Then HBuilderX will pop up a property change window, click the "Yes" button in the pop-up property change box.
4. Return to the project and find that the manifest.json has turned white and the small picture of the file has turned into a settings image. Open the file and it will look like the picture on the right, which means the modification is successful.
HBuilderX software features
1. Lightweight
Only 10M green distribution package
2. Extreme speed
HBuilderX will respond extremely quickly regardless of startup speed, large document opening speed, or encoding prompts.
3. Refreshing and eye-protecting
The HBuilderX interface is refreshing and concise. The Green Soft theme has undergone scientific brain fatigue testing and is the most suitable theme interface for human eyes to watch for a long time.
4. No mouse operation
Master HBuilderX's mouse-less operating system and become an efficient geek, fly bycoding
5. markdown priority
HBuilderX is the only one whose default type for new files is mdEditor.
In addition to the top markdown writing experience and beautiful coloring, HX's extremely fast startup, multiple tabs, hot exit, and various shortcut key operations give you ample reasons to upgrade the notepad tool.
HBuilderX installation method
1. After downloading the HBuilderX software package from this site, get a compressed package locally on your computer and use360 compressionSoftware decompression.
2. After decompression is completed, click the .exe file to open the software.
HBuilderX FAQ
How to run HBuilderX
1. Open the HBuilderX software downloaded from this site. After opening the software, click the [File] option at the top of the software, click [New] in the pop-up selection, and select the file you want to create. JS, HTML, CSS, etc. You can create it by yourself choose.
2. The editor chose an HTML file. Click the HTML file option, and a new HTML file window will pop up. Select [HTML with mui].
3. An HBuilderX file is created. Just enter the HTML code you want to complete.
4. After the input is completed, save the file. You can use the Ctrl+s keys to save the file, or click on the location marked by the red box in the picture to save the file.
5. After saving, click the [Run] option in the HBuilderX software menu bar, click the [Run to Browser] option, and select the browser you want to run.
6. Then the running results will appear in the browser of your choice.
How to debug hbuilderx
1. Open hBuilderX, find the run button above, and click to connect; usually, the connection will not be successful, and some other settings need to be made, including the tools on hBuilderX.
2. If the connection is successful, the connection page will appear. You can look at the page to make changes, but there will be some problems during processing, that is, there may be no change when you make changes. At this time, you need to double-click this button to reopen it. Just debug it.
3. Set the IP address of the built-in web server to the address of your computer and the port number to ensure that the port numbers do not conflict.
4. Write code on the left, and the page will automatically refresh on the right when saving, which is very convenient for adjusting the interface. For precompiled languages such as less and sass, after automatically outputting css after ctrl+s, the browser refresh will continue to be activated.
5. Right-click a div in the code and select "Highlight corresponding elements in the browser". You will see that the specified element in the browser on the right is highlighted.
HBuilderX comparison of similar software
The official version of Hbuilder is a web development IDE launched by DCloud that supports HTML5. The official version of hbuilder greatly improves the development efficiency of HTML, js, and css through complete syntax prompts, code input methods, code blocks, etc. It also includes the most comprehensive syntax library and browser compatibility data.
Download address:http://softwaredownload4.com/soft/577567.htm
Visual Studio Code (VS Editor) aims to provide all developers with a free editor that focuses on the code itself. The positioning of Visual Studio Code is still Editor, a full-featured Editor that paves the way for Microsoft's SDK, .NET (open source, cross-platform) and other products through the Editor. Although it is a member of the Visual Studio family, it does not have much overlap with the functions of the traditional VS IDE.
Download address:http://softwaredownload4.com/soft/1190779.htm
HBuilderX update log
【Important】Adjust the new project interface and preset a large number of complete cloud-integrated projects. Details
have been added have been added to the project manager view toolbar, and the new positioning and collapsing all floating buttons have been added. Details
Fixed the bug that the font display is tilted after the first line of the Markdown code block. Details
Fixed the bug that caused the editor to crash when the mouse clicks on the search area or the address bar of the built-in resource manager to find index symbols.
[ ['s‐'s'ss'ss ones ones ones ones ones ones's‑' ones ones ones‑'s'‐long‐‐long‐‐long‐‐from lowest‐foldfold throughfolded ones)'s)
Fix the bug that there is an extra dot at the end of pages.json path after importing non-uni_modules plug-in in plug-in market cloud integrated page template
Fix the bug in MacOSX that when the HBuilderX installation path contains spaces, running the project to the iOS simulator fails
Newly added native app-cloud packing packing window to increase SIGMOB incentive video advertising alliance configuration
Fixed the bug that when uniCloud runs the cloud service space initialization wizard, in some cases, the DB Schema creation confirmation window does not display all created bugs
Fixed the bug that when uniCloud uploads all cloud functions, in some cases, the number and name of unuploaded cloud functions are displayed incorrectly
Fix the bug that uniCloud occasionally does not end the synchronization when the project is closed and running
Optimize uni-app to run projects with preprocessed CSS language, and automatically install relevant plug-ins during runtime, without having to jump to the plug-in market for installation.
Newly added uni-app automated testing plug-in supports automated testing of uni-app ordinary projects and CLI projects in HBuilderX Details
Fix the bug that some commands of HBuilderX CLI pack and cloud run abnormally
Optimization: Add HBuilderX CLI tutorial link to relevant interfaces
Huajun editor recommends:
HBuilderX editor is a new HTML5 web development tool launched by DCloud. The software is written using Java, C, Web and Ruby. The software can greatly improve the efficiency of HTML, js and css through syntax prompts, code input methods, code blocks, etc. Development efficiency. Huajun Software Park also provides you withFast table software,He Xiaoxiang programming client,Automated testing tool AutoRunner,Easy GUI,Little turtle LOGO languageWaiting for you to download.
it works
it works
it works