如何下载WebStorm？

去 WebStorm官方网站下载即可，可以免费试用 30 天。

获取正版的途径付费购买

WebStorm 官方报价是第一年 405 人民币

第二年 323 人民币

第三年之后 240 人民币

2. 如果你是学生，可以获取免费教育版

3. 如果你在 GitHub 上的项目持续更新了三个月，可以申请开源免费版

如何在WebStorm里配置终端在 Settings => Terminal 里设置一下 Shell Path 即可

进入 Version Control => Git，将 Path to Git 改为 git.exe 的绝对路径

让WebStorm界面好看一点

设置Appearance和插件

将用不到的界面隐藏起来，操作方法：View => Appearance => 勾选如下

安装 Material Theme UI 主题，操作方法：File => Settings => Plugins => Marketplace => 搜索 Material Theme UI 并安装，安装完成后进入 File => Settings => Appearance & Behavior => Material Theme，仿照我下面的配置即可

改变以下选项

字体设置

这里我使用默认的字体，勾选enable font ligatures

还有两处字体需要设置一下，分别是进入 Editor => Color Scheme => Color Scheme Font，取消勾选 Use color scheme font instead of ...

进入 Editor => Color Scheme => Console Font，取消勾选 Use color scheme font instead of ...

点击保存，这样一来，所有字体就统一了。

快捷键设置 & git 快捷操作

查看快捷键

直在 WebStorm 里查看快捷键很简单：

按两下 Shift，没错，按两下，你会得到一个搜索框，这个搜索框可以搜索任何东西

在搜索框里输入你想要的功能名称，比如 reformat (代码格式化)，然后你就看到对应的操作(Action)。

Action 后面就跟着对应的快捷键不过这个方式的缺点是只能搜英文，所以可以看第二个方式：查看菜单栏，快捷键就写在菜单栏每一项 Action 的后面

修改快捷键

在 Settings 里的 keymap 里的搜索栏搜索即可，见下图

如果修改后提示快捷键有冲突，点击 Remove 即可把其他冲突的快捷键删除。

常见设置查找文件，设置为 Ctrl + P。

项目文件列表窗口，设置为 Alt + 1，这样任何时候你都可以显示或关闭项目文件列表。

终端窗口，设置为 Alt + 2，这样你任何时候都可以打开终端输入命令行了。

Git 窗口，设置为 Alt + 3(当然你可以改)，前提是你的项目已经在终端里运行过 git init。

关闭当前窗口，设置为 Ctrl + W，这是一个常用快捷键，设置完之后提示冲突，此时请点击 Remove。

在 Keymap 里将 Main Menu => Edit => Extend Selection 设为 Alt + W，将 Main Menu => Edit => Shrink Selection 设为 Alt + Shift + W，这两个快捷键自己试试，非常有用。

最后，如果你忘了快捷键，就用万能快捷键 Shift Shift 来搜索即可。

格式化代码

WebStorm 格式化代码的功能特别强大，不过需要学习才能用得溜

初始化

在任意 JS 文件，使用 Show Reformat File Dialog 功能(快捷键你要自己用 Shift Shift 搜索一下)，会弹出一个对话框

我们一般选择 Whole file 来格式化整个文件，但如果当前文件是别人的代码，你可能就要选择 Only VCS changed text，以防修改别的人代码，只格式化刚写的代码。

你可以在任何时候使用 Show Reformat File Dialog 功能重新弹出这个对话框进行修改配置。

快捷键

使用 Reformat Code 功能(快捷键你要自己用 Shift Shift 搜索一下)，就会立即格式化当前文件。

如果你对格式化后的文件不满意，那么在设置里选中 Editor => Code Style => TypeScript进行自定义(JavaScript同理)，可以看我下面用红色箭头推荐的配置

2. 可选：个人建议把 JS、CSS、SCSS、TypeScript、HTML 代码缩进全改成 2、2、2，这样代码更紧凑。建议 JS 不加分号，TS 加分号。

其他WebStorm选项

开启以下功能(直接在 Shift Shift 后输入对应的英文即可开启，找不到不要来问我，因为这些选项都无关紧要)：Show tree indent guides，这个功能会在编辑器里添加竖线，方便代码对齐。

Show method separators，这个功能会在每个方法上面添加横线，便于阅读代码。

Breadcrumbs，搜索这个选项，然后选择 Dont't Show，用于隐藏面包屑(如下图)，你也可以右键点击面包屑查看更多选项

Show CSS color preview as background，我个人喜欢开启这个功能

关闭以下功能(直接在 Shift Shift 后输入对应的英文即可关闭，找不到不要来问我，因为这些选项都无关紧要)：Show gutter icons，关闭此功能可能让编辑器更简洁

一些可能用到的功能Soft wrap，用于折行

END

大概就是这些，有些根据自己的观察没加，绝大多数内容来自方方老师(方应杭)。

那就先这样掰掰。