Sublime Text自定义snippet

最新推荐文章于 2023-04-19 23:16:40 发布
最新推荐文章于 2023-04-19 23:16:40 发布
阅读量202 收藏
点赞数
文章标签： php
原文链接：http://www.cnblogs.com/wyq-web/p/9381734.html
版权

Sublime Text自定义snippet

snippet可以理解为代码片段, 在自定义好snippet后就可以快带生成相应的代码片段

  • 安装sass snippet插件 （支持该功能的插件，sublime 2和3都可以使用该功能）
  • 查看snippet功能是否可用
  1. 新建一个html文件，按ctrl+shift+p 后输入snippet，看是否有相应的snippet字段。如果有，则表示snippet可正常使用
  • 查看对应文件的scope
  1. snippet功能通过键入关键词后按tab完成代码不全，但是很多时候我们针对不同文件类型，并不需要其他文件中使用的代码，所以需要查看某些文件对应的scope
  2. 打开要编辑snippet代码块指定补全的代码类型或者通过命令行（ctrl+shift+p）键入‘ssphp’（set syntax:php 设置文件类型为php）。接着按ctrl+shift+alt+p，在编辑器下方就会显示对应的scope。比如php文件和html文件对应的scope是‘text.html’，而css和js则是source.css和source.js。
  • 新建snippet并编辑snippet

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.           　　　　　　　　　　　　　　　　　　　　　　<!--自动补全的代码快放置在这中间-->
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->                                                           <!--使用时注释去掉，将中间的词换成按tab触发补全的关键词-->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->                                                          <!--设置在什么文件类型下触发补全，填写上文获得的scope-->
</snippet>

　3.补全内容中，$符号表示的是代码不全后光标出现的位置和顺序。比如${1:this}：意为光标在此第一次出现，默认值为this，且该默认值被选中。如果有多个$1，则光标同　　时出现在此处，而默认值只按照第一个设置的值出现。下面定义了${2:snippet}，所以，当修改了$1后，按tab，则直接跳转到$2的位置。另外，如果需要显示$符号，则需　　要在符号前面加‘\’转义。

　4.如果触发关键词和sublime text中自带的代码补全关键词有冲突的话，可能会造成该snippet无效。

在ST中: 依次选择tools -> Developer -> New Snippet, 就打开默认的snippet了:

  • snippet的保存
  1. 编辑完的snippet需要使用sublime text规定的后缀：    .sublime-snippet。
  2. 代码保存到sublime text安装路径下的：Data > Packages > User 目录下即可。
  3. 建议在User 目录下新建一个snippet目录专门保存snippet的代码块。（不影响功能）。
  • snippet的使用
  1. 编辑完后，打开新建一个该snippet对应文件类型的文件后，键入关键字并按tab即可完成代码的补全
  2. css的代码块补全前，需要在关键字前加'.'或者'#'然后再按tab。（此处略坑。所以在编辑snippet的时候，可以在代码块前加个$1,补全后可以直接把符号删除。）

其中的content中的CDATA就是实际的snippet的内容. 
tabTrigger就是触发snippet的字符串, 比如html5. 
scope就是说在哪里会触发, 可以简单理解为文件类型.

下面是上图中的snippet写法:

<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <title>${1}</title> <link rel="stylesheet" href="index.css"> </head> <body> ${2} </body> </html> ]]></content> <tabTrigger>html5</tabTrigger> <scope>text.html</scope> </snippet>

可以看到上面有个${1}, ${2}, 就是按tab键时,光标依次停留的位置.

注意事项:

  • 保存snippet时, 文件扩展名要是sublime-snippet

 

转载于:https://www.cnblogs.com/wyq-web/p/9381734.html

anqila1855
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sublime text3定义代码片段snippet
Tansum
06-02 1243
snippet有什么用呢？它就是用让你事先贮存一段定义的代码段，比如下面典型的用法： 如果每次新建一个html文件时都要输入或复制一遍上述重复代码则有些浪费时间精力，这个时候我们可以通过定义代码片段来简化工作量。 那么下面我们来定义一个自己的snippet吧。 首先，在菜单栏上tool>new snippet中打开snippet模板，我的sublime汉化了，打开位置如下图所示： ...
Sublime-text-User-Snippets:Sublime Text 自定义片段
05-30
Sublime_text_User_Snippets야무의 Sublime Text 커스텀 스니펫 .├── AMD│ ├── amd-define.sublime-snippet│ └── amd-require.sublime-snippet├── CDN│ ├── cdn-jquery-google.sublime-snippet...
sublime text 之snippet功能的使用 -李盛鹏 -博客园
weixin_34237596的博客
08-30 190
　　sublime text 小巧而功能强大，有着好看的外观，被誉为世界上最“性感”的IDE。sublime text也是本小白在最近的学习和做项目当中最常使用的IDE。小巧且功能强大，对于开发前端以及小型项目来说绰绰有余。 　　但对于诸多功能，本白也是通过网上的一些大神笔记以及官网上的一些功能才了解并使用到的。最近习得的功能中，其中一个叫snippet的小功能让人觉得很有意思。于是乎，本白决定...
SUBLIME TEXT3 中使用SNIPPET自定义快捷代码段
sunsineq的专栏
11-18 381
SUBLIME TEXT3 中使用SNIPPET自定义快捷代码段 1. 如图新建一个snippet 2.得到一段默认代码 <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
Sublime Text3—Code Snippets(自定义代码片段)
weixin_30265103的博客
09-18 222
摘要 程序员总是会不断的重复写一些简单的代码片段，为了提高编码效率，我们可以把经常用到的代码保存起来再调用。 平时用sublime安装各种插件，使用Tab键快速补全，便是snippets（可译为代码片段）的一种。 Sublime编辑器还提供了自定义代码片段的功能（当然不止Sublime有此功能），其官方文档中定义如下： Whether you are coding or writing the ...
Sublime自定义Lua代码段Snippet包（Lua函数注释）
03-16
生成带注释的函数，能自动按照参数生成注释行（dfun.sublime-snippet） 使用：用sublime打开Default (Windows).sublime-keymap文件，将里面快捷键Ctrl+Alt+x复制到自己的sublime的快捷键文件内
Sublime Text编辑器
08-22
SublimeText2支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等...
Sublime_Text3
05-04
SublimeText2支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等...
Sublime Text 2.rar
08-13
SublimeText2支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等...
sublime-snippets:一般 Sublime Text 片段
06-12
崇高的文本片段 一般片段。 目前功能： React ES6 茉莉花 ES6 网络包 其他配置提示 要启用 HTML 标签选项卡完成，请将以下内容添加到Preferences > Key Bindings – User ： { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [{ "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" }] } 默认情况下创建一个包含代码片段的新 JavaScript 文件，例如use strict';\n\n 。 安装并编辑Preferences > Package Settings > AdvancedNewFile > Settings User
sublime text的snippet介绍，提高编程效率
weixin_41777118的博客
04-19 864
Sublime Text 的 Snippet 是一种快捷方式，它允许您使用自定义模板或代码片段更快地编写代码
sublime text 2:创建可复用的代码片段(snippet)
小酷陪你玩安卓
04-21 2441
转载自：http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html 对于前端工程师来讲，写一个html页面的基本结构是体力活，每次去拷贝一个也麻烦，sublime text 2 提供了一个很好的复用代码片段。下面介绍一下创建一个html5的代码片
sublime text学习 - Sublime中的Snippet编写
累了就歇一会
09-01 1554
特此声明：此篇文章为转载，如果可以请看原文章：http://ju.outofmemory.cn/entry/105183 我转载至此仅仅是怕这篇文章以后找不到，所以作为自己记录使用。如原作者不同意，请联系我，我删除。 关于如何使用Sublime text可以参考我的另一篇文章, 相信你会喜欢上的.. Sublime Text 2使用心得 现在介绍一下Snippet, Snipp
Sublime Text Snippet(代码片段)功能使用方法
weixin_45590210的博客
09-20 1551
Snippet是很多编辑器都有的功能,简要概括就是储存我们写过的代码,可以直接用几个简单的字符当做指令写出一大段常用的代码. 首先,你得有个Sublime Text. 点击上方的工具后点击里面的插件开发,在点击新建代码片段,就会得到如下的界面 其中第一个红箭头中的一行是储存我们需要的代码片段,第二个红箭头是呼叫该片段的指令.使用的时候直接打出设置好的指令就ok了(要记得把前面的<!–删除掉).写好后ctrl+s保存到自己创建好的文件夹中就好了. 使用样例: ...
手把手教你写Sublime中的Snippet
weixin_30718391的博客
01-03 162
手把手教你写Sublime中的Snippet Sublime Text号称最性感的编辑器, 并且越来越多人使用, 美观, 高效 关于如何使用Sublime text可以参考我的另一篇文章, 相信你会喜欢上的..Sublime Text 2使用心得 现在介绍一下Snippet,Snippets are smart templates that will insert text...
SublimeText3 snippet 编写总结
weixin_30360497的博客
03-22 157
SublimeText3 snippet 编写总结SublimeText的snippet定义功能也十分强大, 类似VAssist.在菜单tool->New Snippet中定义. 打开后显示如下模板.<snippet> <content><![CDATA[Hello, ${1:this} is a ${2:snippet}]]></conte...
Sublime的tab键失效
qq_45228330的博客
04-27 3209
Sublime按tab键既不能自己跳转四个空格，也不能自动完善代码，全部都是补充完整前后标签。 原因：安装了emmet后，将默认 “展开缩写” 的快捷键 “Ctrl+E”改为了 “Tab” 解决： 在“首选项->快捷键设置”中，找到 （英文版的为preferences->Key Bindings) [ { "keys": [ "tab" ], "args": {
sublime php代码片段,Sublime Text Snippets（代码片段）功能
weixin_29196315的博客
03-16 112
我们在编写代码的时候，总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴，大大影响效率。我们利用Sublime Text的snippet功能，就能很好的解决这一问题。通俗的讲，就是把我们常用的代码分别保存起啦，然后通过插件的形式来反复调用。创建方法：Tools > New Snippet这时你会看到如下示例代码：Hello, ${1:this} is a ${2:snippet...
sublime text3 编辑设置的 Snippet
最新发布
04-24
1. 打开 Sublime Text3，选择菜单栏中的“Tools” -> “Developer” -> “New Snippet”。 2. 在打开的文件中，输入代码片段。例如，如果要设置一个简单的 for 循环，可以输入以下代码： ``` <snippet> <content><!...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值