美文网首页
vs code 添加vue单文件的快捷片段

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

作者: 898310778 | 来源:发表于2021-02-09 13:46 被阅读0次

在写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就添加片段到光标处了。

相关文章

网友评论

      本文标题:vs code 添加vue单文件的快捷片段

      本文链接:https://www.haomeiwen.com/subject/mwsejktx.html