教程说明

本教程参照 CodeCasts的"PhpStorm 使用教程"。phpstorm和webstorm都是JetBrains的IDE产品，所以配置和操作有相同之处。我把相关知识点记录一下，方便日后查询。在此特别推荐一下CodeCasts网站的视频教程，站长蛮用心的

我使用的是Mac系统，快捷键与Windows系统不同，以下快捷键以Mac为准。

Mac 和 Windows键盘对照表

超级快捷键 Command+Shift+A：可以搜索到 WebStorm的所有配置选项

一、界面优化

去掉相关的 Bar

在菜单栏的view下勾掉所有的 Bar (Status Bar、Navigation Bar等)。

去掉标签 (Tabs Placement)

右击标签，选择Tabs Placement -> none，如果想显示， Command+Shift+A下搜索Tabs Placement后选择显示位置。

去掉面包屑导航

Command+Shift+A下搜索 breadcrumbs，选择Don't Show。

去掉代码折叠轮廓线

  Command+Shift+A下搜索 Code Folding，取消 code folding outline。
  快捷键：Command++(展开)、Command+-(折叠)

去掉代码分割线(此项有疑问，后续再修改)

  Command+Shift+A下搜索 show method separators并取消。

显示和隐藏SideBar

  使用Command+1 显示和隐藏SideBar。

去掉左边竖线

  Command+Shift+A下搜索 show right margin(configured in Code Style options)并取消。

美化界面和字体设置

  - 主题设置：Command+, 打开偏好设置，依次选择 Editor -> Color Scheme (我使用Mokonai)
  - 字体设置：Command+, 打开偏好设置，依次选择 Editor ->Font (我使用Fira Code、字体大小16、字间距1.4)
  - SideBar 字体设置：Command+Shift+A下搜索override default fonts by...,勾选后选择字体和设置大小

二、重要的快捷键

自定义快捷键

  Command+Shift+A下搜索keymap，查找需要修改的快捷键，进行修改。查找时可以直接输入需要修改的项目名称，也可以输入项目之前的快捷键。

快捷键列表

  - 快速查找和打开文件：Command+P（默认是Command+Shift+O）
  - 显示指定对象的属性和方法 (File Structure)：Control+Command+M (默认是Command+F12)
  - 在已打开的文件中快速跳转：Command+E
  - 快速查找和打开对象或方法：Command+Option+O
  - 快速创建文件或文件夹：Command+Up后选择对应的文件夹，再Command+N，创建文件或文件
  - 偏好设置 (preference)：Command+,

三、文件模板（File Template）

 Command+Shift+A下搜索File Template, 配置和添加文件模板。

四、代码片段（Live Templates）

 Command+Shift+A下搜索Live Templates [preferences], 配置和添加代码片段。

五、代码的格式化及美化（Live Templates）

 - Command+Option+L：格式化代码
 - Command+Shift+A下搜索Code Style，这里可自定义代码格式 

六、插件（Live Templates）

 - IdeaVim：安装启用后可使用vim方式编写代码

七、代码重构

 选择需要重构的代码段，Control+T 呼出菜单，选择重构方式，也可使用快捷键直接进行重构操作
 - Command+Option+V： 变量重构 (Varibale)
 - Command+Option+M：方法重构 (Method)
 - Command+Option+N:   对变量或方法的重构还原 (inline)

八、多点编辑 (相同的单词同时编辑)

 - Command+D:  逐个选择单词 (默认快捷键Control+G)
 - Control+Command+G：选择全部的单词