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

jinchanchan

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

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

vscode自定义代码片段

位置
•step1

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

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

•step2

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

详细教程

1. 基本属性

○ prefix：触发对应代码片段的关键字

○body：对应代码片段内容

○ description：代码片段的描述

片段

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

复制代码

2. 占位符

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

注意：

(1)$0 永远是最后面，$1,$2...结束后tab会在$0。

(2)${1:defalut}中可以设置默认值

片段

1. "let": {
   
2.         "prefix": "let",
   
3.         "body": [
   
4.                 "let ${2:key} = ${3:value};"
   
5.         ],
   
6.         "description": "let声明变量"
   
7. },

复制代码

3.常用内置变量

•🌟$CLIPBOARD: 当前剪贴板中的内容
•$TM_FILENAME: 当前文件的文件名
•$TM_FILENAME_BASE: 当前文件的文件名(不含扩展名)
•$TM_DIRECTORY: 当前文件所在的目录
•$TM_FILEPATH: 当前文件的完整文件路径
•$CURRENT_YEAR：本年度
•$CURRENT_HOUR: 24小时制格式的当前时间

片段

1. "paste to log": {
   
2.         "prefix": "logg",
   
3.         "body": [
   
4.                 "console.log('$CLIPBOARD$1', $CLIPBOARD$1);"
   
5.         ],
   
6.         "description": "打印出剪切板内容"
   
7. },

复制代码

总结

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

优秀代码片段例子

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

1. {
   
2.         "Print to log": {
   
3.                 "prefix": "logs",
   
4.                 "body": [
   
5.                         "console.log('$1', $1);"
   
6.                 ],
   
7.                 "description": "控制台打印变量"
   
8.         },
   
9.         "Print to clone": {
   
10.                 "prefix": "JSONP",
    
11.                 "body": [
    
12.                         "JSON.parse(JSON.stringify($1));"
    
13.                 ],
    
14.                 "description": "深拷贝对象"
    
15.         },
    
16.         "Print to clone log": {
    
17.                 "prefix": "logp",
    
18.                 "body": [
    
19.                         "console.log('$1', JSON.parse(JSON.stringify($1)));"
    
20.                 ],
    
21.                 "description": "控制台打印出深拷贝对象"
    
22.         },
    
23.         "nextTick": {
    
24.                 "prefix": "next",
    
25.                 "body": [
    
26.                         "this.$nextTick(() => {\n\t$1\n});"
    
27.                 ],
    
28.                 "description": "Vue中的this.$nextTick"
    
29.         },
    
30.         "import": {
    
31.                 "prefix": "import",
    
32.                 "body": [
    
33.                         "import {$2} from '$1';"
    
34.                 ],
    
35.                 "description": "导入资源"
    
36.         },
    
37.         "let": {
    
38.                 "prefix": "let",
    
39.                 "body": [
    
40.                         "let ${2:key} = ${3:value};"
    
41.                 ],
    
42.                 "description": "let声明变量"
    
43.         },
    
44.         "const": {
    
45.                 "prefix": "const",
    
46.                 "body": [
    
47.                         "const ${2:key} = ${3:value};"
    
48.                 ],
    
49.                 "description": "const声明变量"
    
50.         },
    
51.         "Variable Declaration": {
    
52.                 "prefix": "vard",
    
53.                 "body": [
    
54.                         "${1|const,let,var|} ${2:变量名} = ${3:值};"
    
55.                 ],
    
56.                 "description": "声明变量,可选择const/let/var"
    
57.         },
    
58.         "paste to log": {
    
59.                 "prefix": "logg",
    
60.                 "body": [
    
61.                         "console.log('$CLIPBOARD$1', $CLIPBOARD$1);"
    
62.                 ],
    
63.                 "description": "打印出剪切板内容"
    
64.         },
    
65. }

复制代码

各位摸鱼大佬们，还有其他私藏的减少重复编码小技巧吗？欢迎在评论区分享你的经验！一起提升开发效率，享受更多的“摸鱼”时光！🐟✨