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所示。

下載完成的WebStorm安裝文件如圖1.18所示，其命名格式為“WebStorm-版本號.exe”。

1.3.2　WebStorm的安裝

安裝WebStorm開發工具的步驟如下。

（1）雙擊下載完成的WebStorm安裝文件，開始安裝WebStorm，如圖1.19所示，單擊Next按鈕。

（2）進入路徑設置對話框，如圖1.20所示，在該對話框中單擊Browse按鈕去選擇WebStorm的安裝路徑，然后單擊Next按鈕。

（3）進入安裝配置對話框，在該對話框中首先創建桌面快捷方式，并添加系統環境變量，然后創建右鍵菜單快捷方式，以及設置.js、.css、.html和.json文件的默認打開方式，最后單擊Next按鈕，如圖1.21所示。

（4）進入確認安裝對話框，如圖1.22所示，直接單擊Install按鈕開始安裝。

（5）此時會進入WebStorm的安裝對話框，該對話框中顯示當前的安裝進度，如圖1.23所示。

（6）安裝完成后自動進入安裝完成對話框，單擊Finish按鈕即可完成WebStorm的安裝，如圖1.24所示。

1.3.3　WebStorm首次加載配置

WebStorm在首次使用時，可以根據個人的實際情況進行一些配置，如驗證激活、更改主題等，本節將介紹WebStorm首次加載時常用的一些配置，步驟如下。

（1）雙擊安裝WebStorm時創建的桌面快捷方式圖標，如圖1.25所示，或者單擊開始菜單中JetBrains下的WebStorm 2022.2.3快捷方式，如圖1.26所示。

（2）進入WebStorm的用戶協議對話框，在該對話框中選中下方的復選框，然后單擊Continue按鈕，如圖1.27所示。

（3）進入WebStorm的許可激活對話框，如果已經購買了激活碼，可以選中Activate WebStorm單選按鈕，然后輸入相關信息后進行激活；如果沒有購買激活碼，由于WebStorm提供了30天的試用期，因此可以選中Start trial單選按鈕，并單擊Log In to JetBrains Account按鈕，如圖1.28所示。

（4）在彈出的網頁中登錄賬戶后，復制網頁中提示的Token碼，將其粘貼到彈出對話框的文本框中，并單擊Check Token按鈕，如圖1.29所示。

（5）返回WebStorm的激活對話框，單擊Start Trial按鈕，如圖1.30所示。

（6）進入試用版的確認信息對話框，該對話框中會提示試用的到期時間，單擊Continue按鈕，如圖1.31所示。

（7）進入WebStorm歡迎對話框，在該對話框中可以對WebStorm的主題進行設置，默認是黑色主題，開發人員可以根據自己的喜好更改主題顏色，比如將主題修改為白色，步驟為：單擊Customize，在右側打開Color theme下的下拉列表，在其中選擇IntelliJ Light即可，如圖1.32所示。

1.3.4　WebStorm功能區預覽

WebStorm開發工具的主窗口主要可以分為7個功能區域，如圖1.33所示。

1.3.5　WebStorm中英文對照菜單

菜單欄顯示了所有可用的WebStorm命令，如新建、設置、運行等，由于WebStorm官方只提供英文版，因此為了方便大家更好地使用WebStorm的菜單，這里提供了WebStorm常用中英文對照菜單，如表1.1所示。

1.3.6　工具欄

WebStorm的工具欄主要提供調試、運行等快捷按鈕，方便用戶檢測、查看代碼的運行結果，如圖1.34所示。

1.3.7　常用快捷鍵

熟練地掌握WebStorm快捷鍵的使用，可以更高效地編寫、調試代碼，WebStorm開發工具的常用快捷鍵如表1.2所示。