webstorm实用技巧
设置自动刷新
这个非常重要,每次手动刷新是非常麻烦的,默认情况下是开启html和css自动属性的,但js是没有的。可以在下面这个界面设置。
快速插入多行内容到li标签
比如有下面的5行内容,每行内容都是不一样的。例如百度的新闻列表就是这样。
现在我想把这些内容快速插入到下面的li标签里面的a标签里面。
1.aaa
2.bbbbbb
3.ccccc
4.ddddddd
5.eeee
<ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li>
</ul>
这个可以通过webstorm的行选择模式实现。
实现方法:
第一步:
alt+shift+insert或者鼠标右键选择Column Selection Mode。
一定要先开启这个功能。
第二步:
选中要插入的文本内容。一定要在行选择模式下选中,普通模式会出问题。
第三步:
到a标签中间的位置选中多行,ctrl+v就可以快速的把内容插入到a标签里面了。
最后就可以实现下面的效果。
<ul> <li><a>1.aaa</a></li><li><a>2.bbbb</a></li><li><a>3.cccc</a></li><li><a>4.dddd</a></li><li><a>5.eee</a></li>
</ul>
使用行选择模式插入多行
接着上面,实现上面功能的时候,可能忘记加href属性了,这时候还是可以使用行选择功能快速插入多行。
<ul> <li><a href="#">1.aaaaa</a></li> <li><a href="#">2.bbb </a></li> <li><a href="#">3.ccc </a></li> <li><a href="#">4.dddd </a></li> <li><a href="#">5.eee </a></li>
</ul>
第一步:
alt+shift+insert或者鼠标右键选择Column Selection Mode。
一定要先开启这个功能。
第二步:
选择多行,输入要插入的文本内容。
快速创建元素
1.快速创建父子元素
.div1>div2>div3,然后按tab键可以快速生成下面的代码。
<div class="div1"><div class="div2"><div class="div3"></div></div>
</div>
2.快速创建多个平级元素
.div1+.div2+.div3,然后按tab可以快速生成下面的代码。
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
3.开始创建n个平级元素
.div$*5,然后按tab.
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
翻译插件
有时候你不知道一个变量的英文是什么,打开浏览器又太慢,可以使用翻译插件快速翻译。
下用的人最多的这个,这个会在webstorm右上角添加一个小图标,点击快速翻译。
主要用来输入翻译,当然这个插件也是可以划词翻译的。
而且可以翻译文档,这个很强。
webstorm实用技巧相关推荐
- 深度学习11个实用技巧
深度学习11个实用技巧 深度学习工程师George Seif发表了一篇博文,总结了7个深度学习的技巧,本文增加了几个技巧,总结了11个深度学习的技巧,主要从提高深度学习模型的准确性和速度两个角度来分析 ...
- 【老鸟分享】Linux命令行终端提示符多种实用技巧!
1.Linux命令行提示符简介 众所周知,Linux命令行是系统管理员管理Linux的重要手段,我们管理Linux,首先要面对的就是Linux命令行提示符. Linux命令行结尾的提示符有" ...
- 经典 | 深度学习的7大实用技巧
编译 | AI科技大本营 参与 | 林椿眄 编辑 | 谷 磊 对于许多具有挑战性的现实问题,深度学习已经成为最有效的解决方法. 例如,对于目标检测,语音识别和语言翻译等问题,深度学习能够表现出最佳的性 ...
- 深度学习七个实用技巧
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 深度学习已经成为解决许多具有挑战性的现实世界问题的方法.对目标检测 ...
- Python大神用的贼溜,9个实用技巧分享给你
来源:数据分析1480 本文约3000字,建议阅读6分钟 本文为你介绍一些关于python的实用技巧. 本文会试着介绍一些其它文章没有提到的小技巧,这些小技巧也是我平时会用到的的.让我们一探究竟吧! ...
- 5 个针对有经验用户的 Vim 实用技巧
Vim 编辑器提供了很多的特性,要想全部掌握它们很困难.然而,花费更多的时间在命令行编辑器上总是有帮助的.毫无疑问,和 Vim 用户们进行交流能够让你更快地学习新颖有创造性的东西. 注: 本文中用到的 ...
- ES6的几个实用技巧,你了解吗?
本文给大家分享了es6的几个实用技巧,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧 Hack #1 交换元素 利用 数组解构来实现值的互换 let a = 'world', b = 'hello ...
- 在此处打开命令窗口_这样操作方便多了!简单DOS命令实用技巧详解
分享简单DOS命令实用技巧,让我们的工作.生活更加方便快捷.小编致力于分享分享智能数码.弱电组网.电脑软硬件资讯及实用技巧. 先跟着小编一起来了解一下DOS命令是一个什么样子的存在?技术大牛,请忽略, ...
- Windows2003实用技巧
Windows2003实用技巧七则 一.跳过磁盘检修等待时间 一旦计算机因意外原因,例如突然停电或者死机的话,那么计算机下次重新启动的话,系统就会花10秒钟左右的时间,来运行磁盘扫描程序,检查磁盘是否 ...
最新文章
- wxpython分割窗口_wxPython实现分隔窗口
- 施工企业项目管理的系统修炼_施工企业项目亏损的11个主观因素
- 数据库系统概论:第三章 关系数据库标准语言SQL
- C程序背后的故事--头文件、库文件的查找
- gradle 构建过程
- Vue安装依赖npm install时报错问题解决方法
- defender 报备_微软Defender获AV-TEST杀软评测最高分
- Hystrix dashbord 服务降级熔断限流监控介绍
- 如何提高Android代码的安全性
- 中文编程专栏目录, 初衷和希冀
- itextpdf实现多PDF文件合并为一个PDF文档
- 3d打印路径规划 matlab,基于FDM技术的3D打印路径规划技术研究
- 2021虫虫百度域名URL批量采集工具【自动去重】
- ZLMediaKit视频推流和播放步骤
- (附源码)计算机毕业设计SSM流浪动物管理系统
- ubuntu20.04显卡1080ti安装cuda和cudnn
- CMD无限弹出窗口命令
- A Two-stage Unsupervised Approach for Low light Image Enhancement(一种两阶段无监督的微光图像增强方法)
- 服务器系统导致无盘客户机usb失灵,无盘客户机无法启动/故障排查过程
- 北京大学MEM提前面试历年真题-文都管联院