webstorm常用功能快捷方式

1 自动注释和撤销注释:ctrl+/

在一句代码前面用 ctrl+/ 可以自动注释和撤销注释,js,html都可以,很好的省去了敲注释符的时间  (mac下为command+/,下同)

2 自动补全html标签

我们知道在使用Linux命令的时候按tab键有自动补全的功能,在很多编译器里也是,在webstorm中当你想敲一些html元素时,比如:

(1)想敲一对h1标签,只需要敲h1,按tab键,变回自动补全为:

<h1></h1>
  • 1
  • 1

(2)想输入带id的,如

<div id="abc"></div>
  • 1
  • 1

只需要输入:div#abc,按Tab键,便会自动补全。

(3)想输入带class的,如

<div class="abc"></div>
  • 1
  • 1

只需要输入:div.abc,按Tab键,便会自动补全。

(4)想输入一个div里有6个p标签,只需要输入:  div>p*6 ,按Tab键,便会自动补全为:

<div>
        <p></p>

        <p></p>

        <p></p>

        <p></p>

        <p></p>

        <p></p>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

(5)特定属性的标签的补全:

a[href=#]
  • 1
  • 1

tab后:

<a href="#"></a>
  • 1
  • 1

再如:

ul.menu>li*6>a[href=#]{HTML}
  • 1
  • 1

tab后补全为:

<ul class="menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

更多代码简写补全的技巧可以参考:  http://blog.wpjam.com/m/emmet-grammar/ http://www.w3cplus.com/tools/emmet-cheat-sheet.html http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

3 自动整理代码格式进行对齐

选中要整理的代码

windows:

CTRL+ALT+L
  • 1
  • 1

Mac

command+option+L
  • 1
  • 1

4 寻找代码片段

有时候我们需要寻找一些特定的样式或函数,只需要右键要寻找的目录,选择 find in path,输入要寻找的内容,webstorm就会自动寻找所有包含该内容的文件了。

5 寻找代码定义位置

很多时候我们想查找某个函数或者变量定位的位置,按住command(ctrl)键,点击要查找的内容,webstorm就会自动跳转到它定义的地方了,这个方法能够很好的提高开发和阅读代码的效率。

6 大小写转化

有时候需要快速的把一段字母转成全大写或全小写,只需要使用:

Command(ctrl)+shift+U

7 全局查找

双击 shift

8 查找最近打开的文件

Ctrl + E

更多webstorm快捷功能参考:

webstorm那些好用的特性: 

http://blog.allenice233.com/2014/06/23/webstorm%E9%82%A3%E4%BA%9B%E5%A5%BD%E7%94%A8%E7%9A%84%E7%89%B9%E6%80%A7/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

Vue-框架模板的源代码注释

49011
来自专栏杨逸轩 ' sBlog

如何将Pjax整合进网站,实现全站无刷新加载?

5069
来自专栏Java帮帮-微信公众号-技术文章全总结

错误集锦1-HttpServlet was not found on the Java Build Path。

我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServle...

3157
来自专栏晓晨的专栏

Html页面雪花效果的实现

6384
来自专栏前端开发

超详细动手搭建一个Vuepress站点及开启PWA与自动部署

类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

7676
来自专栏守望轩

Visual Studio 2008 每日提示(八)

#071、给所有快速查询的结果标记上书签 原文链接:Did you know… You can bookmark all of your Quick Find...

2755
来自专栏Linux驱动

12.QT4.7.4-解决WIN平台和Linux平台中文乱码,QLineEdit右击菜单中文显示

2157
来自专栏james大数据架构

Android系统目录介绍

src目录:完成对java代码的编写 assets目录: 资源目录 res目录: 图片,布局文件和字符串,菜单等文件 bin目录:输出文件夹 如生成的apk安装...

20810
来自专栏超然的博客

URL中的#

作者:阮一峰   http://www.ruanyifeng.com/blog/2011/03/url_hash.html

961
来自专栏LeeCen

React Native环境搭建 之 nvm安装和使用

brew install watchman flow git gcc pkg-config cairo libpng jpeg gitlab-ci-multi-...

872

扫码关注云+社区