1. 网站工具
需要借助的网站(可快速生成vscode需要的代码片段格式): https://snippet-generator.app/
使用说明:
如下图是我所需要生成的vue3.2的初始化基础常用代码:
首先在vscode编辑器中编辑好需要的代码,全部复制到 https://snippet-generator.app/ 网站的左侧,并输入英文的描述,及快捷键。右侧会生成需要的代码片段。
2. 自动生成日期及自动定位光标
-
日期:
${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}
-
光标
使用快捷键生成代码片段后,光标会自动定位到该符号位置,编辑完成后,按 TAb 键会自动跳转到下一个符号(从$0开始,$0是第一个光标定位处)
3. 码片段配置步骤
4. 我的代码片段
{
"create-script-setup": {
"prefix": "3.2",
"body": [
"<template>\"$2\"</template>",
"",
"<script lang=\"ts\" setup></script>",
"",
"<style lang=\"less\" scoped></style>"
],
"description": "create-script-setup"
},
"创建请求接口的基础代码片段": {
"prefix": "capi", // 快捷键
// "scope": "javascript,typedcript",
"body": [
" // 初始化请求页面数据",
" // import { ElMessage } from 'element-plus';$0",
" const loading = ref(false);",
" const init = () => {",
" loading.value = true;",
" // queryApi()",
" // .then((res: Record<string, any>) => {",
" // console.log(1111, res);",
" // if (200 === res.code) {",
" // // 处理数据",
" // } else {",
" // ElMessage.error('xxxxx查询失败:' + res.message);",
" // }",
" // })",
" // .catch((error) => {",
" // ElMessage.error('xxxxx查询失败:' + error);",
" // })",
" // .finally(() => {",
" // loading.value = false;",
" // });",
" };",
"",
" onBeforeMount(() => {",
" init();",
" });"
],
"description": "创建请求接口的基础代码片段"
},
"创建vue3.2模板代码、基础常用代码": {
"prefix": "c32", // 快捷键
"body": [
"<!--",
" * @Description: $1",
" * @Author: huangwm",
" * @Create: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
"-->",
"<template>",
" <div>$2</div>",
"</template>",
"",
"<script lang=\"ts\" setup>",
" import { ElMessage } from 'element-plus';",
" import { defineProps, toRefs, PropType, computed, ref, onBeforeMount, reactive } from 'vue';",
"",
" type CustomPropsType = {",
" // Todo",
" id: number;",
" data: string;",
" };",
" const emit = defineEmits(['test']);",
" const props = defineProps({",
" visible: {",
" type: Boolean,",
" default: true,",
" },",
" pageData: {",
" type: Object as PropType<CustomPropsType>,",
" default: () => [],",
" },",
" });",
"",
" // 初始化请求页面数据",
" const loading = ref<boolean>(false);",
" const init = () => {",
" loading.value = true;",
" // queryApi()",
" // .then((res: Record<string, any>) => {",
" // console.log(1111, res);",
" // if (200 === res.code) {",
" // // 处理数据",
" // } else {",
" // ElMessage.error('xxxxx查询失败:' + res.message);",
" // }",
" // })",
" // .catch((error) => {",
" // ElMessage.error('xxxxx查询失败:' + error);",
" // })",
" // .finally(() => {",
" // loading.value = false;",
" // });",
" };",
"",
" onBeforeMount(() => {",
" init();",
" });",
" </script>",
"",
"<style lang=\"less\" scoped></style>"
],
"description": "创建vue3.2模板代码、基础常用代码"
}
}
原文地址:https://www.jb51.cc/wenti/3284299.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。