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)境
因?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)境變量，非常簡(jiǎ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)容。
13、又或者右鍵index.js文件點(diǎn)擊 Run Code 選項(xiàng)，然后會(huì)在VS Code中打開終端窗口并同樣輸出 Hello JavaScript 內(nèi)容。
14、至此，VS Code搭建JavaScript環(huán)境大功告成，接下來開始入坑JavaScript語言了！！
總結(jié)
到此這篇關(guān)于VS Code中JavaScript環(huán)境搭建配置的文章就介紹到這了,更多相關(guān)VS Code中JS環(huán)境配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript CSS 通用循環(huán)滾動(dòng)條
核心是 position:relative;，才能讓其內(nèi)部的 ul 以絕對(duì)定位，通過改變 top 值實(shí)現(xiàn)向上移位置。2009-10-10
這篇文章主要介紹了詳解如何在微信小程序中愉快地使用sass，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
近期在做微信小程序時(shí)，涉及到了小程序的支付和退款流程，所以也大概的將這方面的東西看了一個(gè)遍，就在這篇文章里總結(jié)一下2017-11-11
這篇文章主要介紹了javascript手工制作懸浮菜單，主要也是想自己練練手，感覺還不錯(cuò)，這里推薦給大家。2015-02-02
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本篇文章主要介紹了詳解JS獲取HTML DOM元素的8種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
返回上一頁并刷新在此功能有利于用戶的體驗(yàn),是每一個(gè)web開發(fā)人員所必備的一項(xiàng)，長話短說，今天介紹實(shí)現(xiàn)此功能的一個(gè)方法，需要了解的朋友可以參考下2012-12-12
BootStrap Datepicker 插件修改為默認(rèn)中文的實(shí)現(xiàn)方法
bootstrap-datepicker 是一個(gè)非常優(yōu)秀的時(shí)間選擇插件，默認(rèn)是英文顯示日期的，通過下面幾個(gè)小修改讓其支持默認(rèn)中文。下面通過本文給大家介紹BootStrap Datepicker 插件修改為默認(rèn)中文的實(shí)現(xiàn)方法，一起看看吧2017-02-02
javascript實(shí)例--教你實(shí)現(xiàn)撲克牌洗牌功能
我們一般都會(huì)按照順序把隨機(jī)摸過來的牌從小到大的順序在手上理整齊（記得小時(shí)候打牌兩副牌手都抓不過來），這篇隨筆就是想通過實(shí)現(xiàn)這個(gè)功能來熟悉下js中排序數(shù)組等相關(guān)知識(shí)。2014-05-05