WebStorm之常用快捷键【实例演示】

简介: WebStorm之常用快捷键

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

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

(mac下为command+/,下同)


2 自动补全html标签

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


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

<h1></h1>


(2)想输入带id的,如

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

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


(3)想输入带class的,如

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

只需要输入**: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>


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

a[href=#]


tab后:

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


再如:

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


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>


更多代码简写补全的技巧可以参考:

blog.wpjam.com/m/emmet-gra…

www.w3cplus.com/tools/emmet…

www.ruanyifeng.com/blog/2013/0…


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

选中要整理的代码

windows:

CTRL+ALT+L


Mac:

command+option+L


4 寻找代码片段

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


5 寻找代码定义位置

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


6 大小写转化

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

Command(ctrl)+shift+U


7 全局查找

双击 shift


8 查找最近打开的文件

ctrl+E

\


原文链接:blog.csdn.net/haoshidai/a…



目录
相关文章
Visual Studio Code开发常用的工具栏选项,查看源码技巧以及【vscode常用的快捷键】
Visual Studio Code开发常用的工具栏选项,查看源码技巧以及【vscode常用的快捷键】
609 0
|
4月前
|
缓存 API 开发工具
有关Unity使用Rider编辑器无法弹出代码提示的有效解决方法
【11月更文挑战第13天】在 Unity 中使用 Rider 编辑器时,若遇到代码提示无法弹出的问题,可以通过检查 Rider 设置(如自动补全选项、Unity 插件安装、索引设置)、Unity 项目设置(如解决方案正确关联、脚本导入设置)以及环境和依赖关系(如 .NET SDK 版本兼容性、Unity 和 Rider 版本兼容性)等方面进行排查和解决。
539 5
|
7月前
|
前端开发 JavaScript IDE
WebStorm 打开多个项目的方法
【8月更文挑战第2天】
205 0
|
8月前
|
语音技术 Python
语音识别,Pycharm的基础使用,Pycharm如何修改主题,如何配置字体,increase,decre,pycharm如何切换成中文版的,翻译插件的安装,Pycharm常用快捷键,
语音识别,Pycharm的基础使用,Pycharm如何修改主题,如何配置字体,increase,decre,pycharm如何切换成中文版的,翻译插件的安装,Pycharm常用快捷键,
|
10月前
|
Java Python
pycharm-ieda-phpstorm超级好用插件,一键解释代码
pycharm-ieda-phpstorm超级好用插件,一键解释代码
|
10月前
|
JSON 数据格式
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
|
10月前
|
SQL
IDEA常用快捷键展示说明
IDEA常用快捷键展示说明
|
Web App开发 人工智能 JSON
VScode 插件 & 常用快捷键整理(含Chrome插件)
VScode 插件 & 常用快捷键整理(含Chrome插件)
308 0
|
API Python
【更新中】PyCharm常用快捷键和对应功能
【更新中】PyCharm常用快捷键和对应功能
698 0
【更新中】PyCharm常用快捷键和对应功能