vscode怎麼編譯運行js代碼（vscode如何運行js）

本文目錄一覽：

• 1、vscode怎麼運行javascript
• 2、如何在vscode中使用nodejs
• 3、vscode怎麼運行代碼
• 4、Visual Studio Code Mac怎麼運行JavaScript
• 5、VScode如何逐步運行調試javaScript？

vscode怎麼運行javascript

1、直接按F5可以調試的方法或者點擊運行按鈕（可以直接運行html文件或者js文件）

在launch.json文件中的配置如下：

{

“version”: “0.2.0”,

“configurations”: [{

“name”: “谷歌瀏覽器”, //運行html文件，用谷歌瀏覽器打開

“type”: “chrome”,

“request”: “launch”,

“url”: “${file}”,

“sourceMaps”: true,

“webRoot”: “${workspaceRoot}”

},

{

“name”: “nodeLauch”, //單獨調試js，即可以直接運行js

“type”: “node”,

“request”: “launch”,

“program”: “${file}”, //這個配置成你要調試的文件、${file}當前打開的文件

“stopOnEntry”: false,

“args”: [],

“cwd”: “${workspaceRoot}”,

“runtimeExecutable”: null,

“runtimeArgs”: [

“–nolazy”

],

“env”: {

“NODE_ENV”: “development”

},

“console”: “internalConsole”,

“preLaunchTask”: “”,

“sourceMaps”: false,

“outDir”: null

}

]

}

2、第二種方法 Ctrl+Shift+B 快捷鍵運行html文件，在Tasks.json中配置如下：

{

“version”: “0.1.0”,

“command”: “”,

“isShellCommand”: false,

“args”: [“${file}”],

“showOutput”: “always”,

“windows”: {

“command”: “C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe”

},

“tasks”: [{

“taskName”: “webserver”,

“isBuildCommand”: true,

“showOutput”: “always”

}]

}

3、如果第二種方法，不想每次都按這個快捷鍵，請參考npm配置node服務方法：

如何在vscode中使用nodejs

一、使用Express創建項目[這兩步都在dos 模式下執行]

1,安裝全局的Express！(已安裝請忽略)

npm install -g express

2,創建項目

創建項目（創建文件夾名稱ExpressApp）

express ExpressApp

小插曲：如果你習慣了Linux下的環境，你可以在自己電腦上安裝cmder(不知道是什麼東西，請自行百度),這個命令行工具排版漂亮，不像微軟的dos 那麼枯燥!我用的是Mini版本，如果你想體驗linux下的全部功能，可以下載full版本。

3，下載第三方包

（1）cmd命令行切換到項目目錄

cd d:\nodejs\ExpressApp

（2）根據需要編輯package.json，運行如下指令安裝第三方包

npm install

在項目目錄下node_modules可見安裝好的第三方包

ExpressApp

|– node_modules

（3）運行項目

npm start

輸出如下：

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp

node ./bin/www

註：npm start指令會自動執行node ./bin/www

在瀏覽器中輸入，可訪問Express歡迎頁面

二、使用VSCode開發Nodejs

1、VSCode打開Nodejs

code d:\nodejs\ExpressAppcode.

註：在當前項目下創建ExpressApp.bat，輸入「code .」即可，下次直接此文件直接使用VSCode打開Nodejs項目

2、添加智能提示

VSCode打開Nodejs項目，默認是沒有智能提示。

（1）使用TypeScript Definition Manager(TSD)在項目中下載所需的tsd文件，VSCode中打開時有智能

全局安裝tsd（如已安裝忽略）

npm install -g tsd

下載所需的組件提示（以下載node、express、requirejs提示為例）

tsd query node –action installtsd query express –action installtsd install require

註：

①多個提示組件在query參數後可以空格分隔簡寫為tsd query node express –action install

②組件會項目目錄下添加typings文件夾

|– typings

|– node

|– express

|– require

（2）添加js文件引用的智能提示

假如在文件引用另外一個文件common.js時，文件頭添加如下

{ // See // for the documentation about the jsconfig.json format “compilerOptions”: { “target”: “es6”, “module”: “commonjs”, “allowSyntheticDefaultImports”: true }, “exclude”: [ “node_modules”, “bower_components”, “jspm_packages”, “tmp”, “temp” ]}

（小提示，如果你引入了rquire，那麼你的編輯器右下方會顯示一個「燈泡」的提示，你只要點燈泡就不用自己苦逼的寫這個配置文件了）

此配置表示代碼服從ES5標準並使用commonjs規範，發VScode下有此配置之後，可以實現在文件中對require引用js文件的智能提示。（我測試時無此配置也會有智能提示，不清楚什麼原因）

vscode怎麼運行代碼

1、通過快捷方式打開Visual Studio Code工具，然後新建靜態頁面。

2、創建一個靜態頁面table.html，並添加頁面代碼，然後保存，使用瀏覽器查看。

3、點擊File菜單，選擇Open Folder，將項目導入到Visual Studio Code。

4、導入進去後，查看項目所依賴的包是否安裝，項目配置文件。

5、新建一個終端窗口，在命令行輸入npm run dev運行項目。

6、再點擊File，然後新建一個TypeScript文件ct.ts，添加對應的代碼。

7、打開一個終端窗口，查看是否安裝TypeScript插件，利用tsc命令運行文件。

Visual Studio Code Mac怎麼運行JavaScript

vscode使用task.json來配置項目的構建過程。 打開命令面板(Ctrl+Shift+P)選擇Run Build Task(Ctrl+Shift+B) 如果當前工作空間沒有task.json配置文件此時會出現提示 選擇 Configure Task Runner 自動創建task.json

VScode如何逐步運行調試javaScript？

nodejs 直接F5選擇nodejs啟動調試，網頁的js直接使用Chrome自帶的開發者工具（快捷鍵F12）調試。

調試期間F5整體運行（瀏覽器F8），F10單步調試，F11逐步調試（進方法內部）