在高效摸鱼的同时,我一直在思考:有没有办法用几个简单的单词缩写,就能快速输出想要的代码呢? 答案是肯定的!接下来,我将向大家介绍前端程序员必备的摸鱼小技巧: vscode自定义代码片段 ● 位置 step1 ○按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P),输入 "snippets" ○(或者)点击vscode左下角齿轮,找到代码片段 step2 ○下面我们选择编程语言。我一般选择全局代码片段文件,就可以在任意的文件中实现 ● 详细教程 1. 基本属性 ○ prefix:触发对应代码片段的关键字 ○ body:对应代码片段内容 ○ description:代码片段的描述 片段 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}中 片段 "let": { "prefix": "let", "body": [ "let ${2:key} = ${3:value};" ], "description": "let声明变量"可以设置默认值。 3.常用内置变量 ● 🌟$CLIPBOARD: 当前剪贴板中的内容 ● $TM_FILENAME: 当前文件的文件名 ● $TM_FILENAME_BASE: 当前文件的文件名(不含扩展名) ● $TM_DIRECTORY: 当前文件所在的目录 ● $TM_FILEPATH: 当前文件的完整文件路径 ● $CURRENT_YEAR:本年度 ● $CURRENT_HOUR: 24小时制格式的当前时间 片段 "paste to log": { "prefix": "logg", "body": [ "console.log('$CLIPBOARD$1', $CLIPBOARD$1);" ], "description": "打印出剪切板内容" 总结 恭喜你又学会了一个摸鱼小技巧,快去应用到你的项目中去吧! 优秀代码片段例子 下面是我自己写的一些非常好用的代码片段,大家可以直接复制到 VSCode 中使用。希望能帮到你们!大佬们也可以发挥自己的想象力,创造出更牛的片段,一起提升编码效率!🚀 { "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": "打印出剪切板内容" }, } 各位摸鱼大佬们,还有其他私藏的减少重复编码小技巧吗?欢迎在评论区分享你的经验!一起提升开发效率,享受更多的“摸鱼”时光!🐟✨ 顺便吆喝一句,民族企业大厂,前后端测试捞人,感兴趣的来!
|