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 + -
其他好用的快捷键或者炫酷的功能欢迎留言补充。