在高效摸鱼的同时,我一直在思考:有没有办法用几个简单的单词缩写,就能快速输出想要的代码呢?
答案是肯定的!接下来,我将向大家介绍前端程序员必备的两大摸鱼小技巧:
一、 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. 注意:
- $0 永远是最后面,$1,$2...结束后tab会在$0。
- ${1:defalut}中可以设置默认值
片段
"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小时制格式的当前时间
片段
"paste to log": {
"prefix": "logg",
"body": [
"console.log('$CLIPBOARD$1', $CLIPBOARD$1);"
],
"description": "打印出剪切板内容"
},
演示
我提前复制了height,选择logg后会自动读取剪切板
总结
恭喜你又学会了一个摸鱼小技巧,快去应用到你的项目中去吧
优秀代码片段例子
下面是我自己写的一些非常好用的代码片段,大家可以直接复制到 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": "打印出剪切板内容"
},
}
二、Emmet教程
前言
Emmet是VSCode默认支持的功能,无需任何配置,可直接使用
接下来将为你揭示如何利用 Emmet 在 VSCode 中优雅地编写前端代码,提高开发效率,节省宝贵生命。 和自定义代码片段会有一点点像,但 Emmet 的语法将为你带来不同的体验!
HTML标签嵌套:
1. 父子关系:>
// div>p>span
<div>
<p>
<span></span>
</p>
</div>
2. 兄弟关系:+
// div+p+span
<div></div>
<p></p>
<span></span>
3. 乘法:*
// ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
4. 组合使用:()
// table>(tr>(td*3))*2
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
5. id,class,属性:
// p#title
<p id="title"></p>
// .title
<div class="title"></div> // div可以不用写
// td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
6. 文本内容:{}
// div{我是div}
<div>我是div</div>
7.自增符号:$
- 常搭配乘法*使用:*4 =1 2 3 4自增)
// li.item$*4
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
// div{$}*4
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
2. 占位符 $$
// ($$*4 = 01 02 03 04自增)
// li.item$$$*4
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
// div{$$$$}*4
<div>0001</div>
<div>0002</div>
<div>0003</div>
<div>0004</div>
3. 指定开始数字:$@num*n (num=开始数字,n=重复次数)
// div{$@6}*3
<div>6</div>
<div>7</div>
<div>8</div>
4. 倒序:$@-
// div{$@-}*3
<div>3</div>
<div>2</div>
<div>1</div>
// div{$@-6}*3
<div>8</div>
<div>7</div>
<div>6</div>
css缩写
<!-- m10 -->
margin: 10px;
<!-- m10p -->
margin: 10%;
<!-- m10-20-20-20 -->
margin: 10px 20px 20px 20px;
<!-- ml10 -->
margin-left: 10px;
// 以此类推......
了解更多
以上是一些常用的 Emmet 语法,如果你对 Emmet 中其他部分语法感兴趣,可以查阅Emmet的官方文档
各位摸鱼大佬们,还有其他私藏的减少重复编码小技巧吗?欢迎在评论区分享你的经验!一起提升开发效率,享受更多的“摸鱼”时光!🐟✨