快捷導(dǎo)航

VS?Code中搭建JavaScript運(yùn)行環(huán)境超詳細(xì)過(guò)程

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

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

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

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

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

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

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

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

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

5.在vs code中新建一個(gè)html文件，命名為demo.html，在其中寫(xiě)入代碼

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

<p>創(chuàng)建 JavaScript 對(duì)象。</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”，即可在瀏覽器中獲得演示效果。

總結(jié)

到此這篇關(guān)于VS Code中搭建JavaScript運(yùn)行環(huán)境的文章就介紹到這了,更多相關(guān)VSCode搭建JS運(yùn)行環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: