01. 起因

由于不是經(jīng)常寫前端JS代碼，不想單獨(dú)安裝一個(gè)IDE，如WebStorm等，就在VSCODE中配置一個(gè)可以運(yùn)行JS代碼的環(huán)境吧！

這樣使用VSCode即可以寫前端代碼，也可以寫C++代碼，還可以寫Python代碼，真不錯(cuò)！??！

02. 下載安裝VSCODE

下載地址：https://code.visualstudio.com/

至于安裝就不啰嗦了，根據(jù)提示安裝即可

03. 方式一：使用Node.js做為解釋器運(yùn)行JS代碼

Node.js的安裝和配置

Node.js的下載：

Node.js官網(wǎng)下載地址：https://nodejs.org/en/download/

通過(guò)上面的鏈接下載Node.js無(wú)腦安裝：除了需要修改安裝路徑，其他都是下一步，環(huán)境變量也會(huì)自動(dòng)配置

測(cè)試nodejs是否安裝成功：

cmd下輸入：node -v，查看是否能夠正常打印出版本號(hào)cmd下輸入：npm -v，查看是否能夠正常打印出版本號(hào)注：安裝node之后會(huì)自帶npm

配置Node.js：需要配置兩個(gè)地方

通過(guò)npm安裝的包的存儲(chǔ)位置（路徑）：配置文件中的 nodejs prefixnode緩存位置（路徑）：配置文件中的 cache（緩存）路徑

nodejs安裝好之后，通過(guò)npm下載全局模塊默認(rèn)安裝到：C:\Users\username\AppData\Roaming\npm下，一般我們不想把東西存到C盤里面的，我們進(jìn)行如下設(shè)置，把通過(guò)npm安裝的文件依賴全部都放到我們自己想放的地方，便于管理。

1、在nodejs安裝路徑下，新建node_global和node_cache兩個(gè)文件夾

2、設(shè)置node_global和node_cache

設(shè)置緩存文件夾

npm config set cache "E:\NodeJs\node_cache"

設(shè)置通過(guò)npm安裝的包的存放路徑

npm config set prefix "E:\NodeJs\node_global"

注意：設(shè)置成功后，之后用命令npm install XXX -g（全局安裝），安裝以后模塊就在E:\NodeJs\node_global里

更多關(guān)于Node.js的配置參考這篇博文：https://blog.csdn.net/weixin_45583303/article/details/111354653

在VSCODE中配置Node.js

建立一個(gè)文件夾（如：demo），在文件夾中建立一個(gè)js文件（如demo.js），使用VSCODE打開該文件夾，然后按下圖操作：

編寫好JS文件之后，按F5就能直接在控制臺(tái)查看運(yùn)行結(jié)果了

04. 方式二：使用VSCODE插件Code Runner運(yùn)行JS代碼

安裝插件

打開VSCODE：

使用

安裝了 Code Runer之后，重啟VSCODE，選中要運(yùn)行的JS文件右鍵選擇 Run Code 運(yùn)行代碼，就可以在控制臺(tái)查看運(yùn)行結(jié)果了。

到此這篇關(guān)于VSCODE中配置JavaScript編譯環(huán)境的文章就介紹到這了,更多相關(guān)vscode 配置js編譯環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論