在 Visual Studio Code 中運行 JavaScript

Question

有沒有辦法執行 JavaScript 並使用Visual Studio Code顯示結果？

例如，一個腳本文件包含：

console.log('hello world');

我假設需要 Node.js 但不知道該怎么做？

我所說的Visual Studio Code是指 Microsoft 的新代碼編輯器——不是使用 Visual Studio 編寫的代碼。

Answer 1

有一種更簡單的方式來運行 JavaScript，無需配置：

1. 安裝代碼運行器擴展
2. 在文本編輯器中打開 JavaScript 代碼文件，然后使用快捷鍵Control + Alt + N （或⌃ Control + ⌥ Option + N在 macOS 上），或按F1然后選擇/鍵入Run Code ，代碼將運行，輸出將是顯示在輸出窗口中。

此外，您可以選擇部分 JavaScript 代碼並運行代碼片段。 該擴展還適用於未保存的文件，因此您只需創建一個文件，將其更改為 Javascript 並快速編寫代碼（當您只需要快速嘗試時）。 很方便！

為此需要NodeJS，否則它將無法正常工作。

Answer 2

我很驚訝這還沒有被提及：

只需在 VS Code 中打開有問題的.js文件，切換到“調試控制台”選項卡，點擊左側導航欄中的調試按鈕，然后單擊運行圖標（播放按鈕）！

需要安裝nodejs！

Answer 3

該解決方案旨在在節點中運行當前打開的文件並在 VSCode 中顯示輸出。

我有同樣的問題，發現新引入的tasks對這個特定用例很有用。 這有點麻煩，但這是我所做的：

在項目的根目錄中創建一個.vscode目錄，並在其中創建一個tasks.json文件。 將此任務定義添加到文件中：

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

然后你可以： press F1 > type `run task` > enter > select `runFile` > enter運行你的任務，但我發現添加自定義鍵綁定來打開任務列表更容易。

要添加鍵綁定，請在 VSCode UI 菜單中，轉到“代碼”>“首選項”>“鍵盤快捷鍵”。 將此添加到您的鍵盤快捷鍵：

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.runTask"
}

當然，您可以選擇任何您想要的組合鍵。

更新：

假設您正在運行 JavaScript 代碼來測試它，您可以通過將其isTestCommand屬性設置為true來將您的任務標記為測試任務，然后您可以將鍵綁定到workbench.action.tasks.test命令以進行單操作調用.

換句話說，您的tasks.json文件現在將包含：

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

...您的keybindings.json文件現在將包含：

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.test"
}

Answer 4

在我看來，這是你最快的方法；

• 在 Visual Studio 代碼上打開集成終端（ View > Integrated Terminal ）
• 輸入'node filename.js'
• 按回車

注意：需要節點設置。 （如果您有自制軟件，只需在終端上輸入“brew install node”）

注意 2 ：如果您還沒有，強烈推薦自制軟件和節點。

祝你今天過得愉快。

Answer 5

集成終端的快捷方式是ctrl + ` ，然后鍵入node <filename> 。

或者，您可以創建一個任務。 這是我的 tasks.json 中唯一的代碼：

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}

從這里創建一個快捷方式。 這是我的 keybindings.json：

// Place your key bindings in this file to overwrite the defaults
[
{   "key": "cmd+r",
"command": "workbench.action.tasks.runTask"
},
{   "key": "cmd+e",
"command": "workbench.action.output.toggleOutput"
}
]

這將在命令面板中打開“運行”，但您仍然必須使用鼠標鍵入或選擇要運行的任務，在本例中為節點。 第二個快捷方式切換輸出面板，已經有一個快捷方式，但這些鍵彼此相鄰並且更易於使用。

Answer 6

在 VS 代碼中按照這些步驟操作。[在 windows os 中執行]

1. 創建新文件

2. 在里面寫javascript代碼

3. 將文件另存為 filename.js

4. 轉到調試菜單

5. 點擊開始調試

6. 或者直接按 F5

開始調試的截圖

終端中js代碼輸出截圖

編輯：閱讀此文檔以了解有關 JS for VSCode 的最新配置和功能： https ://code.visualstudio.com/docs/languages/javascript

Answer 7

好吧，要簡單地運行代碼並在控制台上顯示輸出，您可以創建一個任務並執行它，就像@canerbalci 提到的那樣。

這樣做的缺點是你只會得到輸出，僅此而已。

我真正喜歡做的是能夠調試代碼，比如說我嘗試解決一個小算法或嘗試一個新的 ES6 功能，然后我運行它並且它有一些可疑的東西，我可以在 VSC 中調試它。

因此，我沒有為它創建任務，而是修改了此目錄中的 .vscode/launch.json 文件，如下所示：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${file}",
        "stopOnEntry": true,
        "args": [],
        "cwd": "${fileDirname}",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    }
]
}

它的作用是在 VSC 的調試器中啟動您當前所在的任何文件。 它設置為在啟動時停止。

要啟動它，請在要調試的文件中按 F5 鍵。

Answer 8

當我第一次開始使用帶有擴展Code Runner的VS Code時，我遇到了這個確切的問題

您需要做的是在用戶設置中設置node.js路徑

您需要在 Windows 機器中安裝路徑時設置路徑。

對我來說它是\"C:\\Program Files\\nodejs\\node.exe\"

因為我的文件目錄名稱中有一個空格

請參閱下面的這張圖片。 我一開始沒有運行代碼，因為我在路徑名中犯了一個錯誤

希望這會幫助你。

當然，你的問題幫助了我，因為我也是來這里尋求幫助在我的VS CODE中運行JS

Answer 9

["

{
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "node '${file}'\u000D" }
  }

Answer 10

我建議您使用一個名為 Quokka 的簡單易用的插件，它現在非常流行，可以幫助您隨時隨地調試代碼。 Quokka.js 。 使用此插件的一個最大優勢是您可以節省大量時間來瀏覽 Web 瀏覽器並評估您的代碼，借助它您可以看到 VS 代碼中發生的一切，從而節省大量時間。

Answer 11

我使用 Node Exec，不需要配置，構建您當前正在結束的文件或曾經選擇的文件，並在 VSCode 中輸出。

https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node

通過一些配置，您也可以添加 Babel 來進行一些即時編譯。

Answer 12

只需安裝 nodemon 並運行

nodemon your_file.js

在 vs 代碼終端上。

Answer 13

如果您的機器上安裝了節點

只需在VSCODE中打開終端並輸入node yourfile.js即可

Answer 14

無需在 Visual Studio 代碼中設置在 javascript、python 等上運行代碼的環境，您只需安裝 Code Runner Extension，然后只需選擇要運行的代碼部分並點擊右上角的運行按鈕。

Answer 15

這很簡單，當您在 VS Code 中創建一個新文件並運行它時，如果您還沒有配置文件，它會為您創建一個，您唯一需要設置的是“程序”值，然后設置它到你的主 JS 文件的路徑，如下所示：

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    // ABSOLUTE paths are required for no folder workspaces.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // ABSOLUTE path to the program.
            "program": "C:\\test.js", //HERE YOU PLACE THE MAIN JS FILE
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
            "cwd": "",
            // ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": null
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

Answer 16

另一種選擇是在 Visual Studio Code 中使用開發人員工具控制台。 只需從幫助菜單中選擇“切換開發人員工具”，然后在彈出的開發人員工具中選擇“控制台”選項卡。 從那里你有你在 Chrome 中獲得的相同的開發工具 REPL。

Answer 17

對於 Windows ：只需將.js文件的文件關聯更改為node.exe

1) Take VSCode
2) Right click on the file in left pane
3) Click "Reveal in explorer" from context menu
4) Right click on the file -> Select "Open with" -> Select "Choose another program"
5) Check box "Always use this app to open .js file"
6) Click "More apps" -> "Look for another app in PC"
7) Navigate to node.js installation directory.(Default C:\Program Files\nodejs\node.exe"
8) Click "Open" and you can just see cmd flashing
9) Restart vscode and open the file -> Terminal Menu -> "Run active file".

Answer 18

在 Visual Studio Code 中運行 javascript 的方法有很多種。

如果你使用 Node，那么我推薦使用 VSC 中的標准調試器。

我通常會創建一個虛擬文件，比如我在其中進行外部測試的 test.js。

在您擁有代碼的文件夾中，創建一個名為“.vscode”的文件夾並創建一個名為“launch.json”的文件

在此文件中粘貼以下內容並保存。 現在您有兩個選項來測試您的代碼。

當您選擇“Nodemon 測試文件”時，您需要將代碼放入 test.js 中進行測試。

要安裝 nodemon 以及有關如何在 VSC 中使用 nodemon 進行調試的更多信息，我建議閱讀這篇文章，其中更詳細地解釋了 launch.json 文件的第二部分以及如何在 ExpressJS 中進行調試。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Nodemon Test File",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/test.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        },
    ]
}

Answer 19

您必須設置 Node.js 環境變量才能在 VS 代碼中運行 JavaScript 代碼。 按照這些設置並創建路徑。

--打開控制面板->系統->高級系統設置->環境變量--查找變量PATH並添加node.js文件夾路徑作為值。 通常是 C:\Program Files Nodejs;。 如果變量不存在，則創建它。 --重啟你的IDE或電腦。

如果您想知道節點可執行文件應該在您的 C:\Program Files\nodejs 文件夾中。

如果您需要檢查 PATH，您可以通過右鍵單擊文件資源管理器中的計算機或控制面板中的安全設置來查看它。 在那里選擇高級系統設置。 將打開一個對話框，其中選擇了“高級”選項卡。 底部是一個按鈕，環境變量。

Answer 20

1. 使用 npm 安裝 nodemon： npm install nodemon -g

2. 初始化節點： npm init

3. 打開 package.json 並將其更改為：

    { "name": "JavaScript", "version": "1.0.0", "description": "", "main": "{filename}.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon {filename}.js" }, "keywords": [], "author": "", "license": "ISC" }

4. 轉到終端並編寫以下命令： npm start

Answer 21

使用這個文件名tempCodeRunnerFile運行 java 文件而不被保存

public class tempCodeRunnerFile{
    public static void main(String[] args) {
        System.out.println("aaaaaa");
    }
}

Answer 22

程序

*（前言）

• 以下步驟是：
  1. 根據我的 memory，沒有嚴格測試步驟......（可能會遺漏一些東西？）
  2. 以后的版本可能會有一些不同的變化
  3. 事物的自動設置（例如：環境路徑）可能不同
  4. Win10下

運行純 js

• 1. 下載並安裝 Vscode
  2. 從官方網站下載並安裝Node.js ，例如：在G:\nodejs\node.exe
  3. 打開 Vscode -> 打開你的工作區文件夾 eg: MyTestSpace -> 創建一個新的文件調用 eg: test.js
  4. 寫一段代碼console.log('-----test-----'); 在test.js
  5. go 到Run and Debug面板 (ctrl+shift+d) > 頂部的Run drop down list > Add Config (MyTestSpace) > 應該為您自動生成launch.json
  6. > 在自動完成彈出窗口 > select Node.js: Launch Program >自動完成配置填寫 > 將program重命名為你的test.js所在的路徑
     • 你的launch.json應該看起來像這樣：

      { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/test.js", }, ], }

  7. go 回到Run drop down list > select Launch Program (MyTestSpace) > 單擊Run按鈕
  8. 在您的Debug Console中應該看到以下內容::

      G:\nodejs\node.exe.\test.js -----test-----

• 演示圖
  • 
  • 命名可能不同
    • （只是一個丑陋的演示草稿[[（只是嘗試發布一個不費吹灰之力寫的答案......）]]）
    • （忽略不必要的工作人員...）

運行js & html（簡單說說）

• 1. 有一個 eg: main.html文件，帶有<script>標簽引用test.js
  2. 在“ Run drop down list > 添加配置 > select Chrome > 自動完成launch.json > 將路徑更改為main.html
     • 例如：

      { "type": "chrome", "request": "launch", "name": "Open test.html", "file": "h:\\Book\\debug\\LXPI\\OEBPS\\lib_new2\\libNt\\crossFileHtse\\build_HighlightTypeset_ReadHtse\\test.html", },

  3. select chrome launch config > 運行 > html 在您的瀏覽器和控制台日志中打開

Answer 23

另一種方法是打開終端ctrl+`執行node 。 現在您有一個節點 REPL 處於活動狀態。 您現在可以將文件或選定的文本發送到終端。 為了做到這一點，打開 VSCode命令托盤（ F1或ctrl+shift+p ）並執行>run selected text in active terminal或>run active file in active terminal 。

如果在執行代碼之前需要一個干凈的 REPL，則必須重新啟動節點 REPL。 這是在終端中使用節點 REPL ctrl+c ctrl+c退出它並鍵入node以開始新的。

您可能可以將命令調色板命令鍵綁定到您想要的任何鍵。

PS：應該安裝node並在您的路徑中

Answer 24

只需在谷歌上搜索“Mozilla javascript 參考”。 打開第一個鏈接 (developer.mozilla)，然后打開該頁面中的任何鏈接。 它提供了“試一試”示例代碼，您可以在那里刪除並編寫和測試您自己的代碼。 簡單的。 不需要 VS 代碼:-)