探讨vscode中如何配备并应用.vue代码模版

WWW.lllT.neTvscode中怎么用.vue代码模版？下边这篇文章内容给我们介绍一下vscode中配备并应用.vue代码模版的方式，期待对各位有些协助！

vscode里应用.vue代码模版

1.设定.vue模板

开启编辑软件，点一下文档 —— 首选项 —— 客户编码精彩片段，会弹出一个文本框。【建议学习培训：《vscode教程》】

在文本框键入vue，回车键，会开启一个vue.json文件。

在里面拷贝下列编码：

{
"Print to console": {
"prefix": "vue",
"body": [
"<!--",
"* @Component: ",
"* @Maintainer: ",
"* @Description: ",
"-->",
"<template>",
"  <div class="container">n",
"  </div>",
"</template>n",
"<script>",
"export default {",
"  name: {n",
"  },",
"  data() {",
"    return {n",
"    }",
"  },",
"  mounted(){n",
"  },",
"  methods: {n",
"  },",

"  components: {n",
"  }",
"}",
"</script>n",
"<style scoped lang="scss">n",
"</style>",
"$2"
],
"description": "Log output to console"
}
  }

模版具体内容可按自身的爱好自主改动。

随后新创建一个.vue文档，键入vue随后按tab键。

2.假如第一步沒有取得成功

假如第一步取得成功是较好的，万一按tab键沒有取得成功转化成模版，反而是多了一个空格符：

流程一：点一下文档 —— 首选项 —— 设定，改动下列设定：

"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
},
"emmet.triggerExpansionOnTab": true

流程二：点一下编辑软件右下方笑容左侧的文件属性，挑选配置文件关系，键入vue随后回车键。右下方的文件属性便会从html变为vue。这时再用tab键就可以取得成功转化成模版了~

大量程序编写有关专业知识，请浏览：编程学习！！

以上便是探讨vscode中如何配备并应用.vue代码模版的详尽具体内容，大量请关心自学java网其他相关文章！

WWW.lllT.neT