如何下载 WebStorm

获取正版的途径

1. 付费购买
   WebStorm 官方报价是

   1. 第一年 405 人民币
   2. 第二年 323 人民币
   3. 第三年之后 240 人民币

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

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

WebStorm 配合 Cmder 或 Git Bash

配置终端

1. 打开设置，进入 Tools => Terminal
2. 将 Shell Path 改为你的 bash.exe 的绝对路径

3. 建议 cmder 用户将提示符从 λ 改为 $，打开文件 C:\自己找路径\cmder\vendor\git-for-windows\etc\profile.d\git-prompt.sh，改其中第 53 行，将 λ 改为 $

配置 git

1. 打开设置，进入 Version Control => Git
2. 将 Path to Git 改为 git.exe 的绝对路径，比如我的路径是 C:\请自己找到对应的目录\cmder\vendor\git-for-windows\bin\git.exe，如下图

如何让 WebStorm 的界面变美观

步骤

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

2. 安装 Material Theme UI 主题，操作方法：File => Settings => Plugins => Marketplace => 搜索 Material Theme UI 并安装

安装完成后进入 File => Settings => Appearance & Behavior => Material Theme，按照下图配置

如何让 WebStorm 里的代码变好看

1. 选择一个好看的字体配色，打开设置 => Editor => Color Scheme，选择一个你喜欢的配色，点击 OK，就可以预览这个配色了。我个人喜欢 Molokai 或者默认的 Darcula 配色。

2. 将字体设置为 JetBrains Mono（这是 2020 年最新字体）、Source Code Pro 或者 Fira Code，方法为：打开 Editor => Font，然后如下图所示设置一下

3. 还有两处字体需要设置一下，分别是

   1. 进入 Editor => Color Scheme => Color Scheme Font，取消勾选 Use color scheme font instead of ...
   2. 进入 Editor => Color Scheme => Console Font，取消勾选 Use color scheme font instead of ...
   3. 点击保存，这样一来，所有字体就统一了。

WebStorm 快捷键 ＆ Git 快捷操作

查看快捷键

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

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

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

3. Action 后面就跟着对应的快捷键\

   

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

修改快捷键

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

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

常见设置

我一般会设置这么几个快捷键

1. 查找文件，设置为 Ctrl + P（mac 用户自动将 Ctrl 脑补成 cmd 键吧）
   

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

3. 终端窗口，设置为 Alt + 2，这样你任何时候都可以打开终端输入命令行了（见上图）

4. Git 窗口（上图中最下方的 Version Control 就是指 Git），设置为 Alt + 3（当然你可以改），前提是你的项目已经在终端里运行过 git init，这个窗口操作 git 非常方便（不过我个人更喜欢用命令行）
   

   你可以有最左边的快捷按钮，也可以在 App.vue 文件上面右键，查看更多细节操作。

   点击左侧小飞机按钮提交代码的时候，有很多选项，见下图

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

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

7. 加强 Emmet，如下图
   

8. 撤销与重做。撤销的默认快捷键是 Ctrl + Z，不需要改；但是重做的默认快捷键是 Ctrl + Shift + Z，建议在 keymap 里把给 redo 添加一个快捷键 Ctrl + Y（提示冲突就选择 Remove）

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

WebStorm 格式化代码

初始化

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

image.png

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

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

快捷键

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

如果你对格式化后的文件不满意，那么

1. 在设置里选中 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，用于折行