vscode配置代码片段

天蚕土豆丝

已于 2023-12-21 11:06:10 修改

阅读量681

点赞数 8

文章标签： vscode vue.js ide

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

本文链接：https://blog.csdn.net/zhangfeng1329972027/article/details/134738546

版权

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

摘要由CSDN通过智能技术生成

1.ctrl + shift + p 然后选择 Snippets:Configure User Snippets （配置用户代码片段）
2.选择vue或者vue.json
3.下面为json内容
{
“vue-template1”: {
“prefix”: “mtable”,
“body”: [
“”,
" <a-modal v-model:visible=“visible” width=“1000px” title=“” :maskClosable=“false” @ok=“onOk”>“,
" <a-table bordered :columns=“columns” :pagination=“false” :data-source=“list”> ”,
" “,
“”,
“”,
“<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”,
"

“,
" )”,
" }“,
" },”,
" {“,
" title: ‘’,”,
" dataIndex: ‘age’,“,
" align: ‘center’”,
" }“,
“]”,
“function onOk() {”,
" emit(‘sure’)”,
" visible.value = false",
“}”,
“function showModal() {”,
" visible.value = true",
“}”,
“defineExpose({ showModal })”,
“”
],
“description”: “vue-template1”
},
“vue-template”: {
“prefix”: “modal”,
“body”: [
“”,
" <a-modal v-model:visible=“visible” width=“1000px” title=“” :maskClosable=“false” @ok=“onOk”>“,
“”,
" ”,
“”,
“”,
“<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 })”,
“”
],
“description”: “vue-template”
},
}