vscode配置代码片段超级简单提升工作效率

前言

vue2和vue3文件模板重复性极高,特别是后台管理性质的系统。
每次都自己去打开之前的页面再去copy paste,效率极其低下。
为了提升工作效率,我们需要编写常用的代码片段。

定义常用的代码片段

<template>
 
<div>div>
  
template>
 
<script lang="ts">
import { defineComponent ,reactive,ref} from "vue";
export default defineComponent({
    name:'App'
 
})
script>
 
<style>
 
style>

先对上面的代码进行转码:转码地址:snippet generator

vscode配置代码片段超级简单提升工作效率_第1张图片
复制代码后在vscode中配置

配置转码后的代码片段

ctrl + shift + p 键入代码片段
vscode配置代码片段超级简单提升工作效率_第2张图片
vscode配置代码片段超级简单提升工作效率_第3张图片
点击全局配置进入粘贴转译过的代码
vscode配置代码片段超级简单提升工作效率_第4张图片

检测自定义代码段是否成功

vscode配置代码片段超级简单提升工作效率_第5张图片
回车后页面内容就是我们自定义的模板啦~

参考

  • VSCode 代码片段

你可能感兴趣的:(#,编辑器,vscode,vue.js,前端,效率,代码片段)