⌈磨刀不误砍柴工⌋ WebStorm常用的配置和快捷键大全

❝
⌈工欲善其事必先利其器⌋，能够合理有效的利用工具，可以很大程度地提升工作效率。笔者在WebStorm和VsCode来回切换敲代码，但还是觉得WebStorm更强大🌹，本文介绍一些日常使用WebStorm的设置和快捷键。欢迎补充，互惠你我。🌹
❞

「WebStorm」
版本: WebStorm 2017.2
操作系统：Mac OS

1.常用设置

1.1 设置Terminal字体

Preferences > Editsor > Colors & Fonts > Console Font

1.2 禁止实时自动保存

Preferences > Apearance & Behavior > System Settings
取消勾选 "Save files on frame deactivation"和"Save files automa tically if application is idle for"

1.3 文件未保存时显示星星(*)标记

Preferences > Editor > General > Editor Tabs
勾选 “Mark modified tabs with asterisk”

1.4 设置鼠标双击选中驼峰式命名的变量

Preferences > Editor > General
取消勾选 Honor "CameHumps" words settings when selecting on double click
Preferences > Editor > General > Smart Keys
勾选 Use "CameHumps" words

1.5 启用Eslint校验JS代码

❝
首先确保安装了Nodejs, 并且工程中配置了Eslint相关文件：.eslintrc、.eslinignore
❞

Preferences > Languages & Frameworks > Javascript > Code Quality Tools > Eslint
勾选Eable
输入Node和Eslint路径
选中Automatic search 并Apply
Editor > Inspections
取消勾选Javascript下的所有子选项
勾选Javascript > Code quality tools > 第一个Eslint
Apply

1.6 Code Style

Preferences > Code Style：分别设置各个类型文件的代码风格。

1.6.1 支持JSX语法

Preferences > Languages & Frameworks > Javascript
选择React JSX

2.快捷键

❝
Mac系统下，ctrl替换为command，alt和option为同一个键
❞

键	意
`ctrl + 1`	快速打开或隐藏工程面板，也就是打开隐藏侧边栏
`ctrl + a`	选择全部
`ctrl + c`	复制
`ctrl + d`	如果选择了文本那么就是向此行的末尾复制，如果没有选中文本那就是将此行向下复制
`ctrl + e`	弹出最近打开文件列表，可以快速选择最近曾经打开的文件。
`ctrl + f`	在所在的文件内查文本
`ctrl + j`	输出模板,自动代码【弹出快捷代码框。】
`ctrl + k`	调出git的commit界面，提交版本
`ctrl + m`	缩小本窗口
`ctrl + o`	选择替换方法
`ctrl + q`	退出WebStorm的所有窗口
`ctrl + r`	替换文本
`ctrl + v`	将粘贴板内容粘贴下来
`ctrl + x`	剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
`ctrl + z`	回退操作
`ctrl + /`	单行注释
`ctrl + '-/+'`	可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
`ctrl + ‘.’`	折叠选中的代码的代码。
`ctrl + delete（后退格）`	删除光标所在的行
`ctrl + left/right`	光标移到行首/行尾
`ctrl + shift + f`	全局查找文本
`ctrl + shift + o`	打开某个文件。
`ctrl + shift + v`	选择粘贴剪切板上的内容(具有剪切板记忆功能)
`ctrl + shift + r`	全局替换指定文本
`ctrl + shift + /`	块注释（/xxx/）
`ctrl + alt + l`	格式化代码
`ctrl + alt + o`	优化导入的类和包
`ctrl + alt + left/right`	返回至上次浏览的位置
`alt + up/down`	逐层扩大/缩小选中范围
`alt + 回车`	导入包,自动修正
`alt + shift + c`	对比最近修改的代码
`alt + shift + f`	将当前文件加入收藏夹
`shift + enter`	重新开始一行（无论光标在哪个位置）
`shift + F6`	重构-重命名
`ctrl + shift + '+/-'`	展开/收缩文件中所有的方法
tab	代码标签输入完成后，按Tab，生成代码。
ctrl + b	跳到变量申明处,快速打开光标处的类或方法
ctrl + g	跳转至指定行指定列（列可以不填）
ctrl + h	显示类结构图(如果没有则不会显示)
ctrl + l	Go To Line，跳转到某某行某某列
ctrl + n	查找类
ctrl + p	显示参数信息
ctrl + s	保存文档（webStrom会帮你自动保存，此快捷键在此编辑器作用不大）
ctrl + t	调出git更新项目的选项框，其中包括Merge(合并分支)，Rebase(变基)和其他选项
ctrl + w	关闭本标签页
ctrl + y	显示该文件的定义
ctrl + []	匹配 {}[]
ctrl + F12	可以显示当前文件的结构
ctrl + 空格	代码提示
ctrl + backspace	删除文字开始
ctrl + 鼠标左键	跳到变量声名(引入)处
ctrl + up/down	光标跳转到第一行或最后一行下
ctrl + shift + a	查找actions
ctrl + shift + i	显示当前CSS选择器或者JS函数的详细信息
ctrl + shift + k	调出git的push界面，推送版本
ctrl + shift + n	打开工程中的文件，目的是打开当前工程下任意目录的文件。
ctrl + shift + u	光标所在位置翻转大小写(大写转为小写，小写转为大写)
ctrl + shift + F7	高亮显示所有该文本，按Esc高亮消失
ctrl + shift + F12	切换最大化编辑器
ctrl + shift + space	自动补全代码
ctrl + shift + ]/[	选中块代码
ctrl + shift + up/down	上下移动句子
ctrl + alt + t	围绕包裹代码(包括zencoding的Wrap with Abbreviation)
ctrl + alt + v	此快捷键可以快速声明一个变量，例如在代码中输入一个字符串，并按下这个快捷键即可快速声明一个字符串变量。
ctrl + alt + space	类名或接口名提示
ctrl + alt + b	Go to implementation(s)跳转方法实现处
ctrl + alt + t	with…（if, else, try, catch, for, etc）用 * 来围绕选中的代码行，（ * 包括 if 、 while 、 try catch 等）
ctrl + alt + h	点中某一个方法按下这个快捷键，在左边栏上弹出此方法的调用关系，此快捷键在开发中十分常用。（Mac中不适用）
ctrl + shift + alt + n	查找类中的方法或变量,通过一个字符快速查找位置（必记）
alt + left/right	以单词作为边界跳光标位置
alt + f1	查找代码所在位置
alt + F3	逐个往下查找相同文本，并高亮显示
alt + insert	生成代码(如get,set方法,构造函数等)
shift + esc	当前激活的任意小窗口最小化，也可以是alt+数字键，数字在小窗口有显示。
shift + alt + up	块移动(if(){},while(){}语句块的移动)
shift + F3	查找上一个
F2 或shift + F2	高亮错误或警告快速定位
F3	查找下一个
command + mouseover	显示主要信息

3. Tab键使用小妙招

👆我们讲到了代码标签输入完成后，按Tab，生成代码。👇就分享一些实用的快速输入标签的方法，首先介绍几个符号的含义

标签	含义
>	下一个子标签，用于父子标签的连接
*	多少个子标签，后面跟子标签的个数
$	标签的名称序号，可以理解为for循环中的i
{}	标签的内容，标签中的文字等需要在{}表示

输入h1，加tab键结果：<h1></h1>
输入div#qxj，加tab键结果：<div id="qxj"></div>
输入div.qxj，加tab键结果：<div class="qxj"></div>
输入a[href=www.baidu.com] 末尾处加tab键结果：<a href="www.baidu.com"></a>
输入div>p*5,加tab键

<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

输入 ul>li*4>a[href=www.baidu.com]{我是第$个}，加tab键

<ul>
  <li><a href="www.baidu.com">我是第1个</a></li>
  <li><a href="www.baidu.com">我是第2个</a></li>
  <li><a href="www.baidu.com">我是第3个</a></li>
  <li><a href="www.baidu.com">我是第4个</a></li>
</ul>

输入img[src='images/$.jpg']*3，加tab键

<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">

输入 ul>li*3>div.img>img[src='image/$.jpg']，加tab键

<ul>
  <li>
    <div class="img"><img src="image/1.jpg" alt=""></div>
  </li>
  <li>
    <div class="img"><img src="image/2.jpg" alt=""></div>
  </li>
  <li>
    <div class="img"><img src="image/3.jpg" alt=""></div>
  </li>
</ul>

输入div#tab1+div#tab2，加tab键 「+ : 表示并列的标签」

<div id="tab1"></div>
<div id="tab2"></div>

引入link，script标签

<!--引入link，输入link，加tab键-->
<link rel="stylesheet" href="">
 
<!--引入css 输入link:css，加tab键 -->
<link rel="stylesheet" href="style.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="">

【注意】：上述tab键操作一定要在输入的内容的末尾处！ tab位置

如果你觉得这篇文章有用，动动小手给我点个赞吧🍀

本文使用 mdnice 排版