【前端vue开发】Hbuilder配置Avalon、AngularJS、Vue指令提示

偶尔也会研究一下前端内容，因为Hbuilder是基于eclipse开发的，所以用起来倍感亲切啊，而且在我尝试使用的几款前端开发工具中，Hbuilder的表现也是相当出色地，可以访问Huilder官网下载体验一下。 
言归正传，当前前端的开发中，MVVM框架非常流行，比较典型的如：AngularJS、VueJS等，这部分框架基本都有一个指令的概念，在工具中配置相关的提示，可以极大地方便的我们的开发，下面就来介绍一下如何在Hbuilder中进行配置。

依次点击：工具 -> 扩展代码块 -> 自定义html代码块

打开后源文件代码如下：

require ‘ruble‘
=begin
 HBuilder可使用ruby脚本来扩展代码块和增强操作命令。这是极客的神奇玩具。
  本文档用于用户自定义HTML扩展命令，并非HBuilder预置命令的文档，预置的代码块不可改。查阅预置代码块，请在弹出预置代码块界面时点右下角的编辑按钮，比如div代码块。
  本文档修改完毕，保存即可生效。
  玩的愉快，别玩坏！

  脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle
  可以把你的配置共享到这里，也可以在这里获取其他网友的版本

  注：如果1.9版本之前的用户修改过HTML代码块，请点右键打开本文档所在目录，找之前的snippets.rb.bak文件，把修改过的内容放置进来。
=end

with_defaults :scope => ‘text.html text‘ do |bundle|  #=====HTML标签代码块================================================================================
#如下是一个示例代码块，可以复制后再添加新代码块
  snippet ‘div_class‘ do |cmd|  #div_class是显示名称，代码助手提示列表显示时可见
    cmd.trigger = ‘divc‘        #divc是激活字符，即按下divc后会触发该代码块
    cmd.expansion = "<div class=\"$1\">
    $0
</div>"                         #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。$1是第一个停留光标，$0是最后回车时停留的光标。
                                                          #如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
                                                          #输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
    cmd.needApplyReContentAssist = true  #这句话的意思是输出后同时激活代码助手，即在$1的位置直接拉出样式列表
  end #div_class代码块结束

  snippet ‘ng-pluralize‘ do |cmd|
    cmd.trigger = ‘ngp‘
    cmd.expansion = "<ng-pluralize>$1</ng-pluralize>"
  end

end

with_defaults :scope => ‘text.html entity.other.attribute-name.html‘ do |bundle|  #=====HTML属性代码块====================================================
#如下是一个示例代码块，可以复制后再添加新代码块
  snippet ‘ng-‘ do |s|   #ng-是显示名称，代码助手提示列表显示时可见
    s.trigger = ‘ng-‘        #ng-是激活字符，即按下ng-后会触发该代码块
    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}="$2"‘
        #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。
      #$1是第一个停留光标，$0是最后回车时停留的光标。
      #使用{}包围的内容，是提示值域。
      #如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
      #输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
    s.locationType=‘HTML_ATTRIBUTE‘
  end #ng代码块结束

end

with_defaults :scope => ‘text.html - source‘, :input => :none, :output => :insert_as_snippet do |bundle|  #=====无显示名称的快捷命令=======================
=begin
如下示例均为系统已经预置的命令，无需重复制作
示例1 Ctrl+Enter输出<br />
  command t(:quick_br) do |cmd|
    cmd.key_binding = ‘M2+ENTER‘
    cmd.output = :insert_as_snippet
    cmd.input = :none
    cmd.invoke { "<br />" }
  end
示例2 Ctrl+9为选中文字添加包围标签
  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‘] || ‘‘
      if selection.length > 0
        "<${1:p}>#{selection.gsub(‘/‘, ‘\/‘)}</${1:p}>"
      else
        "<${1:p}>$0</${1:p}>"
      end
    end
  end
=end
#可复制一段命令，在下面开始制作新命令

end

在这段配置中，已经配置了AngularJS的指令提示。

with_defaults :scope => ‘text.html entity.other.attribute-name.html‘ do |bundle|  #=====HTML属性代码块====================================================
#如下是一个示例代码块，可以复制后再添加新代码块
  snippet ‘ng-‘ do |s|   #ng-是显示名称，代码助手提示列表显示时可见
    s.trigger = ‘ng-‘        #ng-是激活字符，即按下ng-后会触发该代码块
    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}="$2"‘
        #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。
      #$1是第一个停留光标，$0是最后回车时停留的光标。
      #使用{}包围的内容，是提示值域。
      #如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
      #输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
    s.locationType=‘HTML_ATTRIBUTE‘
  end #ng代码块结束

end

指令本质上就是HTML标签的属性，所以我们需要做的就是在这段配置里面添加我们自己需要的指令提示。添加后，该段配置如下：

with_defaults :scope => ‘text.html entity.other.attribute-name.html‘ do |bundle|  #=====HTML属性代码块====================================================
#如下是一个示例代码块，可以复制后再添加新代码块
  snippet ‘ng-‘ do |s|   #ng-是显示名称，代码助手提示列表显示时可见
    s.trigger = ‘ng-‘        #ng-是激活字符，即按下ng-后会触发该代码块
    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}="$2"‘
        #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。
      #$1是第一个停留光标，$0是最后回车时停留的光标。
      #使用{}包围的内容，是提示值域。
      #如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
      #输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
    s.locationType=‘HTML_ATTRIBUTE‘
  end #ng代码块结束

  snippet ‘ms-‘ do |s|   #ms-avalon代码提示
    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}="$2"‘
    s.locationType=‘HTML_ATTRIBUTE‘
  end #ms代码块结束

  snippet ‘:‘ do |s|   #:-avalon2.1.15后使用:xxxx短指令代码提示
    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}="$2"‘
    s.locationType=‘HTML_ATTRIBUTE‘
  end #:代码块结束

  snippet ‘v-‘ do |s|   #v-vue代码提示
    s.trigger = ‘v-‘
    s.expansion=‘v-${1:text/html/show/if/else/else-if/for/on/bind/model/pre/cloak/once}="$2"‘
    s.locationType=‘HTML_ATTRIBUTE‘
  end #v代码块结束

end

配置修改完成后，直接保存，虽然文件上提示保存后即可生效，但是我在实际使用中发现并未生效，不要急，我们只需要重启一下Hbuilder就可以了。重启后，我们在来使用这些指令，只要输入触发的字符串就会出现提示了。 

修改之后的文件内容如下，如果你修改的不成功，直接用下面内容替换整个页面内容：

require ‘ruble‘
=begin
 HBuilder可使用ruby脚本来扩展代码块和增强操作命令。这是极客的神奇玩具。
  本文档用于用户自定义HTML扩展命令，并非HBuilder预置命令的文档，预置的代码块不可改。查阅预置代码块，请在弹出预置代码块界面时点右下角的编辑按钮，比如div代码块。
  本文档修改完毕，保存即可生效。
  玩的愉快，别玩坏！

  脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle
  可以把你的配置共享到这里，也可以在这里获取其他网友的版本

  注：如果1.9版本之前的用户修改过HTML代码块，请点右键打开本文档所在目录，找之前的snippets.rb.bak文件，把修改过的内容放置进来。
=end

with_defaults :scope => ‘text.html text‘ do |bundle|  #==HTML标签代码==
#如下是一个示例代码块，可以复制后再添加新代码块
  snippet ‘div_class‘ do |cmd|  #div_class是显示名称，代码助手提示列表显示时可见
    cmd.trigger = ‘divc‘        #divc是激活字符，即按下divc后会触发该代码块
    cmd.expansion = "<div class=\"$1\">$0</div>"
                                #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。$1是第一个停留光标，$0是最后回车时停留的光标。
                                #如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
                                #输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
    cmd.needApplyReContentAssist = true  #这句话的意思是输出后同时激活代码助手，即在$1的位置直接拉出样式列表
  end #div_class代码块结束

  snippet ‘ng-pluralize‘ do |cmd|
    cmd.trigger = ‘ngp‘
    cmd.expansion = "<ng-pluralize>$1</ng-pluralize>"
  end

end

with_defaults :scope => ‘text.html entity.other.attribute-name.html‘ do |bundle|  #==HTML属性代码==
#如下是一个示例代码块，可以复制后再添加新代码块
  snippet ‘ng-‘ do |s|    #ng-是显示名称，代码助手提示列表显示时可见
    s.trigger = ‘ng-‘     #ng-是激活字符，即按下ng-后会触发该代码块
    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}="$2"‘
    #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。
    #$1是第一个停留光标，$0是最后回车时停留的光标。
    #使用{}包围的内容，是提示值域。
    #如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
    #输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
    s.locationType=‘HTML_ATTRIBUTE‘
  end #ng代码块结束

  snippet ‘ms-‘ do |s|   #ms-avalon代码提示
    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}="$2"‘
    s.locationType=‘HTML_ATTRIBUTE‘
  end #ms代码块结束

  snippet ‘:‘ do |s|   #:-avalon2.1.15后使用:xxxx短指令代码提示
    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}="$2"‘
    s.locationType=‘HTML_ATTRIBUTE‘
  end #:代码块结束

  snippet ‘v-‘ do |s|   #v-vue代码提示
    s.trigger = ‘v-‘
    s.expansion=‘v-${1:text/html/show/if/else/else-if/for/on/bind/model/pre/cloak/once}="$2"‘
    s.locationType=‘HTML_ATTRIBUTE‘
  end #v代码块结束

end

with_defaults :scope => ‘text.html - source‘, :input => :none, :output => :insert_as_snippet do |bundle|  #==无显示名称的快捷命令==
=begin
如下示例均为系统已经预置的命令，无需重复制作
示例1 Ctrl+Enter输出<br />
  command t(:quick_br) do |cmd|
    cmd.key_binding = ‘M2+ENTER‘
    cmd.output = :insert_as_snippet
    cmd.input = :none
    cmd.invoke { "<br />" }
  end
示例2 Ctrl+9为选中文字添加包围标签
  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‘] || ‘‘
      if selection.length > 0
        "<${1:p}>#{selection.gsub(‘/‘, ‘\/‘)}</${1:p}>"
      else
        "<${1:p}>$0</${1:p}>"
      end
    end
  end
=end
#可复制一段命令，在下面开始制作新命令

end

亲测有效，如还有不懂QQ咨询我：844271163

原文地址：https://www.cnblogs.com/xiaohuizhang/p/9089848.html

时间： 2024-08-30 11:49:56

【前端vue开发】Hbuilder配置Avalon、AngularJS、Vue指令提示的相关文章

vue开发环境配置跨域，一步到位

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域 使用工具:vue-cli自带的配置 配置目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //

vue开发环境配置

* 确认node安装好, npm可用 node -v npm -v * 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org * 安装vue-cli cnpm install -g vue-cli vue -V * 创建项目my-vue vue init webpack my-vue 初始化项目中有一步问到是否创建router,选择是 这样就有了 vue-router可以配置路由 Vue.use(Router)

vue开发搭建（npm安装 + vue脚手架安装）

一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue-cli:   用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改) 参考文:htt

vue前端开发那些事——vue开发遇到的问题

vue web开发并不是孤立的.它需要众多插件的配合以及其它js框架的支持.本篇想把vue web开发的一些问题,拿出来讨论下.  1.web界面采用哪个UI框架?项目中引用了layui框架.引入框架的好处就是解决界面风格统一的问题,良好的布局(自适应不同的设备),提供了大量基础组件及模块,如form提交.上传.弹出层.我觉得前台框架的引入,解放了美工的一些工作.以前有bootstrap.现在有layui.element ui(基于vue 2.0). <body> <div id=&qu

【前端】vue.js环境配置以及实例运行简明教程

vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue.js开发环境搭建 VUE.JS简介 何为Vue.js Vue.js(读音 /vju?/, 类似于 view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue

Visual Studio Code 配置VUE开发环境

简介 VSCode(Visual Studio Code)这款开发工具是微软官方出品,开源,免费.功能相当强大.插件丰富,使用者很多,是Vue开发的不二之选.下面讲解下VSCode 配置VUE开发环境 下载 官方:https://code.visualstudio.com/ 在官方下载安装包,点击操作按照指导进行安装就可以,过程比较简单,这里不进行详细介绍. 概念讲解(Workspace&Folder) VSCode中分Workspace和Folder,Workspace相当于是一个项目的集合,

前端学习---移动端vue开发踩坑记

前言: 大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue.这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意的事项.vue开发遇到的一些问题.本文的目的是为了在以后的开发中我们可以避免这些坑,提高我们的开发效率. 一.移动端开发特有问题: 1.移动端样式的兼容性: 在当前移动端的开发要面对各种不同的手机,不同的手机DPI也是不同的,比如Iphone 8的DPI就是2,Iphone 8P的DPI就是3.为了让页面可以兼容不同

vue开发目录

基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案.在这里俺也对整个过程简单做个介绍吧. 目录结构 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访

vue安装与配置

直接引入 <script src="https://unpkg.com/vue"></script> 用npm安装   $ npm install vue Vue.js 提供一个官方命令行工具,vue-cli可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my