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

总结

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

相关推荐
dsyyyyy110116 分钟前
JS复习,难点,易错点总结
开发语言·javascript·ecmascript
默_笙22 分钟前
🏝 Docker 就是"房地产开发":从施工图纸到小区物业的容器化指南
前端·javascript
计算机魔术师24 分钟前
Rohan Paul 谈用时间跨度衡量智能体能力,并引用 OpenAI 自动化研究实习生里程碑
前端
kyriewen26 分钟前
我手写了个极简版 React Router——才搞懂 v6 为什么砍了这么多 API
前端·javascript·程序员
a11177632 分钟前
Shirone 二次元博客主题 开源
前端·开源
IT_陈寒44 分钟前
Python的切片赋值把我坑惨了,这不是bug是特性
前端·人工智能·后端
掘金酱1 小时前
【社区公告】致每一位掘友:关于这次调整, 想再说几句
前端·人工智能
CoderLiu1 小时前
程序化工具调用(PTC)与动态工作流引擎:深入大模型工具调用的架构演进与实践
前端·人工智能·后端
码农胖大海1 小时前
我的第一个产品,只有一段提示词
前端·ai编程·产品
邋遢道1 小时前
# 企业级 Agent 从 0 到 1(二):技术选型与最小骨架
前端·chrome