为了账号安全,请及时绑定邮箱和手机立即绑定

Sublime3 编写 snippet

标签:
前端工具

为了方便快捷在 Sublime 下新建 vue 的组件,所以我尝试写个 snippet,真个是网上文章一大抄,都是说在 tools 下 有个 new snippet 选项,我使用的 sublime3,并没有这个选项,只好去看下sublime的使用目录,sublime3下 新建 snippet 的步骤是这样的: ```

toos > developer > 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> -->
</snippet>

我们只需要将我们需要的snippet替换掉Hello, ${1:this} is a ${2:snippet}.即可。


最后的两个注释其中

  • <tabTrigger>定义该snippet打开的快捷方式(比如这里默认的是 hello, 我们在sublime新建的文件中只要输入hello 然后再按下 tab键,就可以触发我们自定义的代码片段)。
  • <scope>则限定我们在什么样的文件格式里才能使用该snippet。

    自定义好snippet之后 ctrl+s 默认保存至 packages目录下的 user目录下,输入保存名之后保存,最后会自动生成后缀名为.sublime-snippet的文件。ok 大功告成。

参考 Sublime docs
另附我写的 vue component snippet

<snippet>
    <content><![CDATA[
<template>

</template>

<script type="text/ecmascript-6">

</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>vue</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消