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

总结

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

相关推荐
IT_陈寒33 分钟前
Python性能提升50%:这5个隐藏技巧让你的代码快如闪电⚡
前端·人工智能·后端
yoke菜籽41 分钟前
面试150——区间
面试·职场和发展
懒人村杂货铺42 分钟前
微前端QianKun的使用以及坑点问题
前端
qq_3665775144 分钟前
Vue3创建项目,只能localhost访问问题处理
前端·javascript·vue.js
5***o5001 小时前
JavaScript云原生
开发语言·javascript·云原生
N***73851 小时前
JavaScript物联网案例
开发语言·javascript·物联网
一个处女座的程序猿O(∩_∩)O1 小时前
React Router 路由模式详解:HashRouter vs BrowserRouter
前端·react.js·前端框架
Java天梯之路1 小时前
上篇讲坑,这篇讲 “根”!Java 数据类型底层逻辑全解析
java·面试
Caster_Z1 小时前
WinServer安装NPM(Nginx Proxy Manager),并设置反向代理和开启https
前端·nginx·npm
顾安r2 小时前
11.22 脚本 手机termux项目分析(bash)
前端·python·stm32·flask·bash