WebStorm 官⽅地址: www.jetbrains.com/webstorm/
安装 WebStorm
- 下载 WebStorm
第⼀步: 通过浏览器访问 WebStorm 官⽅⽹站
第⼆步: 点击【DOWNLOAD】按钮,下载 WebStorm 安装⽂件 - 安装 WebStorm
第⼀步: 双击 WebStorm 安装⽂件,开始安装 WebStorm
第⼆步: 点击【Next】按钮,继续安装 WebStorm
第三步: 选择 WebStorm 的安装路径(注意: 不要选择中⽂路径)
32-bit launcher: 如果你的操作系统是 32 位的话,选择这个选项。
64-bit launcher: 如果你的操作系统是 64 位的话,选择这个选项。
如果你想使⽤ WebStorm 作为 JavaScript、css 和 html ⽂件的默认打开软件的话,可以将上述选项进⾏勾
选。
上述选项默认不勾选。
第四步: 配置 WebStorm 是否创建快捷启动⽅式和关联相关⽂件。
第五步: 点击【Next】按钮,继续安装 WebStorm
第六步: 选择开始菜单的软件名称,默认不修改。点击【Install】按钮,继续安装 WebStorm
第七步: 等待⾃动安装完成
如果勾选,点击【Finish】按钮,会直接打开 WebStorm。
如果默认不勾选,点击【Finish】按钮,不会直接打开 WebStorm。
我们选择勾选!!!
第⼋步: 点击【Finish】按钮,结束 WebStorm 安装
初始化 WebStorm - 启动 WebStorm
第⼀步: 安装完成后,第⼀次启动 WebStorm,会看到以下界⾯
第⼀个选项: 如果之前安装过 WebStorm,并且保留了之前配置的话,可以选择这个选项,来导⼊之前
的配置。
第⼆个选项: 不导⼊任何配置。由于我们是第⼀次使⽤,选择这个选项。
由于 WebStorm 是收费的,所以需要激活 WebStorm 才能正常使⽤。
当然,WebStorm 提供 30 天的试⽤。如果选择 30 天的试⽤的话,请勾选下⾯的选项。
并且,点击【Evaluate】按钮,开始 30 天试⽤。
第⼆步: 点击【OK】按钮,继续启动 WebStorm
第三步: 激活 WebStorm
值得注意的是: 30 天试⽤,超过 30 天之后,不能再正常使⽤了。(除⾮购买)
当然,也可以选择直接激活 WebStorm。我们勾选下⾯的选项:
然后,勾选下⾯中的第⼆个选项:
在下⾯的输⼊框中,输⼊注册码进⾏激活 WebStorm。
注册码可以参考以下(这个注册码有效期是⼀年):
使⽤上述注册码时,需要将 0.0.0.0 account.jetbrains.com 添加到 hosts ⽂件中。
hosts ⽂件所在的路径如下:
1 CNEKJPQZEX-eyJsaWNlbnNlSWQiOiJDTkVLSlBRWkVYIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiQUMiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9LHsiY29kZSI6IklJIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiUlMwIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiV1MiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJEUE4iLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJSQyIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiREMiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJEQiIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9LHsiY29kZSI6IlJNIiwicGFpZFVwVG8iOiIyMDE4LTAxLTMwIn0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIwMTgtMDEtMzAifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAxOC0wMS0zMCJ9XSwiaGFzaCI6IjUxOTU1OTMvMCIsImdyYWNlUGVyaW9kRGF5cyI6MCwiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwiaXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-QOxwjWvRwJz6vo6J6adC3CJ4ukQHosbPYZ94URUVFna/Rbew8xK/M5gP3kAaPh6ZDveFdtMR1UBoumq3eCwXtXM3U3ls5noB4LIr+QplVlCj2pK5uNq7g/feyNyQcHpSXtvhIOnXDBLOecB05DOsxzm0p7ulGGJoAInmHeb9mc0eYjqc4RPpUQfh6HSYBnvEnKMlLF5bz4KEtzmsvvgA55CwzwQ3gRitm5Q/wUT7AQCBdjmBfNUjKVQL6TSjSDPp56FUdEs4Aab8LqstA2DIMbxocO64rvytmcUeIwu8Mi5uq87KQP5AQMSMYb59Inbd+dmVfx5cJo3fRS4/5s3/Hg==-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==
1 C:\Windows\System32\drivers\etc
值得注意的是: 不同版本的 WebStorm 的激活⽅式不同。具体激活⽅式可以搜索⽹上提供的激活教程。Copyright (c) 1993-2009 Microsoft Corp.
#This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#This file contains the mappings of IP addresses to host names. Each
entry should be kept on an individual line. The IP address should
be placed in the first column followed by the corresponding host name.
The IP address and the host name should be separated by at least one
space.
#Additionally, comments (such as these) may be inserted on individual
lines or following the machine name denoted by a '#' symbol.
#For example:
#102.54.94.97 rhino.acme.com # source server
38.25.63.10 x.acme.com # x client host
localhost name resolution is handled within DNS itself.
127.0.0.1 localhost
::1 localhost
0.0.0.0 account.jetbrains.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
第四步: 点击【OK】按钮,继续启动 WebStorm
第五步: 配置 WebStorm 的主题和快捷键⽅式等
设置 WebStorm 的快捷键,我们使⽤ Eclipse ⽅式。
设置 WebStorm 的主题,我们使⽤默认选项,不做任何修改。
设置 WebStorm 的颜⾊主题,可以根据个⼈喜好进⾏选择。我们使⽤默认选项。
Create New Project: 表示创建新的⼯程。
Open: 表示打开已有的⼯程。
Check out from Version Control: 表示从版本控制器下载⼯程。
我们选择创建新的⼯程,所以选择【Create New Project】选项。
第六步: 点击【OK】,进⼊到 WebStorm 的主界⾯ - 创建新的⼯程
左边的菜单,表示创建新⼯程的类型。⽬前,我们只能创建⼀个空的⼯程。
创建新⼯程的配置说明
随着我们学习的推进,后⾯的课程中,我们可以选择创建使⽤某个具体框架的⼯程。
右边选择创建新⼯程的存储位置。我们可以通过最右边的按钮来选择当前⼯程存储的位置。
选择好当前⼯程的存储位置后,点击【OK】按钮。
在输⼊框中的最后,输⼊ +⼯程名 创建新⼯程。
输⼊完成后,点击【Create】按钮,创建新的⼯程。
完成创建新⼯程后,进⼊到 WebStorm 的开发界⾯。
选择顶部菜单【File】->【New】->【Project】选项,创建新的⼯程。
选择顶部菜单【File】->【Open】选项,打开已有⼯程。
配置 WebStorm - 创建⼯程
- 打开⼯程
选择顶部菜单【File】->【Setting】选项,打开配置窗⼝。
选择左边菜单【Keymap】选项,配置 WebStorm 的快捷键。 - 配置 WebStorm
配置 WebStorm 的快捷键
选择 Keymaps 提供的选项,确定 WebStorm 的快捷键。
我们使⽤ Eclipse ⽅式。
选择左边菜单【Editor】->【Color&Font】->【Font】选项,修改编辑器的主题。
选择左边菜单【Editor】->【Color&Font】->【Font】选项,修改编辑器的字体。
修改 WebStorm 的编辑器主题样式
修改 WebStorm 的编辑器的字体和⼤⼩
通过以下选项来修改字体和⼤⼩。
Primary font: 选择字体样式。
Size: 输⼊字体的⼤⼩。
修改完成后,点击【Apply】按钮,保存当前修改的配置。