"Front-end Vue development" Hbuilder configuring Avalon, AngularJS, vue instruction prompts

I occasionally study the front-end content, because Hbuilder was developed based on Eclipse, so it's kind of nice to use, and in the few front-end development tools I try to use, Hbuilder's performance is pretty good, and you can visit the Huilder website to download the experience.
The current front-end development, the MVVM framework is very popular, more typical such as: AngularJS, Vuejs, and so on, this part of the framework basically has a concept of instruction, in the tool configuration related hints, can greatly facilitate our development, Here's a look at how to configure this in Hbuilder.

Click: Tools, Extension code block, custom HTML code block

After opening the source file code is as follows:

Require ' ruble ' =begin Hbuilder can use Ruby scripts to extend code blocks and enhanced operations commands.  This is a magical toy for geeks. This document is intended for user-defined HTML extension commands and is not a document of the Hbuilder Preset command, which cannot be changed by a preset code block.  To view the pre-set code block, click the Edit button at the bottom right corner of the popup code block interface, such as the Div code block.  This document has been modified and saved to take effect.  Have fun, don't play bad! Script Open Source Address https://Github.com/dcloudio/hbuilderrubybundleyou can share your configuration here, you can also get the version of other users here Note: If the user before the 1.9 version of the HTML code block, please right click on the directory to open this document, find the previous Snippets.rb.bak file, the modified content to be put in. =Endwith_defaults:scope= ' text.html text ' Do|bundle| #=====html Tag code block ================================================================================#如下是一个示例代码块, you can copy and then add a new code block snippet' Div_class ' Do|cmd|#div_class是显示名称, the Code assistant prompts the list to be visible when displayed Cmd.trigger= ' DIVC '#divc是激活字符, the code block is triggered when DIVC is pressed cmd.expansion= "<div class=\ "$1\" > $0</div>"#expansion是代码块的输出内容, where the, "$" is the cursor's stop and switch position.                                                          $ $ is the first stop cursor, and $ is the cursor at the end of the last carriage return.                                                          #如果输出涉及到换行和tab, you should also use line wrapping and tab strictly here. #输出双引号在前面加 \ To escape, output $ is escaped using \$ (in single quotes) or \\$ (in double quotes) cmd.needapplyrecontentassist=true#这句话的意思是输出后同时激活代码助手, pull out the list of styles directly in the location of the end #div_class代码块结束 snippet' Ng-pluralize ' Do|cmd|Cmd.trigger= ' NGP 'cmd.expansion= "<ng-pluralize>$1</ng-pluralize>"Endendwith_defaults:scope= ' text.html entity.other.attribute-name.html ' Do|bundle| #=====html Property code block ====================================================#如下是一个示例代码块, you can copy and then add a new code block snippet' ng-' Do|s| #ng-is the display name, and the Code assistant prompts the list to be visible when displayed S.trigger= ' ng-' #ng-is the activation character, that is, press ng-the code block is triggered after the s.expansion= ' ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/ controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/ mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/ repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/ Switch-when/view}= "$"#expansion是代码块的输出内容, where $0, "$" is the cursor's stop and switch position.      #$1 is the first stop cursor, and the last cursor to stop at the end of the carriage return.      #使用 {} is a hint of the domain.      #如果输出涉及到换行和tab, you should also use line wrapping and tab strictly here. #输出双引号在前面加 \ To escape, output $ is escaped using \$ (in single quotes) or \\$ (in double quotes) S.locationtype= ' Html_attribute 'End #ng代码块结束endwith_defaults: Scope= ' Text.html-source ',: input = = None,: output =: Insert_as_snippet Do|bundle| #===== shortcut command with no display name ========================begin the following examples are commands that the system has already provisioned without repeating the example 1 Ctrl+enter output <br/> Command T (: QUICK_BR) Do|cmd|cmd.key_binding= ' M2+enter 'Cmd.output=: Insert_as_snippet cmd.input=: none Cmd.invoke {"<br/>"} End Example 2 Ctrl+9 Add bounding tags to the selected text command T (: Wrap_selection_in_tag_pair) Do|cmd|cmd.key_binding= "Control+9"Cmd.input=: Selection Cmd.invoke Do|context|selection= env[' Tm_selected_text ' | | ‘‘ifSelection.length > 0 "<${1:p}>#{selection.gsub ('/', ' \ \ ')}</${1:p}>"Else"<${1:p}>$0</${1:p}>"End End End=end# can copy a command, start making a new command below end

In this configuration, a Angularjs instruction prompt has been configured.

With_defaults:scope = ' text.html entity.other.attribute-name.html ' Do|bundle| #=====html Property code block ====================================================#如下是一个示例代码块, you can copy and then add a new code block snippet' ng-' Do|s| #ng-is the display name, and the Code assistant prompts the list to be visible when displayed S.trigger= ' ng-' #ng-is the activation character, that is, press ng-the code block is triggered after the s.expansion= ' ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/ controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/ mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/ repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/ Switch-when/view}= "$"#expansion是代码块的输出内容, where $0, "$" is the cursor's stop and switch position.      #$1 is the first stop cursor, and the last cursor to stop at the end of the carriage return.      #使用 {} is a hint of the domain.      #如果输出涉及到换行和tab, you should also use line wrapping and tab strictly here. #输出双引号在前面加 \ To escape, output $ is escaped using \$ (in single quotes) or \\$ (in double quotes) S.locationtype= ' Html_attribute 'End #ng代码块结束end

Directives are essentially attributes of HTML tags, so what we need to do is to add our own instruction prompts in this configuration. Once added, the segment is configured as follows:

With_defaults:scope = ' text.html entity.other.attribute-name.html ' Do|bundle| #=====html Property code block ====================================================#如下是一个示例代码块, you can copy and then add a new code block snippet' ng-' Do|s| #ng-is the display name, and the Code assistant prompts the list to be visible when displayed S.trigger= ' ng-' #ng-is the activation character, that is, press ng-the code block is triggered after the s.expansion= ' ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/ controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/ mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/ repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/ Switch-when/view}= "$"#expansion是代码块的输出内容, where $0, "$" is the cursor's stop and switch position.      #$1 is the first stop cursor, and the last cursor to stop at the end of the carriage return.      #使用 {} is a hint of the domain.      #如果输出涉及到换行和tab, you should also use line wrapping and tab strictly here. #输出双引号在前面加 \ To escape, output $ is escaped using \$ (in single quotes) or \\$ (in double quotes) S.locationtype= ' Html_attribute 'End #ng代码块结束 Snippet' ms-' Do|s| #ms-Avalon Code hint S.trigger= ' ms-'s.expansion= ' ms-${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/ on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/ on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/ Validate/effect/widget}= "$"S.locationtype= ' Html_attribute 'End #ms代码块结束 Snippet‘:‘ Do|s| #:-avalon2.1. 15 after use: XXXX short instruction code hint S.trigger= ': 's.expansion= ': ${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/ on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/ on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/ Validate/effect/widget}= "$"S.locationtype= ' Html_attribute 'End #: code block ends Snippet' V ' Do|s| #v-VUE code hint S.trigger= ' V 's.expansion= ' v-${1:text/html/show/if/else/else-if/for/on/bind/model/pre/cloak/once}= ' "$"S.locationtype= ' Html_attribute 'End #v代码块结束end

After the configuration modification is complete, save directly, although the file on the prompt save can be effective, but I found in the actual use did not take effect, do not worry, we just need to restart the hbuilder on it. After the reboot, we are going to use these instructions, as long as the input triggered by the string will appear prompt.

After modifying the contents of the file as follows, if you modify the unsuccessful, directly with the following content to replace the entire page content:

Require ' ruble ' =begin Hbuilder can use Ruby scripts to extend code blocks and enhanced operations commands.  This is a magical toy for geeks. This document is intended for user-defined HTML extension commands and is not a document of the Hbuilder Preset command, which cannot be changed by a preset code block.  To view the pre-set code block, click the Edit button at the bottom right corner of the popup code block interface, such as the Div code block.  This document has been modified and saved to take effect.  Have fun, don't play bad! Script Open Source Address https://Github.com/dcloudio/hbuilderrubybundleyou can share your configuration here, you can also get the version of other users here Note: If the user before the 1.9 version of the HTML code block, please right click on the directory to open this document, find the previous Snippets.rb.bak file, the modified content to be put in. =Endwith_defaults:scope= ' text.html text ' Do|bundle| #==html Tag Code = =#如下是一个示例代码块, you can copy and then add a new code block snippet' Div_class ' Do|cmd|#div_class是显示名称, the Code assistant prompts the list to be visible when displayed Cmd.trigger= ' DIVC '#divc是激活字符, the code block is triggered when DIVC is pressed cmd.expansion= "<div class=\" $1\ ">$0</div>"#expansion是代码块的输出内容, where $0, "$" is the cursor's stop and switch position.                                $ $ is the first stop cursor, and $ is the cursor at the end of the last carriage return.                                #如果输出涉及到换行和tab, you should also use line wrapping and tab strictly here. #输出双引号在前面加 \ To escape, output $ is escaped using \$ (in single quotes) or \\$ (in double quotes) cmd.needapplyrecontentassist=true#这句话的意思是输出后同时激活代码助手, pull out the list of styles directly in the location of the end #div_class代码块结束 snippet' Ng-pluralize ' Do|cmd|Cmd.trigger= ' NGP 'cmd.expansion= "<ng-pluralize>$1</ng-pluralize>"Endendwith_defaults:scope= ' text.html entity.other.attribute-name.html ' Do|bundle| #==html Property Code = =#如下是一个示例代码块, you can copy and then add a new code block snippet' ng-' Do|s| #ng-is the display name, and the Code assistant prompts the list to be visible when displayed S.trigger= ' ng-' #ng-is the activation character, that is, press ng-the code block is triggered after the s.expansion= ' ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/ controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/ mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/ repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/ Switch-when/view}= "$"#expansion是代码块的输出内容, where $0, "$" is the cursor's stop and switch position.    #$1 is the first stop cursor, and the last cursor to stop at the end of the carriage return.    #使用 {} is a hint of the domain.    #如果输出涉及到换行和tab, you should also use line wrapping and tab strictly here. #输出双引号在前面加 \ To escape, output $ is escaped using \$ (in single quotes) or \\$ (in double quotes) S.locationtype= ' Html_attribute 'End #ng代码块结束 Snippet' ms-' Do|s| #ms-Avalon Code hint S.trigger= ' ms-'s.expansion= ' ms-${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/ on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/ on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/ Validate/effect/widget}= "$"S.locationtype= ' Html_attribute 'End #ms代码块结束 Snippet‘:‘ Do|s| #:-avalon2.1. 15 after use: XXXX short instruction code hint S.trigger= ': 's.expansion= ': ${1:skip/controller/important/attr/css/text/html/class/active/hover/if/visible/for/on/on-animationend/ on-blur/on-change/on-input/on-click/on-dblclick/on-focus/on-keydown/on-keypress/on-keyup/on-mousedown/ on-mouseenter/on-mouseleave/on-mousemove/on-mouseout/on-mouseover/on-mouseup/on-scroll/on-submit/duplex/rules/ Validate/effect/widget}= "$"S.locationtype= ' Html_attribute 'End #: code block ends Snippet' V ' Do|s| #v-VUE code hint S.trigger= ' V 's.expansion= ' v-${1:text/html/show/if/else/else-if/for/on/bind/model/pre/cloak/once}= ' "$"S.locationtype= ' Html_attribute 'End #v代码块结束endwith_defaults: Scope= ' Text.html-source ',: input = = None,: output =: Insert_as_snippet Do|bundle| #== shortcut command with no display name = = =begin the following examples are commands that the system has already provisioned without repeating the example 1 Ctrl+enter output <br/> Command T (: QUICK_BR) Do|cmd|cmd.key_binding= ' M2+enter 'Cmd.output=: Insert_as_snippet cmd.input=: none Cmd.invoke {"<br/>"} End Example 2 Ctrl+9 Add bounding tags to the selected text command T (: Wrap_selection_in_tag_pair) Do|cmd|cmd.key_binding= "Control+9"Cmd.input=: Selection Cmd.invoke Do|context|selection= env[' Tm_selected_text ' | | ‘‘ifSelection.length > 0 "<${1:p}>#{selection.gsub ('/', ' \ \ ')}</${1:p}>"Else"<${1:p}>$0</${1:p}>"End End End=end# can copy a command, start making a new command below end

Pro-Test effective, such as still do not understand QQ consulting me: 844271163

"Front-end Vue development" Hbuilder configuring Avalon, AngularJS, vue instruction prompts