VsCode Vue 快捷键生成代码模板(Vue2、Vue3)

发布于 2022-09-25 09:10:44

VsCode一些相关设置


image.png

然后打开vue.json

提示:若原本就没有vue.json,则选择 “新建全局代码片段文件”然后设置保存目录(默认的路径即可)。

image.png

打开之后将我下面的代码拷贝过去就可以(可以自定义修改) 


{

  "Print to v2": {

    "prefix": "vue2",

    "body": [

      "<template>",

      "  <div>\n",

      "  </div>",

      "</template>",

      "<script>",

      "export default {",

      "  data() {",

      "    return {\n",

      "    }",

      "  },",

      "  mounted(){\n",

      "  },",

      "  computed:{\n",

      "  },",

      "  methods:{\n",

      "  },",

      "}",

      "</script>",

      "<style scoped>\n",

      "</style>",

      "$2"

    ],

    "description": "Log output to console"

  },

  "Print to v3": {

    "prefix": "vue3",

    "body": [

      "<template>",

      "  <div></div>",

      "</template>",

      "<script>",

      "export default {",

      "  components: {\n",

      "  },",

      "  props: {\n",

      "  },",

      "  setup(props, context) {\n",

      "  }",

      "}",

      "</script>",

      "<style scoped>\n",

      "</style>",

    ],

    "description": "Log output to console"

  },

  "Print to setup": {

    "prefix": "setup",

    "body": [

      "<template>",

      "  <div></div>",

      "</template>",

      "<script setup>\n",

      "</script>",

      "<style scoped>\n",

      "</style>",

    ],

    "description": "Log output to console"

  }

}

然后在 .vue文件中 输入上面 prefix 对应的快捷键。

我上面配置了三个,也就是直接输入vue2或vue3或setup就可以了。


如果不生效怎么办

第一种情况:

首先保存并重启vscode 

然后看一下打开的vue页面 右下角 是不是没设置成Vue


image.png

可以修改默认为 vue 


这样就可以了

 第二种情况:

 如果配置的模板代码片段是用在<script>标签中,这时候就不能配置在vue.json中,要配置在javascript.json中

如下: 

image.png


关注公众号,了解更多it技术(it问答网

0 条评论

发布
问题