Vscode自定义用户模板
Vscode配置路径:
中文版:
文件-->首选项-->用户片段
英文版:
file-->preferences-->user snippets
选择相应的文件类型,此处以vue为例
然后进入到 vue.json配置文件。配置内容如下:
{ // 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-temp": { "prefix": "vue-tem", "body": [ "<template>", " <div class=\"\">", " </div>", "</template>", "<script>", "import {testdata} from '@/api/api';", "export default {", " data() {", " return {", " }", "},", " methods: {", " init(){", " }", "},", " components: {},", " created() {},", " mounted() {", " this.init()", " }", "}", "</script>", "<style lang=\"scss\">", "</style>", ], "description": "快速创建bue模板" } }
保存后,新建一个 a.vue文件,输入 vue- 即可出现选择模板,选择后即可:
备注:
"vue-temp"
是模板名字。
"prefix": ""
这里规定的是触发模板的关键词,我这里规定触发词为vue。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步