vs code 添加vue单文件的快捷片段

在写vue项目时,经常需要创建一个vue单文件,然后写入vue单文件的基本结构:

<template lang='pug'>
    
</template>

<script>
export default {
    
}
</script>

<style lang='stylus' scoped>

</style>

每次都这样写非常繁琐,还好vs code 提供了自定义快捷片段(snippets)的功能。添加如上结构的快捷片段的步骤如下:

  1. 点击文件=>首选项=>用户代码片段
  2. 点击vue
  3. 在json中添加如下代码:
    "vue with pug and stylus": {
        "prefix": "vue",
        "body": [
            "<template lang='pug'>",
            "\t$1",
            "</template>",
            "",
            "<script>",
            "export default {",
            "\t",
            "}",
            "</script>",
            "",
            "<style lang='stylus' scoped>",
            "",
            "</style>"
        ],
        "description": "vue single file snippet with pug and stylus used"
    }

保存之后,以后创建好vue文件,只需在里面输入vu两个字母,弹出智能提示里就会有这个片段,再按enter或tab就添加片段到光标处了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 开始 点击左下角的设置 点击"用户代码片段"->新建全局代码片段 创建自己的代码段 可以定义自己的代码段,全局代码...
    吃码小妖阅读 1,500评论 0 0
  • Ctrl+D下一个匹配的也被选中 删除光标右侧的所有字:Ctrl+Delete 来自:https://juejin...
    persistlu阅读 1,497评论 0 0
  • 插件说明效果Atom One Dark Theme一款很漂亮的主题插件Auto Close Tag自动添加HTML...
    小贤笔记阅读 13,197评论 3 16
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,584评论 16 22
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,620评论 0 11