如何在 Visual Studio Code 中为文件扩展名创建模板？

Question

在我的 Vue.js 项目中几乎所有时候我都需要这个代码 sn-p 作为模板。

<template>
    <div>
    </div>
<template>

<script>

export default{
    data(){
        return{
        }
    },
    methods:{
    },
    created(){
    }
}
</script>

<style scoped>
</style>

有没有办法在我每次创建扩展名为 .vue 的文件时告诉 Visual Studio Code 自动将该 sn-p 添加到文件中？

简单地说，当我创建具有特定扩展名的新文件时，该扩展名的预定义模板应自动添加到文件中。

Answer 1

没有，不是本地的。但是有一个名为File Templates for VSCode 的扩展程序允许您创建自己的文件模板并从中生成。但我认为你会受益于做一个扩展来做到这一点，甚至更多。

与此同时，您可以使用 sn-p 生成此文件，而不必复制粘贴。

转到文件>首选项>用户片段并从下拉列表中选择Vue。只有安装了支持此文件类型的扩展时，Vue 才会显示。在这种情况下，我推荐Vetur，但您可能已经拥有它。

然后只需将此条目添加到您的 vue.json 文件中：

"vuetpl" : {
        "body": [
            "<template>",
            "\t<div>",
            "\t\t$0",
            "\t</div>",
            "</template>",

            "<script>",

            "export default{",
            "\tdata(){",
                "\t\treturn{",
                    "\t\t\t",
                "\t\t}",
            "\t},",
            "\tmethods:{",
                "\t\t",
            "\t},",
            "\tcreated(){",
                "\t\t",
            "\t}",
            "}",
            "</script>",

            "<style scoped>",
            "</style>",
        ],
        "prefix": "vuetpl",
        "description": "Creates a new template."
    }

然后，当您创建一个新的.vue 文件时，只需键入vuetpl 并按tab 即可自动完成，您将拥有：

当然，你也可以使用Snippet Generator来制作自己的sn-ps。

Answer 2

扩展 Auto Snippet 正是这样做的。

你只需要配置两件事：

• sn-p 的名字
• 文件名模式或语言用于何​​时应应用 sn-p

推荐

作者有一些非常自定义的默认设置，所以一旦你安装它，修改它的设置并删除那些你不需要的模式。

否则每次创建文件都会报错，找不到配置的sn-p。