WWW.lllT.neT这篇文章内容给各位详细介绍vscode中vue文档自定模版的方式。有一定的实用价值,有须要的小伙伴可以参照一下,期待对各位有些协助。

聊一聊vscode中如何配置vue文档自定模版

操作步骤

1、文档 --> 首选项 --> 客户精彩片段

聊一聊vscode中如何配置vue文档自定模版

在文本框键入vue(假如要设定其他文件的模版,还可以键入其他文件)【建议学习培训:《vscode教程》】

2、挑选Vue(vue)

编辑软件全自动打开了一份vue.json文件

聊一聊vscode中如何配置vue文档自定模版

3、依据自身的要求,在"Print to console"里怎样你的模版规定,事例如下所示:

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //  "console.log('$1');",
    //  "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  $0",
            "</template>n",
            "<script>n",
            "export default {",
            "  name: '',n",
            "  components: {},n",
            "  data() {",
            "    return {}",
            "  },n",
            "  created() {},n",
            "  methods: {},n",
            "}n",
            "</script>n",
            "<style scoped>",
            "</style>",
        ],
        "description": "This is a simple vue template"
    }
}

prefix: 表明转化成自定模版的指令(vue) body:自定模版,每个人行为二维数组里的一个原素 $0: 表明转化成模版后鼠标光标的地理位置 description: 自定模版的叙述

4、储存vue.json 文档

5、新创建一个vue文档,键入vue,按回车键就可转化成刚设计好的自定模版

聊一聊vscode中如何配置vue文档自定模版

最后的模版:

聊一聊vscode中如何配置vue文档自定模版

那那么问题来了假如我想设定好几个自定模版呢?

这一也非常简单,仅有在刚设定好的vue.json里,在写多一个模版就可以了,如下所示:

{
    "vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  $0",
            "</template>n",
            "<script>n",
            "export default {",
            "  name: '',n",
            "  components: {},n",
            "  data() {",
            "    return {}",
            "  },n",
            "  created() {},n",
            "  methods: {},n",
            "}n",
            "</script>n",
            "<style scoped>",
            "</style>",
        ],
        "description": "This is a simple vue template"
    },

    "vue2": {
        "prefix": "vue2",
        "body": [
            "<template>",
            "  $0",
            "</template>n",
            "<script>n",
            "export default {",
            "  name: '',n",
            "  props: {},n",
            "  data() {",
            "    return {}",
            "  },n",
            "  created() {},n",
            "  methods: {},n",
            "}n",
            "</script>n",
            "<style scoped>",
            "</style>",
        ],
        "description": "This is a simple vue template"
    },
}

大量程序编写有关专业知识,请浏览:编程视频!!

以上便是聊一聊vscode中如何配置vue文档自定模版的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:聊一聊vscode中如何配置vue文档自定模版发布于2021-12-11 21:00:02