Tiny模板引擎之开发工具

简介:

要想做一流的模板引擎,当然有一流的模板编辑器是必须的。

Tiny模板引擎推出已经有一段时间了,但是由于其语法是独立的,因此编辑只能采用一般的文本编辑器,但是编辑效率自然就低。还有一种是采用Velocity编辑器进行编辑,但是带来的问题经常会有错误的语法提示,有些语法无法正确提示,总而言之言而总之,就是不好用。那问题已经来了,咋办?答案当然是最好有一个自己的了。

现在,Tiny模板引擎的专有编辑器来了!

特性介绍

  1. 大纲支持:支持在大纲当中显示一些关键内容,并可以快速定位
  2. 语法高亮:支持在编辑器中,根据语法进行着色,使得代码更容易阅读和排错
  3. 错误提示:如果模板语言存在错误,则可以在工程导航、错误视图及编辑窗口进行错误提示
  4. 代码折叠:支持对代码块进行代码折叠,方便查阅
  5. 语法提示:支持Tiny模板引擎语法提示及Html语法提示方便快速录入
  6. 快速定位:支持Tiny模板中开始语句与结束语句间快速切换
  7. 变量快速提示:点鼠标点击某变量时,会高亮显示文件中的所有同名变量
  8. 宏定义对应位置显示:在tiny块处理的标签头部按ctrl时,会高亮显示与其对应的#end,反之亦然
  9. 格式化:可以按快捷键ctrl+shift+F进行格式化了
  10. 注释处理:可以按快捷键ctrl+/来进行快速设置单行注释或取消单行注释,可以按ctrl+shift+/来进行快速设置块注释或取消块注释

截图介绍

大纲支持,现在支持宏定义,布局定义,布局实现,变量定义四种,可以通过双击大纲树中的节点,快速定位并选定相关的内容

语法着色,这里的颜色是我自己乱配的,仅用于展示效果,后面会让美工仔细配配颜色

错误提示,当写的模板有错误的时候,在项目导航,编辑窗口及错误视图中都会同步显示:

点击编辑器前面的X,可以显示详细的错误信息:

代码折叠

语法提示

也支持模糊匹配,可以看到输入了oc,实际上就过滤了只包含包含o和c的提示内容

除了模板语言的提示,也支持Html语法的支持:

当然,对html的支持不能仅仅是支持标签,属性也要支持:

快速切换:

当用ctrl+鼠标左键点击#end时,会快速定位到对应的宏标签头部,当用ctrl+鼠标左键点击宏标签头部时,可以快速定位到对应的#end。

同名变量显示,点击一个变量时,同名变量会高亮显示


当在块头或块尾按Ctrl键时,对应的块尾或块头会高亮显示,便于快速定位。


格式化之前

格式化之后

快速注释示例

总结

至些,Tiny模板引擎的编辑器就展示得差不多了,有了工具的支持,整个开发效率可以得到显著提升。

也欢迎同学们提出新的需求有意见建议。

此插件即将发布,感兴趣的同学,请关注本人相关信息。

相关文章
|
9月前
art-temple模板引擎
介绍 安装 渲染模板 语法 标准语法 原始语法 输出 原文输出 条件 循环 变量 模板继承 子模版 过滤器 和express结合使用 安装 例子 使用步骤
43 0
|
4月前
|
前端开发 JavaScript 开发者
【第44期】一文了解全新框架Remix
【第44期】一文了解全新框架Remix
180 0
|
6月前
|
开发框架 JavaScript 前端开发
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
57 0
|
11月前
|
前端开发 开发者 UED
前端封装库/工具库的UI框架之Semantic UI
随着前端技术的不断发展,前端开发也越来越受到了重视。而在前端开发过程中,UI框架是不可或缺的一部分。Semantic UI 是一个流行的、现代化的 UI 框架,它为前端开发者提供了一套丰富、易用的组件库和样式表。
323 0
|
前端开发 JavaScript IDE
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
我曾经多次向人推荐Vim,其热情程度有些类似现在卖保险的,有的时候,人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面,比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车,比如因为所谓完美的音质而舍不得一个老旧的有线耳机,比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
|
JavaScript 前端开发 Linux
.Net开发的跨平台Word模板引擎
项目采用类似Vue、React模板方式,在模板定义相应的变量,再结合数据,快速生成Word文件。比如模板定义{FullName{}},项目会自动匹配键值为FullName的对象,并替换。
234 0
.Net开发的跨平台Word模板引擎
|
JSON 前端开发 JavaScript
【前端】学习VUE框架之开发工具visual studio code
安装好了node环境,接下来可以进行下一步开发工具安装及开发环境的操作了
495 0
【前端】学习VUE框架之开发工具visual studio code
symfony框架Twig模板语言的使用
symfony框架Twig模板语言的使用
118 0
symfony框架Twig模板语言的使用
|
开发框架 自然语言处理 安全
第21天:Web开发 Jinja2模板引擎
第21天:Web开发 Jinja2模板引擎
181 0
第21天:Web开发 Jinja2模板引擎
|
数据处理 开发者 Python
Jinja2 模板引擎简介 | 学习笔记
快速学习Jinja2模板引擎简介
214 0