WebStorm 是前端工程流行的 IDE，提供项目初始化配置、版本控制、代码 Debug，支持所有前端语言及框架，墙裂推荐。

一、安装与破解

直接在官网下载：https://www.jetbrains.com/web...
安装后破解，2018 以上版本推荐使用激活码方式破解。

1.1 修改 hosts 文件

Windwos系统 hosts 文件路径为：C:WindowsSystem32driversetc
Mac的hosts 文件路径为：/private/etc
Linux 的 hosts 文件路径为：/etc

查看是否含有 hosts 文件，如果没有 hosts 文件就新建一个；
注意 hosts 文件是无后缀的 hosts.txt、hosts.sam 都是错误的；
建议复制一份 hosts 文件到桌面，然后修改桌面的 hosts 文件；
编辑保存后将桌面的那份 hosts 文件复制回去，弹出询问框时选择覆盖即可；
这样可以避免因权限问题而无法修改 hosts 文件。

找到 hosts 之后添加下面一行到文件中，目的是屏蔽掉 WebStorm 对激活码的验证

0.0.0.0 account.jetbrains.com

Mac 如何查看hosts?

打开 访达/Finder，快捷键组合 Shift+Command+G 三个组合按键，并输入 hosts 文件的所在路径 /etc/hosts

使用文本编辑打开 hosts 添加代码，如果遇到权限问题可将hosts文件先复制出来修改后再覆盖原来的即可。

1.2 填写激活码

打开 WebStorm 选择 Activate code（用激活码激活），复制激活码：

K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJSUzAiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IlJEIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiUkMiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJEQyIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IkRCIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiUk0iLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IkFDIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiRFBOIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiR08iLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJQUyIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IkNMIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJSU1UiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifV0sImhhc2giOiI4OTA4Mjg5LzAiLCJncmFjZVBlcmlvZERheXMiOjAsImF1dG9Qcm9sb25nYXRlZCI6ZmFsc2UsImlzQXV0b1Byb2xvbmdhdGVkIjpmYWxzZX0=-Owt3/+LdCpedvF0eQ8635yYt0+ZLtCfIHOKzSrx5hBtbKGYRPFDrdgQAK6lJjexl2emLBcUq729K1+ukY9Js0nx1NH09l9Rw4c7k9wUksLl6RWx7Hcdcma1AHolfSp79NynSMZzQQLFohNyjD+dXfXM5GYd2OTHya0zYjTNMmAJuuRsapJMP9F1z7UTpMpLMxS/JaCWdyX6qIs+funJdPF7bjzYAQBvtbz+6SANBgN36gG1B2xHhccTn6WE8vagwwSNuM70egpahcTktoHxI7uS1JGN9gKAr6nbp+8DbFz3a2wd+XoF3nSJb/d2f/6zJR8yJF8AOyb30kwg3zf5cWw==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBaCJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOdlWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2dDup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUOH3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYiKX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqqDLgkNzuoog==

WebStorm 激活成功，该激活码有效期为2018.5.5-2019.5.4，此激活方式也适用于 IntelliJ IDEA 和 Pycharm。

还有永久激活方式，推荐教程 MacBook Jetbrains 全系列永久激活

二、汉化

不推荐汉化的原因是：

• 可能下载到存在病毒的汉化包；
• 大多数软件还是以英文为主，如果你熟悉了一种软件可以说就一通百通；
• webstorm 2018 以上版本汉化后可能出现配置或 Structure 功能失灵等问题。

分享汉化包下载地址：jetbrains 全系列汉化文件百度云下载

找到相对应软件与版本的汉化包，我选择 WebStorm 文件夹下的 2018.2 版本：

关闭 WebStorm，打开 WebStorm 安装目录

进入 /lib/ 目录下，将汉化文件复制过来：

打开 WebStorm 验证是否汉化成功！并且查看 设置/首选项/Preferences 以及 Structure 是否可用。

如果没有加载到汉化文件，简单粗暴的方式，是备份 resorces_en.jar，把汉化文件伪装/命名为 resorces_en.jar（WebStorm 默认的语言配置）。

三、设置外观与主题

我选用 IDE 外观主题为黑色，代码编辑块混搭 Sublime Text 的风格:

3.1 IED 外观

首先打开 WebStorm 的 Preferences/Setting 设置选项：

找到 Appearance/外观，修改 Theme/主题为 Darcula

还可以修改整个 IDE 的字体，确认 APPLY/应用后主题更新。

3.2 编辑器配色

在 WebStorm 的 Preferences/Setting 设置界面中，找到 Editor/编辑器 > Corlor Scheme/配色方案，可以看到有很多种编辑器主题供选择：

例如 选择 Monikai 主题后，点 APPLY/应用，代码配色更改！

此时 Monikai 主题下的 Vue 文件代码配色：

3.3 导入主题

我们可以在 WebStorm 中配置喜欢的主题，例如 Sublime text 3 默认的配色是 monokia，但 WebStorm 提供的 monokia 配色不太好看，所以我们下载喜欢的配色，推荐一个：Sublime 主题色 GitHub 下载传送门

下载主题后，通过导入配置文件的方式加载设置：

如果没有生效，在 WebStorm 的 Preferences/Setting 设置界面中，找到 Editor/编辑器 > Corlor Scheme/配色方案
查看 Scheme 是否有新加的主题，如果没有导入进来，就 Import Scheme。

最后.vue 文件的配色效果如下：

如果还想个性配置，在 Editor/编辑器 > Corlor Scheme/配色方案 展开后可以看到各类选项实现自定义配色。

四、设置语言&框架

打开 WebStorm 的 Preferences/Setting 设置面板：

在 Language & Frameworks / 语言&框架 中设置项目依赖的语言版本和各类插件路径。

WebStorm 支持几乎所有不同语言的各种版本，例如 JavaScript 可选 ES6、ES5、JS1.8 等：

大部分的情况下 WebStorm 会自动寻找依赖的语言包或插件在本地安装的位置，我们可以确认或设置 Node 及 NPM 的路径，

注意到 NPM 包管理，这些依赖包都是在建项目或安装包时的版本，可以对包版本进行更新管理。

五、集成其它应用

Webstorm 可以集成第三方应用，例如 Terminal/终端、Web Browsers/浏览器等其它外部工具，还是在 Perferences/首选项/设置 -> Tools/工具中设置：

5.1 浏览器

设置页面预览的浏览器：

5.2 Terminal

设置连接 Terminal/终端 的路径：

推荐一款 Terminal 的工具：oh-my-zsh，支持主题切换和高亮语法关键字等。

Terminal 安装 oh-my-zsh：

$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装完成后 Terminal 风格：

在 WebStorm 中的 Terminal：

六、快捷键

安利一个快捷键小工具 - CheatSheet，安装后长按 Command 就会出现当前应用所有快捷键：CheatSheet 在 MAC 的安装步骤

6.1 编辑类

简单通用的复制、粘贴、剪切、全选、查找等就不列出了，推荐几类高效的快捷键。

• 下一处相同代码加入光标： control + G
• 所有相同代码选择：control + G + command
• 取消光标：control + G + shift

*小栗子：对于重复代码或标签等快速选择：

统一进行修改:

项目全局查询：

• 查询代码：command + shift + F
• 查找文件：command + shift + O

代码区域选择（从当前光标位置开始）：

• 扩展选择区：option + ↑
• 取消选择区：option + ↓
• 向上扩展：shift + ↑
• 向下扩展：shift + ↓

6.2 代码类

• 复制当前行：command + D
• 格式化代码：command + option + L
• 行注释：command + /
• 块注释：command + option + /

关于 command + shift + 方向：

• 代码上移一行：command + shift + ↑
• 代码下移一行：command + shift + ↓
• 向左选中：command + shift + ←
• 向右选中：command + shift + →

代码折叠：

• 块展开：command + option + +
• 块折叠：command + option + -
• 全部展开：command + shift + +
• 全部折叠：command + shift + -

其他好用的快捷键或者炫酷的功能欢迎留言补充。

加油哦少年！