快捷導(dǎo)航

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

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

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

一，環(huán)境

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

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

因?yàn)樵诳础吨貥?gòu)改善既有代碼的設(shè)計(jì)第2版》的時(shí)候，書中的代碼展示范例都是基于JavaScript的，我也從未涉及過JavaScript這門編程語言。為了讓理論與實(shí)踐并進(jìn)，必須從零開始學(xué)一下JavaScript基本語法，因?yàn)闀蟹独髽O少使用JavaScript任何復(fù)雜的特性，所以我只要對(duì)該編程語言有粗淺的了解就行，畢竟我是學(xué)C++的。

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

二，配置步驟

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

以下是詳細(xì)的步驟：

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

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

或者直接點(diǎn)擊這里下載

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

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

4、下載完成后，運(yùn)行安裝程序并按照安裝向?qū)У牟襟E完成安裝，安裝完成后會(huì)自動(dòng)配置好Node.js的環(huán)境變量，非常簡單。

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

6、打開 VS Code，安裝如下兩個(gè)插件，提高學(xué)習(xí)效率（Live Server是一個(gè)輕量級(jí)的web服務(wù)器，Code Runner用于一鍵運(yùn)行JavaScript代碼）。

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

8、然后新建一個(gè) index.html 文件，打開該文件輸入感嘆號(hào)（!）并按回車鍵，會(huì)自動(dòng)生成如下內(nèi)容。

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

10、在 <body></body> 標(biāo)簽里輸入 <h1>Hello JavaScript</h1> 內(nèi)容，然后右鍵index.html文件點(diǎn)擊 Open with Live Server 選項(xiàng)，這會(huì)在默認(rèn)瀏覽器中加載當(dāng)前文件，顯示如下頁面。

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

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