使用 vs code snippets 插件,提高开发效率✨✨

背景

平时在开发过程中,我们会大量使用到类似于:

javascript 复制代码
import TestComponent from '@/components'

or

import { formatTime } from '@/utils'

or

const fn = (name) => {
  console.log(name)
}

如何使用插件,提高这类重复的语法的编写呢?

使用 JavaScript (ES6) code snippets

安装 JavaScript (ES6) code snippets

场景1:import TestComponent from '@/components'

重点:

  1. 输入 imp
  2. 输入引入的模块名,如@/components/Test
  3. 按下 tab 键
  4. 输入 import 后的变量名,如 TestComponent

gif(左下角有我的按键显示):

场景2:import { formatTime } from '@/utils'

重点:

  1. 解构,类似于场景1
  2. 与场景1相同的操作不再赘述,通过tab输入解构出来的变量
  3. 额外的好处:先写 @/utils,再写 {} 里的变量,可以获得智能提示,如:

gif(左下角有我的按键显示):

场景3:定义函数

重点:

  1. 先输入函数名
  2. 按tab
  3. 输入参数
  4. 按tab
  5. 输入函数体

gif(左下角有我的按键显示):

总结

希望通过这篇文章,提高大家编写这些重复代码的效率,早点下班~~

相关推荐
wsad05321 分钟前
Vue.js 整合传统 HTML 项目:注册页面实战教程
前端·vue.js·html
XXYBMOOO3 分钟前
Flarum 主题定制:从零打造你的赛博朋克/JOJO 风格社区(含全套 CSS 源码)
前端·css
xlp666hub5 分钟前
进来看看你对进程虚拟内存的了解有多深?
linux·面试
Trouvaille ~12 分钟前
【递归、搜索与回溯】专题(八):记忆化搜索——从暴力递归到动态规划的桥梁
c++·算法·leetcode·青少年编程·面试·蓝桥杯·动态规划
升鲜宝供应链及收银系统源代码服务12 分钟前
升鲜宝生鲜配送供应链管理系统生产加工子模块的详细表设计说明
java·大数据·前端·数据库·bootstrap·供应链系统·生鲜配送
行者-全栈开发14 分钟前
43 篇系统实战:uni-app 从入门到架构师成长之路
前端·typescript·uni-app·vue3·最佳实践·企业级架构
泉城老铁15 分钟前
一分钟搞定SpringBoot+Vue3 整合 SSE 实现实时消息推送
前端·vue.js·后端
踩着两条虫17 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(五):核心概念之项目结构与文件组织
前端·vue.js·ai编程
HelloReader18 分钟前
Flutter 隐式动画两行代码让方块丝滑变色(七)
前端
木斯佳19 分钟前
前端八股文面经大全:X transfer前端一面(2026-03-10)·面经深度解析
前端·状态模式