本篇文章給大家介紹vscode中vue文件自定義模板的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
具體步驟
1、文件 –> 首選項 –> 用戶片段
在輸入框輸入vue（如果要設置其他文件的模板，也可以輸入其他文件）【推薦學習：《vscode》】
立即學習“前端免費學習筆記（深入）”；
2、選擇Vue(vue)
編輯器自動打開了一份vue.json文件
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>", "</style>", ????????], ????????"description":?"This?is?a?simple?vue?template" ????} }
prefix： 表示生成自定義模板的命令（vue） body：自定義模板，每行為數組里的一個元素 $0: 表示生成模板后光標的所在位置 description: 自定義模板的描述
4、保存vue.json 文件
5、新建一個vue文件，輸入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>", "</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>", "</style>", ????????], ????????"description":?"This?is?a?simple?vue?template" ????}, }
更多編程相關知識，請訪問：vscode！！
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
