在高效摸鱼的同时，我一直在思考：有没有办法用几个简单的单词缩写，就能快速输出想要的代码呢？答案是肯定的！接下来，我将向大家介绍前端程序员必备的两大摸鱼小技巧：

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/764e051305654e0881b5a9dd754d1aee~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv6YeR54aK:q75.awebp?rk3s=f64ab15b&x-expires=1757906194&x-signature=qhUoB6c16gzyIVMwCm1PQm6Lx8c%3D)

## 一、 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.常用内置变量 * 🌟`$CLIPBOARD`: 当前剪贴板中的内容 * `$TM_FILENAME`: 当前文件的文件名 * `$TM_FILENAME_BASE`: 当前文件的文件名(不含扩展名) * `$TM_DIRECTORY`: 当前文件所在的目录 * `$TM_FILEPATH`: 当前文件的完整文件路径 * `$CURRENT_YEAR`：本年度 * `$CURRENT_HOUR`: 24小时制格式的当前时间 ##### 片段 ```json "paste to log": { "prefix": "logg", "body": [ "console.log('$CLIPBOARD$1', $CLIPBOARD$1);" ], "description": "打印出剪切板内容" }, ``` ##### 演示我提前复制了height，选择logg后会自动读取剪切板

#### 总结恭喜你又学会了一个摸鱼小技巧，快去应用到你的项目中去吧

### 优秀代码片段例子下面是我自己写的一些非常好用的代码片段，大家可以直接复制到 VSCode 中使用。希望能帮到你们！大佬们也可以发挥自己的想象力，创造出更牛的片段，一起提升编码效率！🚀 ```json { "Print to log": { "prefix": "logs", "body": [ "console.log('$1', $1);" ], "description": "控制台打印变量" }, "Print to clone": { "prefix": "JSONP", "body": [ "JSON.parse(JSON.stringify($1));" ], "description": "深拷贝对象" }, "Print to clone log": { "prefix": "logp", "body": [ "console.log('$1', JSON.parse(JSON.stringify($1)));" ], "description": "控制台打印出深拷贝对象" }, "nextTick": { "prefix": "next", "body": [ "this.$nextTick(() => {\n\t$1\n});" ], "description": "Vue中的this.$nextTick" }, "import": { "prefix": "import", "body": [ "import {$2} from '$1';" ], "description": "导入资源" }, "let": { "prefix": "let", "body": [ "let ${2:key} = ${3:value};" ], "description": "let声明变量" }, "const": { "prefix": "const", "body": [ "const ${2:key} = ${3:value};" ], "description": "const声明变量" }, "Variable Declaration": { "prefix": "vard", "body": [ "${1|const,let,var|} ${2:变量名} = ${3:值};" ], "description": "声明变量,可选择const/let/var" }, "paste to log": { "prefix": "logg", "body": [ "console.log('$CLIPBOARD$1', $CLIPBOARD$1);" ], "description": "打印出剪切板内容" }, } ```

## 二、Emmet教程 ### 前言 Emmet是VSCode默认支持的功能，无需任何配置，可直接使用接下来将为你揭示如何利用 Emmet 在 VSCode 中优雅地编写前端代码，提高开发效率，节省宝贵生命。和自定义代码片段会有一点点像，但 Emmet 的语法将为你带来不同的体验！ ### HTML标签嵌套： #### 1. 父子关系：> ```html // div>p>span

```

emmet》.gif

#### 2. 兄弟关系：+ ```html // div+p+span

```

emmet+.gif

#### 3. 乘法：\* ```html // ul>li*3

```

emmet乘.gif

#### 4. 组合使用：() ```html // table>(tr>(td*3))*2

```

emmet组合.gif

#### 5. id,class,属性: ```html // p#title

// .title

// div可以不用写 // td[rowspan=2 colspan=3 title] ``` #### 6. 文本内容：{} ```html // div{我是div}

我是div

```

emmet文本.gif

#### 7.自增符号：\$ 1. 常搭配乘法\*使用：$ （$\*4 =1 2 3 4自增） ```html // li.item$*4

// div{$}*4

```

emmet自增.gif

2. 占位符 $$ ```html // （$$*4 = 01 02 03 04自增） // li.item$$$*4

// div{$$$$}*4

0001

0002

0003

0004

```

emmet占位.gif

3. 指定开始数字：$@num*n （num=开始数字，n=重复次数） ```html // div{$@6}*3

```

emmet指定开始.gif

4. 倒序：$@- ```html // div{$@-}*3

// div{$@-6}*3

```

emmet倒序.gif

### css缩写 ```css margin: 10px; margin: 10%; margin: 10px 20px 20px 20px; margin-left: 10px; // 以此类推...... ``` ### 了解更多以上是一些常用的 Emmet 语法，如果你对 Emmet 中其他部分语法感兴趣，可以查阅[Emmet的官方文档](https://docs.emmet.io/cheat-sheet/) 各位摸鱼大佬们，还有其他私藏的减少重复编码小技巧吗？欢迎在评论区分享你的经验！一起提升开发效率，享受更多的“摸鱼”时光！🐟✨