手把手教你VSCode配置JavaScript基于Node.js的調(diào)試環(huán)境
一、安裝VSCode和Node.js
前言：做科研之后確實(shí)很少會(huì)總結(jié)積累，可能是科研中出現(xiàn)的問(wèn)題的解決方法比較多樣靈活，別說(shuō)了其實(shí)就是偷懶哈哈哈哈哈。這不又要做前端才又開(kāi)始寫博客記錄環(huán)境配置了。行了不說(shuō)廢話了趕緊開(kāi)始正文。
再啰嗦一句，本文配置的環(huán)境主要針對(duì)單獨(dú)JS文件的斷點(diǎn)調(diào)試，主要是為了調(diào)試LeetCode里面的代碼。
本人環(huán)境：
- Visual Studio Code 1.66.0
- Node.js 16.14.2
- Windows10 64位
VScode的下載就不多說(shuō)了，主要記錄一下Node的安裝（其實(shí)以前安裝過(guò)好多遍）。
首先去官網(wǎng)下載對(duì)應(yīng)的版本：https://nodejs.org/en/
開(kāi)始安裝，可以自定義選擇安裝路徑。
這里選擇Add Path，系統(tǒng)變量會(huì)自動(dòng)設(shè)置，但是用戶變量并沒(méi)有自動(dòng)設(shè)置，需要的話可以自己手動(dòng)加一下。
測(cè)試是否安裝成功，在命令行輸入node -v和npm -v，如果能顯示出版本號(hào)說(shuō)明安裝成功，且已經(jīng)有了正確的環(huán)境變量。
用戶變量嘛最好也手動(dòng)自己添加一個(gè)比較穩(wěn)妥，因?yàn)槲抑皼](méi)有加，有時(shí)候在VSCode中會(huì)出現(xiàn)node.js找不到路徑的情況，雖然重啟會(huì)解決問(wèn)題，但是彈了兩次我總覺(jué)得還有些不對(duì)勁，所以就還是加了一下，大家在安裝的時(shí)候最好提前加一下。
到這里，Node.js安裝完成
二、VSCode配置
先在VSCode里面安裝兩個(gè)插件，一個(gè)是負(fù)責(zé)運(yùn)行的Code Runner，一個(gè)是JS的語(yǔ)法提示JavaScript(ES6) code snippets。
創(chuàng)建配置文件，打開(kāi)你的代碼文件夾，先隨便創(chuàng)建一個(gè)test.js，隨便寫幾句測(cè)試代碼。然后點(diǎn)擊左邊側(cè)邊欄的調(diào)試工具，選擇創(chuàng)建launch.json文件。
選擇node.js調(diào)試環(huán)境，測(cè)試代碼也可以用圖里面的。
此時(shí)配置文件會(huì)自動(dòng)生成，注意重點(diǎn)要修改一個(gè)地方，這里不要寫死。將program屬性改成${file}，這樣可以識(shí)別當(dāng)前調(diào)試的文件，不需要每次都在這里更換文件名，調(diào)試哪個(gè)文件直接F5就OK。
到這里，其實(shí)就配置好了，此時(shí)的文件結(jié)構(gòu)是這樣的，可以直接在test.js文件打上斷點(diǎn)，按F5進(jìn)行調(diào)試
三、可能出現(xiàn)的問(wèn)題
如果配置完成之后啟動(dòng)調(diào)試VSCode報(bào)錯(cuò)：無(wú)法在Path上找到可運(yùn)行的Node時(shí)，重啟VSCode再進(jìn)行調(diào)試就沒(méi)問(wèn)題了。
一點(diǎn)小感慨：為了今年的秋招工作，前端的學(xué)習(xí)之路又開(kāi)始了。工欲善其事，必先利其器，所以又要開(kāi)始寫配置環(huán)境的博客，不出所料的話下一篇要在VSCode里面配置Vue。以前在實(shí)習(xí)的時(shí)候?qū)懥艘黄猙anlakeji的也不太好，現(xiàn)在又重新走了一遍搞個(gè)完整的。既然選擇做技術(shù)了就得踏踏實(shí)實(shí)的做下去，不能愛(ài)一行干一行就得干一行盡量愛(ài)一行，沖！
總結(jié)
到此這篇關(guān)于手把手教你VSCode配置JavaScript基于Node.js的調(diào)試環(huán)境的文章就介紹到這了,更多相關(guān)VSCode配置JS的調(diào)試環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Node.js獲取電腦配置信息的實(shí)現(xiàn)方法(CPU型號(hào)、內(nèi)存大小、磁盤類型等)
在日常的開(kāi)發(fā)工作中,我們有時(shí)需要了解電腦的硬件配置,比如CPU型號(hào)、內(nèi)存大小、磁盤類型等,這些信息對(duì)于性能優(yōu)化、系統(tǒng)配置等場(chǎng)景非常重要,今天,我們就來(lái)聊聊如何用Node.js輕松獲取這些信息,感興趣的小伙伴跟著小編一起來(lái)看看吧2025-04-04
Nodejs值得收集的代碼片段，大家可以收藏起來(lái)，運(yùn)用到之后的工作中，感興趣的小伙伴們可以參考一下2016-02-02
本文主要闡述如何在 Express 中使用錯(cuò)誤處理中間件（error-handling middleware）來(lái)高效處理異步錯(cuò)誤。在 Github 上有對(duì)應(yīng) 代碼實(shí)例 可供參考。2017-03-03
快速刪除 node_modules 目錄的集中方法(多種方法)
本文介紹了三種快速刪除node_modules目錄的方法：使用rimraf工具、通過(guò)npx運(yùn)行rimraf以及在Windows命令提示符中使用del命令,每種方法都適合不同的操作系統(tǒng)和使用場(chǎng)景2024-11-11
這篇文章主要介紹了Node.js 在本地生成日志文件的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
node.js中的path.delimiter方法使用說(shuō)明
這篇文章主要介紹了node.js中的path.delimiter方法使用說(shuō)明,本文介紹了path.delimiter的方法說(shuō)明、語(yǔ)法、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Node.js是一個(gè)軟件平臺(tái)，通常用于構(gòu)建大規(guī)模的服務(wù)器端應(yīng)用。Node.js使用JavaScript作為其腳本語(yǔ)言，由于其非阻塞I/O設(shè)計(jì)以及單線程事件循環(huán)機(jī)制，使得它可以交付超高的性能。2014-07-07
yarn?install命令報(bào)錯(cuò)warning?package-lock.json?found解決辦法
這篇文章主要給大家介紹了關(guān)于yarn?install命令報(bào)錯(cuò)warning?package-lock.json?found的解決辦法,文中通過(guò)圖文將解決的辦法介紹的非常詳細(xì),還分享了更多yarn install遇到的報(bào)錯(cuò)及解決方案,需要的朋友可以參考下2024-02-02
Node.js 服務(wù)器端應(yīng)用開(kāi)發(fā)框架 -- Hapi.js
Hapi.js 是一個(gè)用來(lái)構(gòu)建基于 Node.js 的應(yīng)用和服務(wù)的富框架，使得開(kāi)發(fā)者把重點(diǎn)放在便攜可重用的應(yīng)用邏輯而不是構(gòu)建架構(gòu)。內(nèi)建輸入驗(yàn)證、緩存、認(rèn)證和其他 Web 應(yīng)用開(kāi)發(fā)常用的功能。2014-07-07
這篇文章主要介紹了NodeJS中配置請(qǐng)求代理服務(wù)器方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10