论坛 › 工作生活 › 前端摸🐟小子，教你减少无意义的编码

jinchamchanwaji 发表于 2025-1-7 13:54:17

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

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

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

# vscode自定义代码片段
## 位置
● step1

○按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)，输入 "snippets"

○（或者）点击vscode左下角齿轮，找到代码片段


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



## 详细教程
### 1. 基本属性
   ○ prefix：触发对应代码片段的关键字
   ○ body：对应代码片段内容
   ○ description：代码片段的描述

#### 片段
```java
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}中可以设置默认值
#### 片段
```java
"let": {
      "prefix": "let",
      "body": [
                "let ${2:key} = ${3:value};"
      ],
      "description": "let声明变量"
},
```
#### 演示
按tab切换光标
!(data/attachment/forum/202501/07/135323yvukqquuubgtwbop.png)
!(data/attachment/forum/202501/07/135332gs02zkw6immkekmk.png)
### 3.常用内置变量
● 🌟$CLIPBOARD: 当前剪贴板中的内容
● $TM_FILENAME: 当前文件的文件名
● $TM_FILENAME_BASE: 当前文件的文件名(不含扩展名)
● $TM_DIRECTORY: 当前文件所在的目录
● $TM_FILEPATH: 当前文件的完整文件路径
● $CURRENT_YEAR：本年度
● $CURRENT_HOUR: 24小时制格式的当前时间

#### 片段
```java
"paste to log": {
      "prefix": "logg",
      "body": [
                "console.log('$CLIPBOARD$1', $CLIPBOARD$1);"
      ],
      "description": "打印出剪切板内容"
},
```

#### 演示
   我提前复制了height，选择logg后会自动读取剪切板



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


## 优秀代码片段例子
      下面是我自己写的一些非常好用的代码片段，大家可以直接复制到 VSCode 中使用。希望能帮到你们！大佬们也可以发挥自己的想象力，创造出更牛的片段，一起提升编码效率！🚀

```java
{
    "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": "打印出剪切板内容"
    },
}
```
各位摸鱼大佬们，还有其他私藏的减少重复编码小技巧吗？欢迎在评论区分享你的经验！一起提升开发效率，享受更多的“摸鱼”时光！🐟✨

<顺便吆喝一句，民族企业大厂，[前后端测试](https://jsj.top/f/o38ijj)捞人，感兴趣的来！>

王一之 发表于 2025-1-7 14:43:32

没绷住，不如用用AI辅助工具吧，copilot

爬格子PA 发表于 2025-1-8 13:07:30

谢谢，作者分享的非常有用！感谢

jinchamchanwaji 发表于 2025-1-9 11:52:59

王一之 发表于 2025-1-7 14:43
没绷住，不如用用AI辅助工具吧，copilot

也可以~总之目的是提升效率，摸鱼摸鱼摸鱼！

jinchamchanwaji 发表于 2025-1-9 11:53:50

爬格子PA 发表于 2025-1-8 13:07
谢谢，作者分享的非常有用！感谢

感谢喜欢！多来看，之后还是会继续分享的呀~

jinchamchanwaji 发表于 5 天前

点点dian 发表于 2025-1-10 15:02
感谢作者 期待你的下次分享

感谢喜欢！一定要多来呀！

查看完整版本: 前端摸🐟小子，教你减少无意义的编码