VS?Code中JavaScript環(huán)境搭建配置全過程

更新時間：2024年02月27日 10:43:18 作者：拉伊卜

node.js大部分基本模塊都用JavaScript語言編寫,JavaScript最早是運行在瀏覽器中,通常作為客戶端程序設計語言使用,node.js的出現(xiàn)使JavaScript也能用于服務端編程,這篇文章主要給大家介紹了關于VS?Code中JavaScript環(huán)境搭建配置的相關資料,需要的朋友可以參考下

一，環(huán)境

Windows 11 家庭中文版，64 位操作系統(tǒng), 基于 x64 的處理器
VS Code 版本: 1.83.1 (user setup)
Node.js 版本：20.9.0

二，為什么搭建JavaScript環(huán)境

因為在看《重構改善既有代碼的設計第2版》的時候，書中的代碼展示范例都是基于JavaScript的，我也從未涉及過JavaScript這門編程語言。為了讓理論與實踐并進，必須從零開始學一下JavaScript基本語法，因為書中范例要求極少使用JavaScript任何復雜的特性，所以我只要對該編程語言有粗淺的了解就行，畢竟我是學C++的。

首當其沖便是先配置好JavaScript的運行環(huán)境，為學習JavaScript的基本語法創(chuàng)造前提條件，然后循序漸進學習《重構改善既有代碼的設計第2版》，因為這本書對IT從業(yè)者來說很重要！??！

二，配置步驟

在 Visual Studio Code (VS Code) 中配置 JavaScript 運行環(huán)境通常涉及安裝 Node.js，以便在編輯器中運行 JavaScript 代碼。

以下是詳細的步驟：

1、打開瀏覽器，前往 Node.js 官方網站：https://nodejs.org/

2、這會看到兩個版本：LTS（Long Term Support）版本和當前版本。LTS 版本通常是最穩(wěn)定和推薦的版本。選擇LTS版本并點擊下載。

或者直接點擊這里下載

3、然后根據(jù)操作系統(tǒng)選擇下載相應的安裝程序：

對于 Windows，可以選擇 ".msi" 安裝程序。
對于 macOS，可以選擇 ".pkg" 安裝程序。
對于 Linux，可以選擇合適的包管理器或二進制文件。

4、下載完成后，運行安裝程序并按照安裝向導的步驟完成安裝，安裝完成后會自動配置好Node.js的環(huán)境變量，非常簡單。

5、打開命令行工具，輸入：node --version 或者 node -v 命令，驗證 Node.js 是否成功安裝（輸出 Node.js 的版本號）。

6、打開 VS Code，安裝如下兩個插件，提高學習效率（Live Server是一個輕量級的web服務器，Code Runner用于一鍵運行JavaScript代碼）。

7、創(chuàng)建一個用于保存 JavaScript 工程的文件夾或打開一個已存在的文件夾（D:\Files\IT_Data\VsCode_Project\JavaScript_Project）。

8、然后新建一個 index.html 文件，打開該文件輸入感嘆號（!）并按回車鍵，會自動生成如下內容。

9、上圖中的這些HTML代碼內容并不是學習的主題，所以不用在乎這些細節(jié)，但是要使用這些HTML代碼作為JavaScript代碼的容器，以幫助我去學習JavaScript這門編程語言，進而理解《重構改善既有代碼的設計第2版》書中的代碼展示范例。

10、在 <body></body> 標簽里輸入 <h1>Hello JavaScript</h1> 內容，然后右鍵index.html文件點擊 Open with Live Server 選項，這會在默認瀏覽器中加載當前文件，顯示如下頁面。

11、這也就說明環(huán)境配置基本成功了，然后在當前文件夾下新建一個 index.js 文件，并輸入console.log('Hello JavaScript'); 內容，開始入坑JavaScript。

12、回到 index.html 文件，在 <body></body> 標簽里輸入 <script src="index.js"></script> 內容，這會讓瀏覽器加載 index.js 文件中的JavaScript代碼。然后回到瀏覽器中，按 F12 鍵選擇控制臺，會輸出 Hello JavaScript 內容。