如何在Sublime Text软件中自定义代码片段

如何在Sublime Text软件中自定义代码片段,第1张

我们运用Sublime Text的时候,有时输入一个单词按一下TAB键就会出现一大堆写好的代码片段,这种功能节省了大量的开发时间。那么如何实现这种功能呢?下面我就给大家分享一下。

工具/材料

Sublime Text

01

点击顶部的工具菜单,在下拉菜单中选择代码片段选项,如下图所示,这种添加方式会创建一个空白的片段文件,所有的语法都需要添加者从新输入

02

接下来我们用一种不需要输入语法规则的方式,如下图所示,选择工具下拉菜单里的插件开发,然后选择新建代码片段选项

03

然后Sublime会自动创建一个代码片段文件,文件中已经默认写好了语法规则,如下图所示

04

接下来我们在CDATA区域添加一个简单的代码片段,然后修改一下代码片段适用的文件类型,如下图所示

05

编辑好以后按Ctrl+S组合键保存编写的代码片段,在d出的保存界面给代码片段文件起名,然后Sublime会自动将文件保存到代码片段文件夹,如下图所示

06

然后我们要验证代码片段了,由于我设置的代码片段生效文件是PHP类型的,所以新建一个PHP文件,如下图所示

07

接下来在PHP文件中直接输入代码片段调出命令,然后按一下tab键即可,如下图所示

08

最后我们就可以在新建的PHP文件中看到刚才定义的代码片段内容了,如下图所示,以上就是Sublime Text中代码片段的使用方法了

Sublime Text是一个文本编辑器,用于编写各种编程语言的代码,其界面与其他文本编辑器类似。如果您已经安装并打开了Sublime Text,可以按照以下步骤来输入代码:

1. 打开Sublime Text,进入编辑模式。可以通过“File”菜单中的“New File”或快捷键“Ctrl+N”打开一个新文件。

2. 在编辑器中输入代码。可以使用键盘输入,也可以将代码从其他文本编辑器或程序复制到Sublime Text中。

3. 格式化代码。Sublime Text支持代码的语法高亮、自动缩进等功能,可以在菜单栏中选择“View”>“Syntax”选择您所要编写的编程语言进行格式化。

4. 保存代码。完成代码输入后,使用“File”菜单中的“Save”或快捷键“Ctrl+S”保存代码。

需要注意的是,Sublime Text中的代码输入方式与其他文本编辑器或IDE可能存在一些差异,用户需要逐步熟悉并掌握Sublime Text的各种功能,以提高编程效率。

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet(代码片段)功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

创建方法:Tools (工具)>New 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>-->

<!-- <description>description</description>-->

</snippet>

其中,content中由CDATA包裹起来的部分是我们要插入的代码片段,可选。

tabTrigger是我们tab键触发的自动补全代码功能的一个名字,可选。

scope,可选,使用范围,不填写代表对所有文件有效。附:source.css和test.html分别对应不同文件。

description,可选,在snippet菜单中的显示说明(支持中文)。如果不定义,菜单则显示当前文件的文件名。

${1:this}表示代码插入后,光标所停留的位置,可同时插入多个。其中:this为自定义参数(可选)。

${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)。

现在,你应该有了个大致的了解。那我们就开始自己动手编写一个实例。我们都知道,再Sublime中,输入!或者html:5再按tab键,可以自动补全HTML结构,但是这个结果相对很简单,我自己扩展了它的结果内容,新增了几个mate标签,增加了页面描述。

<snippet>

<content><![CDATA[

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<meta name="Generator" content="Sublime Text3">

<meta name="Author" content="dunizb">

<meta name="website" content="http://www.mybry.com">

<meta name="description" content=" 我们运用Sublime Text的时候,有时输入一个单词按一下TAB键就会出现一大堆写好的代码片段,这种功能节省了大量的开发时间。那么如何实现这种功能呢?下面我就给大家分享一下。工具/材料 Sublime Text 01 点击顶部">

<link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />

<script type="text/javascript">

${1:}

</script>

<body>

${2:这是html内容}

</body>

</html>

]]></content>

<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->

<tabTrigger>hjs</tabTrigger>

<!-- Optional: Set a scope to limit where the snippet will trigger -->

<!-- <scope>source.python</scope>-->

<description>custom-html</description>

</snippet>

然后保存代码片段,保存到Sublime Text3\Data\Packages\User下面,取个名字

就这样,在HTML页面中输入hjs+tab,就可以自动补全这一系列代码了。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11471330.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-16
下一篇2023-05-16

发表评论

登录后才能评论

评论列表(0条)

    保存