⌈磨刀不误砍柴工⌋ 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

1. Preferences > Languages & Frameworks > Javascript > Code Quality Tools > Eslint
2. 勾选Eable
3. 输入Node和Eslint路径
4. 选中Automatic search 并Apply
5. Editor > Inspections
6. 取消勾选Javascript下的所有子选项
7. 勾选Javascript > Code quality tools > 第一个Eslint
8. 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，生成代码。就分享一些实用的快速输入标签的方法，首先介绍几个符号的含义

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

1. 输入h1，加tab键
   结果：

2. 输入div#qxj，加tab键
   结果：

3. 输入div.qxj，加tab键
   结果：

4. 输入a[href=www.baidu.com] 末尾处加tab键
   结果：

5. 输入div>p*5,加tab键

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

6. 输入 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>

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. 输入 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>

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

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

10. 引入link，script标签

<link rel="stylesheet" href="">
 

<link rel="stylesheet" href="style.css">
 

<script src="">script> 
 

<script>script>

12.快速输入ul、li

<ul>
  <li>li>
ul>


<ul>
  <li>li>
  <li>li>
  <li>li>
ul>


<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 href="http://">a>


<p>p>
 

<p>p>
<p>p>
 

<p>p>
<p>p>
<p>p>

14.快速输入带类名的标签

<div class="one two">div>


<form action="" method="get">form>


<form action="" method="post">form>


<input type="button" value="">

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