如何設定 JavaScript 開發環境

第 2 條：如何設定 JavaScript 開發環境

簡介

現在您已經在瀏覽器控制台中編寫了第一個 JavaScript 程序，是時候設定適當的開發環境了。這將幫助您在學習課程的過程中有效地編寫和測試更複雜的程式碼。

在這篇文章中，我將指導您使用 Visual Studio Code (VS Code)（開發人員中最受歡迎的程式碼編輯器之一）來設定開發環境。

---

第 1 步：安裝 Visual Studio Code

Visual Studio Code (VS Code) 是一個輕量級但功能強大的程式碼編輯器。它是免費的，易於使用，並且與 JavaScript 配合良好。

安裝 VS Code 的說明：

1. 下載 VS Code： 造訪官方網站並下載適合您的作業系統（Windows、macOS 或 Linux）的安裝程式。
2. 安裝應用程式： 根據您的系統執行安裝步驟。通常就像雙擊下載的檔案並按照提示操作一樣簡單。

安裝後，開啟 Visual Studio Code。它應該看起來像這樣：

（這是 VS Code 介面的範例圖）

---

第 2 步：安裝 Node.js（可選但建議）

雖然 JavaScript 在瀏覽器中運行，但安裝 Node.js 可以讓你在瀏覽器之外運行 JavaScript，讓你的開發環境更加通用。

安裝 Node.js 的說明：

1. 下載 Node.js： 造訪 Node.js 網站並下載適合您作業系統的 LTS（長期支援）版本。
2. 安裝 Node.js： 按照說明進行安裝。

安裝後，開啟指令提示字元（Windows）或終端機（macOS/Linux）並輸入以下指令檢查是否安裝了Node.js：

node -v

這應該會回傳 Node.js 的版本號，確認安裝。

---

第 3 步：建立您的第一個 JavaScript 檔案

現在您已經安裝了 VS Code，讓我們建立您的第一個 JavaScript 檔案。

建立 JavaScript 檔案的說明：

1. 開啟 VS Code。
2. 建立一個新資料夾： 在您的電腦上，為您的 JavaScript 專案建立一個資料夾。您可以將其稱為“javascript-learning”。
3. 在 VS Code 中開啟資料夾： 在 VS Code 中，前往 檔案 >開啟資料夾並選擇您剛剛建立的資料夾。
4. 建立一個新的 JavaScript 檔案： 在左側的資源管理器面板中，按一下新檔案按鈕（或按Ctrl N）並將檔案命名為script.js。

---

第 4 步：在 VS Code 中編寫並執行 JavaScript

現在，讓我們在新的 script.js 檔案中寫一些基本的 JavaScript。

範例：

在 script.js 中編寫以下程式碼：

node -v

要執行此 JavaScript 文件，您有幾個選項：

選項 1：在瀏覽器中執行 JavaScript

1. 在相同資料夾中建立HTML 檔案（例如index.html）。
2. 新增以下基本 HTML 程式碼：

console.log("Hello, World from VS Code!");

1. 在瀏覽器中開啟index.html（您可以右鍵點選該檔案並選擇使用Chrome開啟或您喜歡的瀏覽器）。
2. 開啟瀏覽器控制台（F12 或 Ctrl Shift I），您應該會看到以下訊息：

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>


    <script src="script.js"></script>

選項 2：使用 Node.js 執行 JavaScript（如果已安裝）

1. 開啟指令提示字元或終端機。
2. 使用 cd 指令導航到 script.js 所在的資料夾。例如：

Hello, World from VS Code!

1. 執行以下命令來執行您的 JavaScript 檔案：

cd path/to/javascript-learning

您應該看到訊息：

node script.js

---

後續步驟

現在您的開發環境已經設定完畢，並且您已經在瀏覽器和 Node.js 中成功運行了 JavaScript，您已經準備好深入研究 JavaScript 程式設計了！在下一篇文章中，我們將探討JavaScript 中的變數以及如何使用它們來儲存資料。

更多精彩課程敬請期待！

---

專業提示：

熟悉 VS Code 後，您可以透過安裝用於程式碼檢查的 ESLint 和用於在進行變更時自動重新載入瀏覽器的 Live Server 等擴充功能來增強工作流程。

---

參觀我的網站 - Ridoy hasan 作品集
參觀我的 LinkedIn 個人資料 - Ridoy Hasan

以上是如何設定 JavaScript 開發環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！