使用 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(左下角有我的按键显示):

总结

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

相关推荐
WYiQIU16 分钟前
突破字节前端2-1⾯试: JS异步编程问题应答范式及进阶(视频教学及完整源码笔记)
开发语言·前端·javascript·vue.js·笔记·面试·github
quikai198116 分钟前
python练习第四组
开发语言·前端·python
爱上妖精的尾巴19 分钟前
5-40 WPS JS宏 综合实例应用-5(求字符串中的最大值记录)
开发语言·前端·javascript·wps·js宏·jsa
曹卫平dudu23 分钟前
用Trea来快速生成一个浏览器插件
前端
dorisrv25 分钟前
React 状态管理:Zustand 快速上手指南
前端·react.js
byc33 分钟前
Android 存储目录<内部存储,外部存储app专属,外部存储公共>
android·面试
lkbhua莱克瓦2433 分钟前
IO流——打印流
java·开发语言·前端·学习方法
im_AMBER37 分钟前
Canvas架构手记 08 CSS Transform | CSS 显示模型 | React.memo
前端·css·笔记·学习·架构
申阳41 分钟前
Day 23:登录设计的本质:从XSS/CSRF到Session回归的技术演进
前端·后端·程序员
岛风风44 分钟前
前端HTML导出PDF分页难题:10天踩坑后的终极方案,精细到每个像素点!!!
前端·javascript