观感度:🌟🌟🌟🌟🌟
口味:可口可乐
烹饪时间:15min
工欲善其事,必先利其器 --《论语·卫灵公》
所有快捷键均经过亲自测试!!!
以下的快捷键可以帮助你节约大量时间,我们的口号是:不加班!!!
强烈建议先收藏后阅读!!!
并一定要实际应用起来,可以帮助你节约很多时间,时间=金钱,掌握他们可以让你敲代码喝快乐水的时候能够更加快乐!!!
常用快捷键
command + b 跳到变量声明处
// 跳跳蛙 找爸爸
command + r 当前页替换
command + shift + r 全局替换
// 很巴适的功能
command + d 行复制
// 复制当前行到下一行
command + / 当前行注释
command + shift + / 块注释
// 注释没什么好说的
command + shift + +/- 展开/折叠 当前选中的代码块
// 当你写了很长很长的代码时,你可以使用它快速展开折叠,而节约上下翻页的时间
command + option + L 格式化代码
// 立正 稍息
command + shift + up/down 上下移动当前行代码
// 没什么好说的
command + F 当前页查找
command + shift + F 全局搜索内容
// 查找还是很常用
command + shift + o 搜索文件
// 搜索
command + 1 快速打开或隐藏工程面板
// 也就是打开隐藏侧边栏
command + x 删除当前行
// 删除后可以粘贴,就是保留了当前行
command + 后退格 删除当前鼠标所在行
// 删除当前行 不可以粘贴
command + e 打开最近打开的文件或者项目(支持文件名搜索)
// 近期浏览文件历史
command + shift + v 选择粘贴剪切板上的内容(具有剪切板记忆功能)
// 粘贴剪切板历史
command + c 复制
command + v 粘贴
// 没啥说的 但这俩元老级别得压轴出场
command + shift + u 大小写转换
// 大小写转换
command + w 关闭当前文件选项卡
// 关闭当前页签
option + 鼠标单击 光标在多处定位
// 用于统一编辑或修改
option + enter 自动修正 激活小灯泡
// eslint开启时可以快速点亮小灯泡,来修正代码。不用你滑鼠标或者触控板来回找
shift + 回车 软回车
//无论光标处于前一行的什么位置,都能定位到下一行
代码标签输入完成后,按Tab,生成代码。
// 没啥说的 基本操作
ok,总结完了基本的快捷键操作,是不是觉得很巴适,有很多在以后的编程中你会逐渐体会到并觉得十分好用,十分节约时间。
快速输入标签方法
接下来分享一些快速输入标签的方法,首先介绍几个符号的含义
>
:下一个子标签,用于父子标签的连接
*
:多少个子标签,后面跟子标签的个数
$
:标签的名称序号,可以理解为for循环中的i
{}
:标签的内容,标签中的文字等需要在{}表示
看不懂没关系,一大堆🌰正在抵达战场,请跟随我一起敲出它们。
1.输入h1
,加tab
键
结果:<h1></h1>
2.输入div#abc
,加tab
键
结果:<div id="abc"></div>
3.输入div.abc
,加tab
键
结果:<div class="abc"></div>
4.输入a[href=#]
加tab
键
结果:<a href="#"></a>
5.输入div>p*6
,加tab
键
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
6.输入 ul>li*5>a[href=#]{我是第$个}
,加tab
键
<ul>
<li><a href="#">我是第1个</a></li>
<li><a href="#">我是第2个</a></li>
<li><a href="#">我是第3个</a></li>
<li><a href="#">我是第4个</a></li>
<li><a href="#">我是第5个</a></li>
</ul>
7.输入 img[src='images/$.jpg']*3
,加tab
键
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
8.输入 li*3>div.img>img[src='images/$.jpg']
,加tab
键
<li>
<div class="img"><img src="images/1.jpg" alt=""></div>
</li>
<li>
<div class="img"><img src="images/2.jpg" alt=""></div>
</li>
<li>
<div class="img"><img src="images/3.jpg" alt=""></div>
</li>
9.快速生成for
循环代码块
<script>
/* for循环:输入itar,再点击tab键*/
for (var i = 0; i < array.length; i++) {
var obj = array[i];
}
</script>
10.输入div#tab1+div#tab2
,加tab
键
+ : 表示并列的标签
<div id="tab1"></div>
<div id="tab2"></div>
11.引入link
,script
标签
<!--引入link,输入link,加tab键-->
<link rel="stylesheet" href="">
<!--引入css 输入link:css,加tab键 -->
<link rel="stylesheet" href="css/mycss.css">
<!--引入js 输入script:src,加tab键-->
<script src=""></script>
<!--html中插入js 输入script,加tab键-->
<script></script>
12.快速输入ul
、li
<!--ul及1个li 输入ul+,加tab键 -->
<ul>
<li></li>
</ul>
<!--ul及3个li 输入ul>li*3,加tab键 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--输入ul>li.item$*6,加tab键-->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>
13.快速输入多个标签
<!--输入a:link,加tab键 -->
<a href="http://"></a>
<!--1个P标签:输入p,加tab键-->
<p></p>
<!--两个P标签:输入p+p,加tab键-->
<p></p>
<p></p>
<!--三个P标签:输入p*3,加tab键-->
<p></p>
<p></p>
<p></p>
14.快速输入带类名的标签
<!--输入div.one.two,加tab键-->
<div class="one two"></div>
<!--输入form:get,加tab键-->
<form action="" method="get"></form>
<!--输入form:post,加tab键-->
<form action="" method="post"></form>
<!--输入input:button,加tab键-->
<input type="button" value="">
希望本文可以帮助大家节约时间,高效率的完成工作和任务,做一个快乐的程序员。