前端摸小子，教你减少无意义的编码

 在高效摸鱼的同时，我一直在思考：有没有办法用几个简单的单词缩写，就能快速输出想要的代码呢？

    答案是肯定的！接下来，我将向大家介绍前端程序员必备的两大摸鱼小技巧：    

一、 vscode自定义代码片段

位置

• step1
  • 按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)，输入 "snippets"
  • （或者）点击vscode左下角齿轮，找到代码片段
  • 

• step2
  • 下面是我们选择编程语言。我一般选择全局代码片段文件，就可以在任意的文件中实现

详细教程

1. 基本属性

• prefix：触发对应代码片段的关键字
• body：对应代码片段内容
• description：代码片段的描述

片段

json

代码解读

复制代码

"Print to console": { "prefix": "logs", "body": [ "console.log('$1', $1);" ], "description": "控制台打印变量" },

演示

2. 占位符

       $1,$2,$3...等是占位符，可以确定光标的位置，首先会出现在 $1 的位置,按 Tab 键后会跳到 $2.    注意：

1. $0 永远是最后面，$1,$2...结束后tab会在$0。
2. ${1:defalut}中可以设置默认值

片段

json

代码解读

复制代码

"let": { "prefix": "let", "body": [ "let ${2:key} = ${3:value};" ], "description": "let声明变量" },

演示

    按tab切换光标

3.常用内置变量

• 标签：body,编码,片段,description,前端,prefix,div,代码,小子
  From： https://blog.csdn.net/m0_74223728/article/details/143185982