Sublime Text自定义snippet

2023-10-08 01:10
文章标签 自定义 sublime text snippet

本文主要是介绍Sublime Text自定义snippet，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于Sublime Text自定义snippet的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/161680。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
【Python报错已解决】AttributeError: ‘list‘ object has no attribute ‘text‘

【Python报错已解决】AttributeError: ‘list‘ object has no attribute ‘text‘

🎬 鸽芷咕：个人主页  🔥 个人专栏: 《C++干货基地》《粉丝福利》 ⛺️生活的理想，就是为了理想的生活! 文章目录 前言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一：检查属性名2.2 步骤二：访问列表元素的属性 三、其他解决方法四、总结 前言 在Python编程中，属性错误（At
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
鸿蒙开发中实现自定义弹窗 (CustomDialog)

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么？ CustomDialog是自定义弹窗，可用于广告、中
阅读更多...
mybatis框架基础以及自定义插件开发

mybatis框架基础以及自定义插件开发

文章目录 框架概览框架预览MyBatis框架的核心组件MyBatis框架的工作原理MyBatis框架的配置MyBatis框架的最佳实践 自定义插件开发1. 添加依赖2. 创建插件类3. 配置插件4. 启动类中注册插件5. 测试插件 参考文献 框架概览 MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射，为开发者提供了极大的灵活性和便利性。以下是关于M
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2