Sublime Text创建snippet教程

Published
2022-10-04
浏览次数 :  24

sublime text是和vs code不相上下的ide工具,但是因为其轻便性,又比vs code更甚一筹。

在sublime text上也有很多安装包可以安装不同的插件。开发代码时候我们经常会重复输入很多相同代码,总是复制粘贴,费时费力,如果我们把代码片段封装,只要一个名称就可以调用,那就会省下很多精力,让代码开发更有效。

如何在sublime text 上创建代码片段?

首先打开sublime text,在tools面板,找到developer选项卡,找到new snippet选项。

然后sublime会创建一个默认的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> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

snippet是它的结构语言。 我们真正的段代码的内容,是在<content></content>标签之内的内容。

如果我的短代码是一段js, 那么content里面就长这样:

  <content><![CDATA[
{
  "$schema":"https://schemas.wp.org/trunk/block.json",
  "apiVersion":2,
  "name":"",
  "title":"",
  "category":"text",
  "icon":"",
  "description":"",
  "keywords":[],
  "version":1,
  "textdomain":"udemy-plus",
  "editorScript":"file:./index.js",
  "attributes":{
  },
  "style":"file:./index.css"
}
]]></content>

然后我们删除掉注释,

然后我们要设置tab trigger, 也就是触发的命令,这个名字你可以任意,跟你短代码内容相关即可,好记。

<tabTrigger>block file</tabTrigger>

这样只要输入block file时候sublime text就会为我们自动加载上面一段js了、。

最后我们要设置的是scope , 使用的领域。 比方说上面这段是json , 我们就设置为scope为javascript. 如果是Python ,就设置python .

<scope>source.json</scope>

完整的snippet文件长这样:

<snippet>
  <content><![CDATA[
{
  "$schema":"https://schemas.wp.org/trunk/block.json",
  "apiVersion":2,
  "name":"",
  "title":"",
  "category":"text",
  "icon":"",
  "description":"",
  "keywords":[],
  "version":1,
  "textdomain":"udemy-plus",
  "editorScript":"file:./index.js",
  "attributes":{
  },
  "style":"file:./index.css"
}
]]></content>
  
  <tabTrigger>block file</tabTrigger>
  <scope>source.json</scope>
  
</snippet>

Top