1.3 熟悉WebStorm开发工具_Node.js从入门到精通-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

1.3　熟悉WebStorm开发工具

俗话说“工欲善其事，必先利其器”，要使用Node.js开发程序，首先应该选择一款好的开发工具，而WebStorm是开发人员最常使用的一种网页开发工具，它是JetBrains公司旗下的一款网页开发工具，其功能非常强大，支持各种前端和JavaScript库的代码补全，被广大开发者誉为Web前端开发神器、最强大的HTML5编辑器、最智能的JavaScript IDE等。本节将对WebStorm的下载、安装及使用进行讲解。

1.3.1　WebStorm的下载

打开浏览器，在地址栏中输入网址https://www.jetbrains.com/webstorm/，进入WebStorm官网，单击页面中的Download按钮，即可下载WebStorm的安装文件，如图1.17所示。

图1.17　WebStorm官网

说明

WebStorm是一个收费软件，官网下载的安装文件默认提供30天的试用期，如果想一直使用WebStorm开发程序，需要在官网购买使用授权。

下载完成的WebStorm安装文件如图1.18所示，其命名格式为“WebStorm-版本号.exe”。

图1.18　下载完成的WebStorm安装文件

说明

笔者在编写本书时，WebStorm的最新版本是2022.2.3，该版本会随着时间的推移不断更新，读者在使用时，不用纠结版本的变化，直接下载最新版本即可。

1.3.2　WebStorm的安装

安装WebStorm开发工具的步骤如下。

（1）双击下载完成的WebStorm安装文件，开始安装WebStorm，如图1.19所示，单击Next按钮。

（2）进入路径设置对话框，如图1.20所示，在该对话框中单击Browse按钮去选择WebStorm的安装路径，然后单击Next按钮。

图1.19　WebStorm安装向导

图1.20　路径设置对话框

（3）进入安装配置对话框，在该对话框中首先创建桌面快捷方式，并添加系统环境变量，然后创建右键菜单快捷方式，以及设置.js、.css、.html和.json文件的默认打开方式，最后单击Next按钮，如图1.21所示。

（4）进入确认安装对话框，如图1.22所示，直接单击Install按钮开始安装。

（5）此时会进入WebStorm的安装对话框，该对话框中显示当前的安装进度，如图1.23所示。

（6）安装完成后自动进入安装完成对话框，单击Finish按钮即可完成WebStorm的安装，如图1.24所示。

图1.21　安装配置对话框

图1.22　确认安装对话框

图1.23　显示WebStorm安装进度

图1.24　安装完成对话框

说明

安装完成对话框中有两个单选按钮，其中Reboot now表示立即重启，而I want to manually reboot later表示稍后重启，用户可以根据自己的实际情况进行选择，默认选中的是I want to manually reboot later。

1.3.3　WebStorm首次加载配置

WebStorm在首次使用时，可以根据个人的实际情况进行一些配置，如验证激活、更改主题等，本节将介绍WebStorm首次加载时常用的一些配置，步骤如下。

（1）双击安装WebStorm时创建的桌面快捷方式图标，如图1.25所示，或者单击开始菜单中JetBrains下的WebStorm 2022.2.3快捷方式，如图1.26所示。

（2）进入WebStorm的用户协议对话框，在该对话框中选中下方的复选框，然后单击Continue按钮，如图1.27所示。

图1.25　WebStorm桌面快捷方式

图1.26　WebStorm在开始菜单中的快捷方式

图1.27　用户协议对话框

（3）进入WebStorm的许可激活对话框，如果已经购买了激活码，可以选中Activate WebStorm单选按钮，然后输入相关信息后进行激活；如果没有购买激活码，由于WebStorm提供了30天的试用期，因此可以选中Start trial单选按钮，并单击Log In to JetBrains Account按钮，如图1.28所示。

图1.28　许可激活对话框

（4）在弹出的网页中登录账户后，复制网页中提示的Token码，将其粘贴到弹出对话框的文本框中，并单击Check Token按钮，如图1.29所示。

图1.29　验证Token

（5）返回WebStorm的激活对话框，单击Start Trial按钮，如图1.30所示。

图1.30　开始试用

（6）进入试用版的确认信息对话框，该对话框中会提示试用的到期时间，单击Continue按钮，如图1.31所示。

（7）进入WebStorm欢迎对话框，在该对话框中可以对WebStorm的主题进行设置，默认是黑色主题，开发人员可以根据自己的喜好更改主题颜色，比如将主题修改为白色，步骤为：单击Customize，在右侧打开Color theme下的下拉列表，在其中选择IntelliJ Light即可，如图1.32所示。