Webstorm2018 常用快捷键和常见配置

矫情吗；* 2024-02-19 12:39 32阅读 0赞

<table> 
 <tbody> 
 <tr> 
 <td> Webstorm快捷键 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td>Ctrl + /</td> 
 <td>行注释/取消行注释 //</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift&nbsp;+ / </td> 
 <td>块注释/取消块注释 /* …… */</td> 
 </tr> 
 <tr> 
 <td>Ctrl + W</td> 
 <td>选择代码块，增量选择</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Alt +W</td> 
 <td>上个快捷键的回退，减量选择代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Alt + L</td> 
 <td>格式化代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + C or Ctrl + Insert</td> 
 <td>拷贝当前行或者所选代码块到剪切板</td> 
 </tr> 
 <tr> 
 <td>Ctrl + X or Shift + Delete</td> 
 <td>剪切当前行或所选代码块到剪切板</td> 
 </tr> 
 <tr> 
 <td>Ctrl + V or Shift + Insert</td> 
 <td>粘贴剪切板上的内容</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + V</td> 
 <td>粘贴缓冲器中最新的内容</td> 
 </tr> 
 <tr> 
 <td>Ctrl + D</td> 
 <td>复制当前行或者所选代码块并在光标行后进行粘贴</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Y</td> 
 <td>删除光标所在行</td> 
 </tr> 
 <tr> 
 <td>Shift + Enter</td> 
 <td>另起一行（无论光标在哪个位置）</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + U</td> 
 <td>所选代码块大小写转换</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + Up/Down</td> 
 <td>上下移动行</td> 
 </tr> 
 <tr> 
 <td>Alt + Delete&nbsp;</td> 
 <td>文件安全删除</td> 
 </tr> 
 <tr> 
 <td>Shift + F6</td> 
 <td>文件重新命名</td> 
 </tr> 
 <tr> 
 <td>Alt + Shift + F&nbsp;</td> 
 <td>将当前文件添至收藏夹</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + N</td> 
 <td>通过文件名快速查找工程内的文件</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + Alt + N</td> 
 <td>通过一个字符快速查找位置</td> 
 </tr> 
 <tr> 
 <td>Ctrl + F</td> 
 <td>在文件内快速查找代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + E</td> 
 <td>查看最近编辑的文件列表</td> 
 </tr> 
 <tr> 
 <td>Ctrl + R</td> 
 <td>在文件内快速查找并替换代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + F</td> 
 <td>在工程内快速查找代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + R</td> 
 <td>在工程内快速查找并替换代码</td> 
 </tr> 
 <tr> 
 <td>Alt + F1</td> 
 <td>查找当前选项卡在项目模块位置</td> 
 </tr> 
 <tr> 
 <td>Ctrl + G</td> 
 <td>跳到当前选项卡指定行的代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + ]/[</td> 
 <td>光标到代码块的前面或后面</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + Space</td> 
 <td>自动补全代码</td> 
 </tr> 
 <tr> 
 <td>Ctrl + B or Ctrl + Click&nbsp;</td> 
 <td>跳转到定义处Go to declaration</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Alt + B&nbsp;</td> 
 <td>跳转方法实现处Go to implementation(s)</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + B&nbsp;</td> 
 <td>跳转方法定义处Go to type declaration</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + I&nbsp;</td> 
 <td>打开定义快速查找(在当前窗口显示当前css选择器或js函数详情)</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>Ctrl + Alt + S</td> 
 <td>打开配置窗口</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Shift + A</td> 
 <td>快速查找编辑器所有快捷键功能</td> 
 </tr> 
 <tr> 
 <td>Ctrl + F4</td> 
 <td>关闭当前选项卡</td> 
 </tr> 
 <tr> 
 <td>Alt + ←/→</td> 
 <td>切换代码选项卡</td> 
 </tr> 
 <tr> 
 <td>Ctrl + Tab</td> 
 <td>弹出界面选择代码选项卡</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>Alt + J</td> 
 <td>选中多个相同的单词</td> 
 </tr> 
 <tr> 
 <td>Alt + 鼠标双击</td> 
 <td>Alt 按住不动，鼠标移动到目标单词双击选中，增量选中</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 </tbody> 
</table>

--------------------

其他常见问题：

1、webstrom新建文件的快捷键默认是没有，需自己设置；

**位置：“File” → “settings” → “keymap”**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1][]

2、当工程目录很庞大时，有些子目录很经常打开，但层级又很深，这时候可以把目录添加到收藏夹里面，添加成功后，左侧有个“Favorites”菜单

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 3][]

3、全局设置忽略文件：node\_modules

**位置：“File” → “settings” → “Editor” → “File Types” → “Ignore files and folder”**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 4][]

3.2、忽略某个文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 5][]

4、webstrom设置项目运行时默认打开的浏览器

**位置：“File” → “settings” → “Tools” → “Web Browsers”**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 6][]

5、在webstrom编辑代码的时候，有时候需要将某段落添加括号注释一下，但是webstrom默认并不能选中文字添加括号。

为编程单元（单词或短语）添加双引号、单引号、中括号、大括号、小括号的配置：

**位置：Editer --> General --> Smart Keys**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 7][]

![201904151350026.gif][]

6、在webstrom编辑器里，当一行代码很长很长时，必须拖动滚动条查看后面的内容，但是设置软换行后，代码会根据屏幕大小自动换行，很方便阅读。

**位置：Editer --> General --> 勾选Use soft wraps in editor**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 8][]

未设置软换行和设置软换行后的效果：

![20190417105117320.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7693871a761a4ff0948bfdf2d51177d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2fa49e7ce76943c0a0879865f242e193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181107100554696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ec5c8b15252b4a44b2c65173509f9049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/978d2ff2e27f451da424b300d50fec66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4109a47052d047c2bbcf2e1246cff801.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0725653258804ddc88ce4535eb132dc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/88331e0a88804b47a3e1fb43e587a58b.png
[201904151350026.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b3511f7a9c8944b08729d099556dfda2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aW9uZ19qaWF4aW4_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/81f584511c9d432eaa01889f5aa9b5cb.png
[20190417105117320.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9a94c5c3e6d044c78d9bb068cdb22e3c.png