快捷導(dǎo)航

VS?Code中搭建JavaScript運行環(huán)境超詳細過程

更新時間：2025年04月11日 10:33:19 作者：qb2444713315

這篇文章主要介紹了JavaScript從瀏覽器到服務(wù)端的演變,以及如何在VSCode中安裝和配置Node.js和相關(guān)插件來運行JavaScript代碼,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

JavaScript最早是運行在瀏覽器中，主要是作為瀏覽器客戶端設(shè)計語言使用，node.js的出現(xiàn)使javascript可以用于服務(wù)端編程，也即不需要非得和html前端頁面進行綁定使用，而是作為一種像java一樣的后端語言使用，極大地提高了JavaScript語言的使用范圍。

在學(xué)習JavaScript語言的過程中，可以用vs code作為其編譯器對JavaScript進行編譯和運行，vs code中JavaScript環(huán)境搭建過程如下：

1.首先需要下載node.js，官方下載地址：https://nodejs.org/ ，node.js類似于java中的jre，為JavaScript編譯運行提供基礎(chǔ)環(huán)境，可以選擇LTS（Long Term Support）版本或當前版本進行安裝。LTS 版本通常是最穩(wěn)定和推薦的版本。選擇LTS版本并點擊下載。

2.下載完成后，按照安裝向?qū)Р襟E進行安裝，安裝完成后自動配置好Node.js環(huán)境變量，不需要自己手動到環(huán)境變量中配置，較java中環(huán)境變量配置簡單，java中需要自己手動配置jdk、jre位置。安裝完成后，打開命令行工具或在vs code的終端運行 node --version或 node -v命令，即可查看node.js的版本號，判斷node.js是否安裝成功。

3.打開vs code，安裝兩個插件，分別是Live Server和Code Runner，其中Live Server可以支持在vs code中構(gòu)建輕量級web服務(wù)器，運行html前端代碼，Code Runner支持一鍵運行JavaScript代碼。

4.在vs code中創(chuàng)建一個JavaScript文件demo.js，輸入代碼 console.log("hello,world!");

點擊右上角運行，或在終端輸入node demo.js，運行程序，可在終端獲得輸出結(jié)果。

5.在vs code中新建一個html文件，命名為demo.html，在其中寫入代碼

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>演示代碼</title> 
</head>
<body>

<p>創(chuàng)建 JavaScript 對象。</p>
<p id="demo"></p>
<script>
var person = {
    Name : "張三",
    age       : 50,
    eyeColor  : "黑色"
};
document.getElementById("demo").innerHTML =
	person.Name + " 現(xiàn)在 " + person.age + " 歲。";
</script>

</body>
</html>

右鍵文件名，選擇“Open with live Server”，即可在瀏覽器中獲得演示效果。