VS代码如何为文件扩展名创建模板

Question

在我的vue.js项目中，几乎所有时候我都需要此代码段作为模板。

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

<script>

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

<style scoped>
</style>

我的问题是，每当我创建扩展名为.vue的文件时，它们是一种告诉VS代码的方法，请自动将该代码段添加到文件中。

我想要的只是当我创建具有特定扩展名的新文件时，该扩展名的预定义模板应自动添加到文件中。

Answer 1

这是稳定版 v1.70。

1. 确保您没有禁用此设置，方法是将其设置为hidden：

// Controls if the untitled text hint should be visible in the editor.  
"workbench.editor.untitled.hint": "text",   // "text" is the default

2. 创建一些片段，用作片段文件中您感兴趣的任何语言的模板（此处它们位于全局片段文件中）：

"vue template": {

    "isFileTemplate": true,  // this is the key

    "scope": "vue",

    "prefix": "vueTemplate",
    "body": [
        "const a = 'vue template'"
    ],
    "description": "vue template"
},

"javascript template": {
    "isFileTemplate": true,
    "scope": "javascript",

    "prefix": "jsTemplate",
    "body": [
        "const a = 'javascript template'"
    ],
    "description": "javascript template"
},

这里的选项isFileTemplate是关键。任何带有此选项的代码片段都将出现在以下工作流程中。

如果您"scope": "someLangID here"在键绑定中进行了设置，那么 vscode 可以并且会自动将当前编辑器的语言更改为该语言 ID。

3. 创建一个新文件：

A。使用命令File: New Untitled File Ctrl+N

然后您将在文件顶部看到消息，如本演示所示：

....   or fill with template, or   .....

单击该按钮将显示该"isFileTemplate": true,集的所有片段。从打开的结果 QuickPick 中选择一个将输入片段内容并将编辑器的语言关联更改为该scope值。

正如您从演示中看到的那样，由于某种原因，我经常需要将焦点切换到另一个文件，然后再返回到新文件，才能显示提示文本。

b. 您还可以使用命令（在命令面板中找到）将现有文件修改为片段内容和语言

Snippets: Fill File With Snippet

[此命令Snippets: Fill File with Snippet : workbench.action.populateFileFromSnippet没有默认的键绑定。]

正如您在演示中看到的，使用此命令将删除文件的所有当前内容并更改该编辑器的语言关联。但不会更改文件扩展名（例如，.ts如果.js您之前保存并命名为 file0.

因此，制作初始片段可能是最困难的部分，您可以查看片段生成器应用程序。

这是我在上面的演示中使用的示例模板：

// Controls if the untitled text hint should be visible in the editor.  
"workbench.editor.untitled.hint": "text",   // "text" is the default

Answer 2

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

同时，您可以使用摘要来生成该摘要，而不必复制粘贴。

转到“ 文件”>“首选项”>“用户片段”，然后从下拉菜单中选择“ 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即可自动完成，您将获得以下信息：

当然，您也可以使用代码片段生成器来制作自己的代码片段。

Answer 3

扩展自动片段正是这样做的。

您只需要配置两件事：

• 片段的名称
• 应应用代码片段的文件名模式或语言

推荐

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

否则，每次创建文件时它都会抱怨，并且找不到配置的代码片段。