大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
部分转载自:使用sublime-snippet来快速做前端页面
分析
- 在sublime来中,可以通过submlime-snippet来快速补全代码。
- 举个栗子,如果在sublime的存放submlime-snippet的文件夹下有如下的文件(elem-edge.sublime-snippet 文件名不重要)
<snippet>
<tabTrigger>elem-edge</tabTrigger>
<description>edge of the element</description>
<content><![CDATA[ <!-- ${1:elem name} start --> ${2:content} <!-- ${1:elem name} end --> ]]></content>
</snippet>
创建snippet
- 在菜单中打开 Tools-> New Snippet
- 编辑内容
- 保存到User文件夹
用sublime-snippet来快速做前端页面的方式
- 制作一个组件演示页面
- 打开sublime存放snippet文件夹。打开方式是:打开 Preferences>Browse Package,在打开的文件夹中,打开 User文件夹。即sublime存放snippet的文件夹。
- 新建一个文件夹,名称为项目的名称。这样做是方便管理。应该没人一辈子只做一个项目吧~
- 将一个个组件做成一个个的Snippet。为了保证和之前的Snippet的触发的按键不冲突,定义触发按键要加项目名称。例如,下面是一个通用的box
<snippet>
<content><![CDATA[
<!-- ${1:box-name}-box start -->
<div class="box ${1:box-name}-box">
<div class="box-header clearfix">
<h3 class="box-title">${
2:title}</h3>
<div class="box-header-op">
<a href="###">更多>></a>
</div>
</div>
<div class="box-content">${
3:content}</div>
</div>
<!-- ${1:box-name}-box end -->
${
4:}
]]></content>
<tabTrigger>项目名称:box</tabTrigger>
</snippet>
- 稍微复杂一点的,分页组件。
<snippet>
<content><![CDATA[ <!-- 分页 start --> <link rel="stylesheet" href="path-to-jquery.paging.css/jquery.paging.css"> <script src="path-to-jquery.paging.js/jquery.paging.js"></script> <div class="paging-wrap ${1:paging-name}"></div> /*var pager = $('.${1:paging-name}').paging({ pageNum: 10, onPageChange: function(pageAt) { console.log(pageAt); } });*/ <!-- 分页 end --> ]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>项目名称:paging</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
- 注意,补全内容如果要输出$的话,要用\进行转义。
- 然后,就可以进行飞速的编码啦~
自己的Snippet
myscript.sublime-snippet
<snippet>
<content><![CDATA[ <script> ${1:} </script> ]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>mscript</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>html</scope> -->
</snippet>
myscriptsrc.sublime-snippet
<snippet>
<content><![CDATA[ <script src="${1:}"></script>${2:} ]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>mscriptsrc</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/231336.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...