vscode配置代码片段

天蚕土豆丝

已于 2024-11-06 14:44:41 修改

阅读量866

点赞数 8

文章标签： vscode vue.js ide

于 2023-12-01 16:43:44 首次发布

本文链接：https://blog.youkuaiyun.com/zhangfeng1329972027/article/details/134738546

版权

文章详细介绍了如何在Vue项目中通过`ctrl+shift+p`快捷键配置用户代码片段，展示了两个示例：一个是配置包含表格的模态对话框，另一个是基本的模态对话框模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ctrl + shift + p 然后选择 Snippets:Configure User Snippets （配置用户代码片段）
2.选择vue或者vue.json
3.下面为json内容

{
	"vue-template1": {
		"prefix": "mtable",
		"body": [
				"<template>",
				"  <a-modal v-model:visible=\"visible\" width=\"1000px\" title=\"\" :maskClosable=\"false\" @ok=\"onOk\">",
				"    <a-table bordered :columns=\"columns\" :pagination=\"false\" :data-source=\"list\"> </a-table>",
				"  </a-modal>",
				"</template>",
				"",
				"<script setup lang=\"tsx\">",
				"import { message } from 'ant-design-vue'",
				"import request from '@/utils/request'",
				"const emit = defineEmits(['sure'])",
				"const visible = ref(false)",
				"const list: any = ref([])",
				"const columns = [",
				"  {",
				"    title: '',",
				"    dataIndex: 'name',",
				"    align: 'center',",
				"    customRender: ({ record }: { record: any }) => {",
				"      return (",
				"        // prettier-ignore",
				"        <div></div>",
				"      )",
				"    }",
				"  },",
				"  {",
				"    title: '',",
				"    dataIndex: 'age',",
				"    align: 'center'",
				"  }",
				"]",
				"function onOk() {",
				"  emit('sure')",
				"  visible.value = false",
				"}",
				"function showModal() {",
				"  visible.value = true",
				"}",
				"defineExpose({ showModal })",
				"</script>"
		  ],
		  "description": "vue-template1"
		},
		"vue-template2": {
		  "prefix": "modal",
		  "body": [
				"<template>",
				"  <a-modal v-model:visible=\"visible\" width=\"1000px\" title=\"\" :maskClosable=\"false\" @ok=\"onOk\">",
				"",
				"  </a-modal>",
				"</template>",
				"",
				"<script setup lang=\"tsx\">",
				"import { message } from 'ant-design-vue'",
				"import request from '@/utils/request'",
				"const emit = defineEmits(['sure'])",
				"const visible = ref(false)",
				"function onOk() {",
				"  emit('sure')",
				"  visible.value = false",
				"}",
				"function showModal() {",
				"  visible.value = true",
				"}",
				"defineExpose({ showModal })",
				"</script>"
		],
		"description": "vue-template2"
    }
  }