如何設定 JavaScript 開發環境-js教程-PHP中文網

如何設定 JavaScript 開發環境

Barbara Streisand

發布： 2024-10-22 20:00:44

原創

872 人瀏覽過

第 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。它應該看起來像這樣：

How to Set Up Your JavaScript Development Environment

（這是 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>

登入後複製