如何設定 JavaScript 開發環境
- Barbara Streisand原創
- 2024-10-22 20:00:44791瀏覽
第 2 條：如何設定 JavaScript 開發環境
簡介
現在您已經在瀏覽器控制台中編寫了第一個 JavaScript 程序，是時候設定適當的開發環境了。這將幫助您在學習課程的過程中有效地編寫和測試更複雜的程式碼。
在這篇文章中，我將指導您使用 Visual Studio Code (VS Code)（開發人員中最受歡迎的程式碼編輯器之一）來設定開發環境。
第 1 步：安裝 Visual Studio Code
Visual Studio Code (VS Code) 是一個輕量級但功能強大的程式碼編輯器。它是免費的，易於使用，並且與 JavaScript 配合良好。
安裝 VS Code 的說明：
- 下載 VS Code： 造訪官方網站並下載適合您的作業系統（Windows、macOS 或 Linux）的安裝程式。
- 安裝應用程式： 根據您的系統執行安裝步驟。通常就像雙擊下載的檔案並按照提示操作一樣簡單。
安裝後，開啟 Visual Studio Code。它應該看起來像這樣：
（這是 VS Code 介面的範例圖）
第 2 步：安裝 Node.js（可選但建議）
雖然 JavaScript 在瀏覽器中運行，但安裝 Node.js 可以讓你在瀏覽器之外運行 JavaScript，讓你的開發環境更加通用。
安裝 Node.js 的說明：
- 下載 Node.js： 造訪 Node.js 網站並下載適合您作業系統的 LTS（長期支援）版本。
- 安裝 Node.js： 按照說明進行安裝。
安裝後，開啟指令提示字元（Windows）或終端機（macOS/Linux）並輸入以下指令檢查是否安裝了Node.js：
node -v
這應該會回傳 Node.js 的版本號，確認安裝。
第 3 步：建立您的第一個 JavaScript 檔案
現在您已經安裝了 VS Code，讓我們建立您的第一個 JavaScript 檔案。
建立 JavaScript 檔案的說明：
- 開啟 VS Code。
- 建立一個新資料夾： 在您的電腦上，為您的 JavaScript 專案建立一個資料夾。您可以將其稱為“javascript-learning”。
- 在 VS Code 中開啟資料夾： 在 VS Code 中，前往 檔案 >開啟資料夾並選擇您剛剛建立的資料夾。
- 建立一個新的 JavaScript 檔案： 在左側的資源管理器面板中，按一下新檔案按鈕（或按Ctrl N）並將檔案命名為script.js。
第 4 步：在 VS Code 中編寫並執行 JavaScript
現在，讓我們在新的 script.js 檔案中寫一些基本的 JavaScript。
範例：
在 script.js 中編寫以下程式碼：
node -v
要執行此 JavaScript 文件，您有幾個選項：
選項 1：在瀏覽器中執行 JavaScript
- 在相同資料夾中建立HTML 檔案（例如index.html）。
- 新增以下基本 HTML 程式碼：
console.log("Hello, World from VS Code!");
- 在瀏覽器中開啟index.html（您可以右鍵點選該檔案並選擇使用Chrome開啟或您喜歡的瀏覽器）。
- 開啟瀏覽器控制台（F12 或 Ctrl Shift I），您應該會看到以下訊息：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
選項 2：使用 Node.js 執行 JavaScript（如果已安裝）
- 開啟指令提示字元或終端機。
- 使用 cd 指令導航到 script.js 所在的資料夾。例如：
Hello, World from VS Code!
- 執行以下命令來執行您的 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中文網其他相關文章！