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

Question

在我的 Vue.js 项目中 几乎所有时间 我都需要这个代码片段作为模板。

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

<script>

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

<style scoped>
</style>

有没有办法让 Visual Studio 每次创建扩展名为 .vue 的文件时自动将代码片段添加到文件中？

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

Answer 1

没有，不是原生的。但是有一个名为 File Templates for VSCode 的扩展，它允许您创建自己的文件模板并从中生成。但我认为您可以通过扩展来做到这一点甚至更多。

同时，您可以使用代码片段生成它，而不必复制粘贴。

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

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

"vuetpl" : {
        "body": [
            "<template>",
            "\t<div>",
            "\t\t[=10=]",
            "\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制作自己的片段。

Answer 2

扩展 Auto Snippet 正是这样做的。

你只需要配置两件事：

片段名称
文件名模式 或语言用于何时应应用代码段

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

How can I create templates for file extensions in Visual Studio Code?

visual-studio-code

vscode-settings

推荐