Chạy JavaScript trong Visual Studio Code

Có cách nào để thực thi JavaScript và hiển thị kết quả bằng Visual Studio Code không?

Ví dụ: tệp tập lệnh chứa:

console.log('hello world');

Tôi giả sử rằng Node.js sẽ cần thiết nhưng không thể tìm ra cách thực hiện?

Theo Visual Studio Code, ý tôi là Trình chỉnh sửa mã mới từ Microsoft - Không phải mã được viết bằng Visual Studio.

Giải pháp này dự định chạy tệp hiện đang mở trong nút và hiển thị đầu ra trong VSCode.

Tôi đã có cùng một câu hỏi và thấy mới được giới thiệu taskshữu ích cho trường hợp sử dụng cụ thể này. Đó là một chút rắc rối, nhưng đây là những gì tôi đã làm:

Tạo một .vscodethư mục trong thư mục gốc của dự án của bạn và tạo một tasks.jsontệp trong đó. Thêm định nghĩa nhiệm vụ này vào tệp:

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

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

Sau đó, bạn có thể: press F1 > type `run task` > enter > select `runFile` > enter để chạy tác vụ của mình, nhưng tôi thấy việc thêm ràng buộc khóa tùy chỉnh để mở danh sách tác vụ dễ dàng hơn.

Để thêm liên kết khóa, trong menu UI VSCode, hãy đi 'Mã'> 'Tùy chọn'> 'Phím tắt'. Thêm phần này vào các phím tắt trên bàn phím của bạn:

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

Tất nhiên bạn có thể chọn bất cứ điều gì bạn muốn làm tổ hợp phím.

CẬP NHẬT:

Giả sử bạn đang chạy các mã JavaScript để kiểm tra nó, bạn có thể đánh dấu nhiệm vụ của bạn như một bài kiểm tra nhiệm vụ bằng cách thiết lập của nó isTestCommandsở hữu đến truevà sau đó bạn có thể ràng buộc một chìa khóa để các workbench.action.tasks.testlệnh cho một invocation single-action.

Nói cách khác, tasks.jsontập tin của bạn bây giờ sẽ chứa:

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

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

... và keybindings.jsontập tin của bạn bây giờ sẽ chứa:

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

Có một cách dễ dàng hơn để chạy JavaScript, không cần cấu hình:

1. Cài đặt tiện ích mở rộng mã chạy
2. Mở tệp mã JavaScript trong Trình soạn thảo văn bản, sau đó sử dụng phím tắt Control+ Alt+ N(hoặc ⌃ Control+ ⌥ Option+ Ntrên macOS) hoặc nhấn F1và sau đó chọn / gõ Run Code, mã sẽ chạy và đầu ra sẽ được hiển thị trong Cửa sổ đầu ra.

Ngoài ra, bạn có thể chọn một phần mã JavaScript và chạy đoạn mã. Tiện ích mở rộng cũng hoạt động với các tệp chưa được lưu, vì vậy bạn chỉ cần tạo tệp, thay đổi tệp thành Javascript và viết mã nhanh (khi bạn chỉ cần thử một cái gì đó nhanh chóng). Rât thuận tiện!

Tôi ngạc nhiên điều này chưa được đề cập:

Chỉ cần mở .jstệp được đề cập trong Mã VS, chuyển sang tab 'Bảng điều khiển gỡ lỗi', nhấn nút gỡ lỗi trong thanh điều hướng bên trái và nhấp vào biểu tượng chạy (nút phát)!

Yêu cầu nodejs được cài đặt!

Đây là cách nhanh nhất cho bạn theo ý kiến ​​của tôi;

• Mở thiết bị đầu cuối tích hợp trên mã studio trực quan ( View > Integrated Terminal)
• kiểu 'node filename.js'
• nhấn nút Enter

lưu ý : yêu cầu thiết lập nút. (nếu bạn có một homebrew, chỉ cần gõ 'nút cài đặt bia' trên thiết bị đầu cuối)

lưu ý 2 : homebrew và nút rất được khuyến khích nếu bạn chưa có.

chúc một ngày tốt lành.

Phím tắt cho thiết bị đầu cuối tích hợp là ctrl+ `, sau đó gõ node <filename>.

Ngoài ra, bạn có thể tạo một nhiệm vụ. Đây là mã duy nhất trong task.json của tôi:

{
// 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"
}

Từ đây tạo một lối tắt. Đây là keybindings.json của tôi:

// 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"
}
]

Điều này sẽ mở 'run' trong Command Pallete, nhưng bạn vẫn phải gõ hoặc chọn bằng chuột tác vụ bạn muốn chạy, trong trường hợp này là nút. Phím tắt thứ hai bật tắt bảng đầu ra, đã có một phím tắt cho nó nhưng các phím này nằm cạnh nhau và dễ thao tác hơn.

Chà, để đơn giản chạy mã và hiển thị đầu ra trên bàn điều khiển, bạn có thể tạo một tác vụ và thực thi nó, gần như @canerbalci đề cập.

Nhược điểm của việc này là bạn sẽ chỉ nhận được đầu ra và đó là nó.

Điều tôi thực sự muốn làm là có thể gỡ lỗi mã, giả sử tôi đang cố gắng giải một thuật toán nhỏ hoặc thử một tính năng ES6 mới, và tôi chạy nó và có một cái gì đó khó hiểu với nó, tôi có thể gỡ lỗi nó trong VSC.

Vì vậy, thay vì tạo một tác vụ cho nó, tôi đã sửa đổi tệp .vscode / launch.json trong thư mục này như sau:

{
"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
    }
]
}

Điều này làm là nó sẽ khởi chạy bất kỳ tệp nào bạn đang sử dụng, trong trình gỡ lỗi của VSC. Nó được thiết lập để dừng lại khi bắt đầu.

Để khởi chạy nó, nhấn phím F5, trong tệp bạn muốn gỡ lỗi.

Tôi đã đối mặt với vấn đề chính xác này, khi tôi lần đầu tiên bắt đầu sử dụng Mã VS với phần mở rộngCode Runner

Những việc bạn cần làm là đặt đường dẫn node.js trong Cài đặt người dùng

Bạn cần đặt Đường dẫn khi bạn Cài đặt nó trong Windows Machine.

Đối với tôi đó là \"C:\\Program Files\\nodejs\\node.exe\"

Vì tôi có một khoảng trống trong Tên thư mục tệp của tôi

Xem hình ảnh này dưới đây. Tôi đã không chạy được mã lúc đầu vì tôi đã mắc lỗi trong Tên đường dẫn

Hy vọng điều này sẽ giúp bạn.

Và dĩ nhiên, Câu hỏi của bạn đã giúp tôi, vì tôi cũng đến đây để nhận trợ giúp để chạy JStrong MÃ VS của tôi

Thực hiện theo các bước sau trong mã VS. [Thực hiện trong windows os]

1. Tạo tập tin mới

2. Viết mã javascript trong đó

3. Lưu tệp dưới dạng filename.js

4. Chuyển đến trình đơn gỡ lỗi

5. Nhấp vào Bắt đầu gỡ lỗi

6. hoặc chỉ cần nhấn F5

ảnh chụp màn hình bắt đầu gỡ lỗi

ảnh chụp màn hình đầu ra của mã js trong terminal

Tôi đã sử dụng Node Exec, không cần cấu hình, xây dựng tệp mà bạn hiện đang kết thúc hoặc những gì đã được chọn và đầu ra bên trong VSCode.

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

Với một chút cấu hình, bạn có thể thêm Babel để thực hiện một số thao tác chuyển mã.

Rất đơn giản, khi bạn tạo một tệp mới trong VS Code và chạy nó, nếu bạn chưa có tệp cấu hình, nó sẽ tạo một tệp cho bạn, điều duy nhất bạn cần thiết lập là giá trị "chương trình" và đặt nó đến đường dẫn của tệp JS chính của bạn, trông như thế này:

{
    "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
        }
    ]
}

Không cần thiết lập môi trường để chạy mã trên javascript, python, v.v. nút chạy hiện diện ở góc trên bên phải.

Điều này bây giờ có thể là dễ nhất, kể từ v1.32:

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

Sử dụng keybinding của riêng bạn.

Xem Ghi chú phát hành: sendSequence và các biến .

Với vscode v1.32, bạn có thể sendSequenceđến thiết bị đầu cuối bằng các biến như${file} , đó là tệp hiện tại. Nếu bạn muốn một số đường dẫn khác ở đó, hãy thay thế $ {file} bằng tên đường dẫn của bạn trong liên kết phím ở trên.

Đây \u000Dlà một sự trở lại vì vậy nó sẽ chạy ngay lập tức.

Tôi đã thêm 's xung quanh ${file}biến trong trường hợp đường dẫn tệp của bạn có khoảng trắng trong đó, nhưc:Users\Some Directory\fileToRun

Tôi sẽ đề nghị bạn sử dụng một plugin đơn giản và dễ dàng được gọi là Quokka rất phổ biến hiện nay và giúp bạn gỡ lỗi mã của mình khi đang di chuyển. Quokka.js . Một lợi thế lớn nhất khi sử dụng plugin này là bạn tiết kiệm rất nhiều thời gian để truy cập trình duyệt web và đánh giá mã của bạn, với sự trợ giúp này, bạn có thể thấy mọi thứ xảy ra trong mã VS, giúp tiết kiệm rất nhiều thời gian.

Có nhiều cách để chạy javascript trong Visual Studio Code.

Nếu bạn sử dụng Node, thì tôi khuyên bạn nên sử dụng trình gỡ lỗi tiêu chuẩn trong VSC.

Tôi thường tạo một tệp giả, như test.js nơi tôi thực hiện các kiểm tra bên ngoài.

Trong thư mục nơi bạn có mã của mình, bạn tạo một thư mục có tên ".vscode" và tạo một tệp có tên là "launch.json"

Trong tập tin này, bạn dán sau đây và lưu. Bây giờ bạn có hai tùy chọn để kiểm tra mã của bạn.

Khi bạn chọn "Tệp thử nghiệm Nodemon", bạn cần đặt mã của mình để kiểm tra trong test.js.

Để cài đặt gật đầu và biết thêm thông tin về cách gỡ lỗi bằng nút trong VSC, tôi khuyên bạn nên đọc bài viết này , phần này giải thích chi tiết hơn phần thứ hai trên tệp launch.json và cách gỡ lỗi trong 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",
        },
    ]
}

Một tùy chọn khác là sử dụng bảng điều khiển công cụ dành cho nhà phát triển trong Visual Studio Code. Chỉ cần chọn "Chuyển đổi công cụ dành cho nhà phát triển" từ menu trợ giúp và sau đó chọn tab "Bảng điều khiển" trong công cụ dành cho nhà phát triển bật lên. Từ đó bạn có các công cụ dev tương tự REPL mà bạn có trong Chrome.

Đối với windows : chỉ cần thay đổi liên kết .jstệp của tệp thànhnode.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".

Một cách khác là mở thiết bị đầu cuối ctrl + ` thực thi node. Bây giờ bạn có một nút REPL hoạt động. Bây giờ bạn có thể gửi tệp của bạn hoặc văn bản được chọn đến thiết bị đầu cuối. Để thực hiện điều đó, hãy mở lệnh VSCode pallete ( F1 hoặc ctrl + shift + p ) và thực thi >run selected text in active terminalhoặc >run active file in active terminal.

Nếu bạn cần REPL sạch trước khi thực thi mã của mình, bạn sẽ phải khởi động lại nút REPL. Điều này được thực hiện khi trong Terminal có nút REPL ctrl+c ctrl+cđể thoát nó và gõ nodeđể bắt đầu mới.

Bạn có thể khóa có thể ràng buộc các lệnh pallete lệnh với bất kỳ khóa nào bạn muốn.

PS: nodenên được cài đặt và trong đường dẫn của bạn

Chỉ cần cài đặt gật đầu và chạy

nodemon your_file.js

trên vs thiết bị đầu cuối mã.