背景
平时在开发过程中,我们会大量使用到类似于:
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'
重点:
- 输入
imp
- 输入引入的模块名,如
@/components/Test
- 按下 tab 键
- 输入
import
后的变量名,如TestComponent
gif(左下角有我的按键显示):

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

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

场景3:定义函数
重点:
- 先输入函数名
- 按tab
- 输入参数
- 按tab
- 输入函数体
gif(左下角有我的按键显示):

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