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模板代码、基础常用代码"}
}

Vscode 快捷键生成代码片段相关推荐

vscode配置用户代码片段（快捷键自定义代码模板）
vscode 配置用户代码片段入口如下分享两个我配置的 1.vue 文件代码初始化,有些已经注释了,可以自行调整 {// Place your snippets for Vue here. Eac ...
boost::regex模块实现以编程方式生成代码片段，以便剪切并粘贴到正则表达式源中测试程序
boost::regex模块实现以编程方式生成代码片段,以便剪切并粘贴到正则表达式源中测试程序实现功能 C++实现代码实现功能 boost::regex模块实现以编程方式生成代码片段,以便剪切并粘 ...
vscode 自定义全局代码片段
vscode 自定义全局代码片段一.创建新的自定义用户代码片段文件 - 首选项 - 用户片段选择新代码片段命名文件二.写自定义代码片段JS {// Place your 全局 snippet ...
设置VSCode快捷键vue生成代码片段
Ctrl+Shift+P 复制下面的代码片段 {"vue-template": {"prefix": "vue-强哥的模板", //这个是模 ...
vscode 设置用户代码片段（怎么用命令式快速生成一段代码）
1 依次点击设置-用户代码片段如图 2 点击新建全局代码片段文件如图 3 输入文件名称(自己命名) 回车进入该文件如图 4 输入一下代码[cv即可]后保存即可其中配置项 "prefi ...
vscode 添加用户代码片段（快速生成 vue 模板）
文件–>首选项–>用户代码片段–>点击新建代码片段–取名 vue.json 确定 {"生成 vue 模板": {"prefix": " ...
那些html编辑器有代码片段6,VS Code 折腾记 - (6) 基本配置/快捷键定义/代码片段的录入（snippet）...
前言本来分成三篇来写的,但是想了想没必要,大家都是聪明人...简单的东西点一下就晓得了. 基本配置快捷键自定义(Ctrl+K Ctrl + S) 那个when支持条件表达式返回一个布尔值支持的快 ...
vscode --- 快捷键格式化代码时,分号消失
问题复现最近在vscode中,格式化代码(快捷键 alt + shift + F)时,分号会莫名奇妙的消失对于习惯打分号的我来说,看起来很别扭- 解决方案. 我使用的是prettier这个插件来设 ...
一个vscode vue3用户代码片段
一个vscode中的vue3模板代码片段. 供新手参考. {"vue3": {"prefix": "vue3-ts","body& ...

Vscode 快捷键生成代码片段

Vscode 快捷键生成代码片段

1. 网站工具

2. 自动生成日期及自动定位光标

3. 码片段配置步骤

4. 我的代码片段

Vscode 快捷键生成代码片段相关推荐

最新文章

热门文章