VSCode中運行JavaScript代碼詳解

一、安裝VSCode

VSCode是一款免費的跨平台代碼編輯器，可以支持JavaScript等多種編程語言。在開始VSCode中運行JavaScript代碼之前，需要先安裝VSCode編輯器。安裝VSCode的過程非常簡單，在官網下載對應操作系統的安裝包後，依照安裝提示操作即可。安裝完成後，我們就可以開始使用VSCode編輯器了。

二、創建JavaScript文件

在VSCode中創建一個JavaScript文件非常簡單，只需在文件夾中右鍵點擊滑鼠，選擇「新建文件」，然後命名該文件為「test.js」（這裡以「test.js」為例），保存文件即可。我們現在就可以開始編寫JavaScript代碼了。

三、在VSCode中運行JavaScript代碼

為了在VSCode中運行JavaScript代碼，有兩種方法。

1.從終端中運行JavaScript代碼

打開VSCode編輯器，按下快捷鍵Ctrl+Shift+`，即可打開終端。在終端中，進入當前參數所在的文件夾，輸入「node test.js」（test.js是你創建的JavaScript文件名）即可運行代碼。在終端中輸出的結果即為代碼運行的結果。

2.使用Code Runner運行JavaScript代碼

VSCode默認並不支持JavaScript代碼的運行，需要安裝Code Runner插件。Code Runner是一個輕量級的插件，具有便捷的使用，支持多種編程語言的運行。安裝插件方法：點擊左側菜單欄的「擴展」，在Marketplace中搜索Code Runner，按下安裝即可。

3.配置Code Runner

安裝完成Code Runner後，需要進行配置才能正常運行JavaScript代碼。在VSCode編輯器中，點擊左下角的「設置」圖標，再點擊「首選項」→「設置」→「搜索「Code-runner Executor Map”，找到「Code-runner Executor Map」，點擊「Edit in settings.json」即可打開settings.json文件。在settings.json文件中，加入以下一行代碼：”javascript”: “node”，如下圖所示。

  "code-runner.executorMap": {
        "javascript": "node"
    }

四、Code Runner使用方法

配置好Code Runner後，我們就可以開始使用它來運行JavaScript代碼了。以前面創建的JavaScript文件「test.js」為例，我們可以先編寫JS代碼：

// test.js
function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

然後按下快捷鍵Ctrl+Alt+N，即可在編輯器下方彈出一個終端，顯示輸出結果3。

五、VSCode中調試JavaScript代碼

在VSCode中還可以通過調試器（Debugger）來調試JavaScript代碼，以此找出代碼中的錯誤或調試程序的運行狀態。

1.配置.vscode/launch.json文件

調試器需要配置調試環境，通常需要在項目中創建一個.vscode/launch.json文件，在該文件中指定調試配置。launch.json文件包含了啟動或附加的配置。可以選擇從下拉菜單「Run」中的「Add Configuration」選項添加配置文件模板，並修改示例配置以啟用您的應用程序或附加到進程。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug"
      ],
      "port": 9229
    }
  ]
}

2.在代碼中添加斷點

只有在代碼中添加斷點，程序才會停留在對應的代碼位置，等待我們的命令。在編輯器中單擊代碼行號，可在代碼上添加/刪除斷點。添加斷點後，右擊編輯器的當前文件並選擇「調試」，然後點擊「啟動調試」按鈕。

3.運行調試器

我們需要從運行/調試視圖中選擇「啟動調試」按鈕才能啟動VSCode調試器。選擇相應的調試配置後，即可進入調試狀態。在調試器的控制台中，可以查看所有變數的值，並且我們還可以在調試過程中執行一些自定義的JavaScript命令。

六、總結

本文主要介紹了在VSCode中運行JavaScript代碼和使用調試器調試JavaScript代碼的方法。從本文中，我們可以總結出以下幾點：

1、VSCode是一款免費的跨平台代碼編輯器，可支持多種編程語言。

2、在VSCode中創建JavaScript文件非常簡單，只需在文件夾中右鍵點擊滑鼠，選擇「新建文件」，然後命名該文件為「test.js」即可。

3、在VSCode中運行JavaScript代碼有兩種方法：從終端中運行JavaScript代碼和使用Code Runner運行JavaScript代碼。

4、如果想要使用調試器調試JavaScript代碼，需要進行詳細的配置，並在需要調試的代碼行號上添加斷點。

總的來說，VSCode是一款非常強大且靈活的開發工具，可以幫助開發人員更有效地開發和調試JavaScript代碼。