設置開發環境

5.1 選擇 IDE

想寫程式就要開始寫程式。這句話是有道理的。但開始寫程式之前，我們需要安裝 IDE（專門用來寫程式的工具），然後創建第一個專案。

有很多 IDE 可以選擇來學習 web 開發。它們幾乎都差不多，因為你的程式碼最終都是在瀏覽器上執行的 😊

這裡是最受歡迎的4個：

• Visual Studio Code by Microsoft
• Intellij IDEA Community Edition
• Atom by GitHub
• WebStorm Community Edition ()

我個人偏好 WebStorm，但你可以選擇任何其他產品，差別不大。下面我會列出幾個設定 IDE 的重要步驟截圖。

5.2 下載 WebStorm

步驟 1。 要安裝 WebStorm，首先需要下載。在 Google 中搜索 WebStorm 或者直接點擊鏈接。會看到這樣一張漂亮的圖片：

步驟 2。 大膽地點擊「下載」按鈕，下載就會立即開始。如果一切順利，會看到如下訊息：

步驟 3。 系統應該會自動辨識作業系統。但如果沒有，你可以在這頁面選擇 — download WebStorm:

5.3 安裝 WebStorm

當你下載了適合的 WebStorm 版本後，需要安裝。這是幾個重要步驟：

步驟 1。 啟動安裝程式 — 應該會看到這樣的窗口：

步驟 2。 勾選幾個選項，如圖所示：

步驟 3。 無需重新啟動：

5.4 WebStorm 非商業用途

如果你將這些 IDE 用於非商業目的，比如學習，你可以免費使用。

1. 啟動 WebStorm。
2. 啟動時會出現窗口，可以選擇非商業用途選項。
3. 登入你的 JetBrains 帳戶或創建一個新的。
4. 接受「非商業用途工具箱訂閱協議」。
5. 享受開發過程。

如果你已經開始試用期或使用付費許可證激活了 IDE，仍然可以按照以下步驟轉為非商業訂閱：

1. 對於 WebStorm，進入 Help | Register 部分。
2. 在彈出的窗口中，點擊 Remove License 按鈕。
3. 選擇 Non-commercial use (非商業用途)。
4. 登入你的 JetBrains 帳戶或創建一個新的。
5. 接受「非商業用途工具箱訂閱協議」。
6. 享受開發過程。

5.5 創建第一個專案

安裝完 WebStorm 後，只需啟動並創建第一個專案。按照以下指引：

步驟 1。 啟動 WebStorm。你會看到這樣的窗口：

步驟 2。 創建新專案 — 點擊 New Project 按鈕。

接下來你需要：

• 為你的第一個專案選擇名字。
• 指定你的第一個專案的文件夾（Location 欄位）。如果 WebStorm 預設提供了 Admin 文件夾，最好更改，這樣以後問題會更少。

我這樣設置的：

步驟 3。 如果你做得正確，會看到這樣的畫面：