快捷導(dǎo)航

手把手教你VSCode配置JavaScript基于Node.js的調(diào)試環(huán)境

更新時(shí)間：2022年12月27日 15:53:24 作者：Luminary_aurora

最近在補(bǔ)數(shù)據(jù)結(jié)構(gòu),在用VScode調(diào)試js代碼文件結(jié)果怎么都不行,這篇文章主要給大家介紹了關(guān)于VSCode配置JavaScript基于Node.js的調(diào)試環(huán)境的相關(guān)資料,需要的朋友可以參考下

一、安裝VSCode和Node.js

前言：做科研之后確實(shí)很少會總結(jié)積累，可能是科研中出現(xiàn)的問題的解決方法比較多樣靈活，別說了其實(shí)就是偷懶哈哈哈哈哈。這不又要做前端才又開始寫博客記錄環(huán)境配置了。行了不說廢話了趕緊開始正文。

再啰嗦一句，本文配置的環(huán)境主要針對單獨(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的下載就不多說了，主要記錄一下Node的安裝（其實(shí)以前安裝過好多遍）。

首先去官網(wǎng)下載對應(yīng)的版本：https://nodejs.org/en/

開始安裝，可以自定義選擇安裝路徑。

這里選擇Add Path，系統(tǒng)變量會自動設(shè)置，但是用戶變量并沒有自動設(shè)置，需要的話可以自己手動加一下。

測試是否安裝成功，在命令行輸入node -v和npm -v，如果能顯示出版本號說明安裝成功，且已經(jīng)有了正確的環(huán)境變量。

用戶變量嘛最好也手動自己添加一個(gè)比較穩(wěn)妥，因?yàn)槲抑皼]有加，有時(shí)候在VSCode中會出現(xiàn)node.js找不到路徑的情況，雖然重啟會解決問題，但是彈了兩次我總覺得還有些不對勁，所以就還是加了一下，大家在安裝的時(shí)候最好提前加一下。

到這里，Node.js安裝完成

二、VSCode配置

先在VSCode里面安裝兩個(gè)插件，一個(gè)是負(fù)責(zé)運(yùn)行的Code Runner，一個(gè)是JS的語法提示JavaScript(ES6) code snippets。

創(chuàng)建配置文件，打開你的代碼文件夾，先隨便創(chuàng)建一個(gè)test.js，隨便寫幾句測試代碼。然后點(diǎn)擊左邊側(cè)邊欄的調(diào)試工具，選擇創(chuàng)建launch.json文件。

選擇node.js調(diào)試環(huán)境，測試代碼也可以用圖里面的。

此時(shí)配置文件會自動生成，注意重點(diǎn)要修改一個(gè)地方，這里不要寫死。將program屬性改成${file}，這樣可以識別當(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)的問題

如果配置完成之后啟動調(diào)試VSCode報(bào)錯(cuò)：無法在Path上找到可運(yùn)行的Node時(shí)，重啟VSCode再進(jìn)行調(diào)試就沒問題了。

一點(diǎn)小感慨：為了今年的秋招工作，前端的學(xué)習(xí)之路又開始了。工欲善其事，必先利其器，所以又要開始寫配置環(huán)境的博客，不出所料的話下一篇要在VSCode里面配置Vue。以前在實(shí)習(xí)的時(shí)候?qū)懥艘黄猙anlakeji的也不太好，現(xiàn)在又重新走了一遍搞個(gè)完整的。既然選擇做技術(shù)了就得踏踏實(shí)實(shí)的做下去，不能愛一行干一行就得干一行盡量愛一行，沖！

總結(jié)

到此這篇關(guān)于手把手教你VSCode配置JavaScript基于Node.js的調(diào)試環(huán)境的文章就介紹到這了,更多相關(guān)VSCode配置JS的調(diào)試環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: