เรียกใช้ JavaScript ในรหัส Visual Studio

มีวิธีรัน JavaScript และแสดงผลลัพธ์โดยใช้Visual Studio Codeหรือไม่

ตัวอย่างเช่นไฟล์สคริปต์ที่มี:

console.log('hello world');

ฉันคิดว่าจะต้องใช้ Node.js แต่ไม่สามารถหาวิธีทำได้

โดยVisual Studio Codeฉันหมายถึง Code Editor ใหม่จาก Microsoft - ไม่ใช่รหัสที่เขียนโดยใช้ Visual Studio

วิธีการแก้ปัญหานี้มุ่งมั่นที่จะเรียกใช้ไฟล์ที่เปิดอยู่ในโหนดและแสดงผลใน 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"
}

แน่นอนคุณสามารถเลือกสิ่งที่คุณต้องการเป็นชุดค่าผสมที่สำคัญ

UPDATE:

สมมติว่าคุณกำลังเรียกใช้รหัส 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"
}

มีวิธีที่ง่ายกว่าในการเรียกใช้ JavaScript ไม่จำเป็นต้องมีการกำหนดค่า:

1. ติดตั้งส่วนขยายของCode Runner
2. เปิดไฟล์รหัส JavaScript ใน Text Editor จากนั้นใช้ทางลัดControl+ Alt+ N(หรือ⌃ Control+ ⌥ Option+ Nบน macOS) หรือกดF1จากนั้นเลือก / พิมพ์Run Codeรหัสจะทำงานและผลลัพธ์จะปรากฏในหน้าต่างผลลัพธ์

นอกจากนี้คุณสามารถเลือกส่วนหนึ่งของรหัส JavaScript และเรียกใช้ข้อมูลโค้ด ส่วนขยายยังใช้งานได้กับไฟล์ที่ไม่ได้บันทึกดังนั้นคุณสามารถสร้างไฟล์เปลี่ยนเป็น Javascript และเขียนโค้ดได้อย่างรวดเร็ว (สำหรับเมื่อคุณต้องการลองอะไรที่รวดเร็ว) สะดวกมาก!

ฉันประหลาดใจที่สิ่งนี้ยังไม่ได้กล่าวถึง:

เพียงแค่เปิด.jsไฟล์ที่เป็นปัญหาในรหัส VS สลับไปที่แท็บ 'คอนโซลการดีบัก' กดปุ่ม debug ในแถบนำทางด้านซ้ายแล้วคลิกไอคอนเรียกใช้ (ปุ่มเล่น)!

ต้องการติดตั้ง nodejs!

นี่เป็นวิธีที่เร็วที่สุดสำหรับคุณในความคิดของฉัน

• เปิดเทอร์มินัลรวมในรหัส Visual Studio ( View > Integrated Terminal)
• ชนิด 'node filename.js'
• กดปุ่มตกลง

หมายเหตุ : จำเป็นต้องมีการตั้งค่าโหนด (ถ้าคุณมี homebrew เพียงพิมพ์ 'ชงติดตั้งโหนด' บนเทอร์มินัล)

หมายเหตุ 2 : ขอแนะนำให้ใช้ homebrew และ node หากคุณยังไม่มี

ขอให้มีความสุขมาก ๆ ในวันนี้นะ

ทางลัดสำหรับขั้วแบบบูรณาการเป็นctrl+ แล้วพิมพ์`node <filename>

หรือคุณสามารถสร้างงานได้ นี่เป็นรหัสเดียวใน task.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"
}
]

สิ่งนี้จะเปิด 'รัน' ใน Command Pallete แต่คุณยังต้องพิมพ์หรือเลือกด้วยเมาส์ที่คุณต้องการเรียกใช้ในโหนดกรณีนี้ ทางลัดที่สองสลับแผงผลลัพธ์มีทางลัดอยู่แล้ว แต่ปุ่มเหล่านี้อยู่ติดกันและทำงานได้ง่ายขึ้น

เพื่อเรียกใช้โค้ดและแสดงผลลัพธ์บนคอนโซลคุณสามารถสร้างงานและเรียกใช้งานมันได้อย่างที่ @canerbalci กล่าวถึง

ข้อเสียของสิ่งนี้คือคุณจะได้รับผลลัพธ์และก็เท่านั้น

สิ่งที่ฉันชอบทำจริงๆคือการสามารถดีบักรหัสได้ให้พูดว่า Im พยายามแก้อัลกอริธึมเล็ก ๆ หรือลองใช้คุณสมบัติ 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 ในไฟล์ที่คุณต้องการแก้ปัญหา

ฉันประสบปัญหาตรงนี้เมื่อฉันเริ่มใช้VS Codeกับส่วนขยายครั้งแรกCode Runner

สิ่งที่คุณต้องทำคือตั้งค่าเส้นทางnode.jsในการตั้งค่าผู้ใช้

คุณต้องตั้งค่าPathขณะติดตั้งในเครื่อง Windows

สำหรับฉันมันเป็น \"C:\\Program Files\\nodejs\\node.exe\"

เนื่องจากฉันมีช่องว่างในชื่อไดเรกทอรีไฟล์ของฉัน

ดูภาพนี้ด้านล่าง ฉันไม่สามารถเรียกใช้รหัสได้ในตอนแรกเพราะฉันทำผิดพลาดในชื่อพา ธ

หวังว่านี่จะช่วยคุณได้

และแน่นอนคำถามของคุณช่วยฉันด้วยเพราะฉันมาที่นี่เพื่อรับความช่วยเหลือในการใช้รหัส VSJSของฉัน

ทำตามขั้นตอนเหล่านี้ในรหัส VS [ดำเนินการใน windows os]

1. สร้างไฟล์ใหม่

2. เขียนรหัสจาวาสคริปต์ในนั้น

3. บันทึกไฟล์เป็น filename.js

4. ไปที่เมนูดีบั๊ก

5. คลิกที่เริ่มการดีบัก

6. หรือเพียงแค่กด F5

สกรีนช็อตของการดีบักเริ่มต้น

สกรีนช็อตของเอาต์พุตของรหัส js ในเทอร์มินัล

ฉันใช้ Node Exec ไม่จำเป็นต้องกำหนดค่าสร้างไฟล์ที่คุณกำลังจะสิ้นสุดหรือสิ่งที่เคยได้รับเลือกและเอาท์พุทภายใน VSCode

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

ด้วยการปรับแต่งเล็กน้อยคุณสามารถเพิ่ม Babel เพื่อทำสิ่งใดสิ่งหนึ่งได้ทันทีเช่นกัน

มันง่ายมากเมื่อคุณสร้างไฟล์ใหม่ในรหัส VS และเรียกใช้ถ้าคุณยังไม่มีไฟล์กำหนดค่ามันจะสร้างไฟล์ให้คุณสิ่งเดียวที่คุณต้องติดตั้งคือค่า "โปรแกรม" และตั้งค่า ไปที่เส้นทางของไฟล์ 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
        }
    ]
}

ไม่จำเป็นต้องตั้งค่าสภาพแวดล้อมสำหรับการเรียกใช้รหัสบน javascript, python และอื่น ๆ ในรหัส visual studio สิ่งที่คุณต้องทำคือติดตั้งส่วนขยายของ Runner Runner จากนั้นเลือกส่วนของรหัสที่คุณต้องการเรียกใช้และกด มีปุ่มเรียกใช้อยู่ที่มุมขวาบน

นี่อาจเป็นวิธีที่ง่ายที่สุด ณ วันที่ v1.32:

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

ใช้การผูกกุญแจของคุณเอง

ดูโน้ตที่วางจำหน่าย: sendSequence และตัวแปร

ด้วย vscode v1.32 คุณสามารถsendSequenceไปที่เทอร์มินัลโดยใช้ตัวแปรเช่น${file}ซึ่งเป็นไฟล์ปัจจุบัน หากคุณต้องการเส้นทางอื่นที่นั่นให้แทนที่ $ {file} ด้วยชื่อพา ธ ของคุณในการโยงปุ่มด้านบน

\u000Dคือการกลับไปเพื่อให้มันจะทำงานทันที

ฉันเพิ่ม'รอบ${file}ตัวแปรในกรณีที่เส้นทางไฟล์ของคุณมีช่องว่างอยู่เช่นc:Users\Some Directory\fileToRun

ฉันขอแนะนำให้คุณใช้ปลั๊กอินที่ง่ายและสะดวกเรียกว่าเป็น Quokka ซึ่งเป็นที่นิยมมากในทุกวันนี้และช่วยให้คุณแก้ปัญหารหัสของคุณได้ในระหว่างการเดินทาง Quokka.js ข้อได้เปรียบที่ใหญ่ที่สุดข้อหนึ่งในการใช้ปลั๊กอินนี้คือคุณประหยัดเวลาในการท่องเว็บเบราว์เซอร์และประเมินโค้ดของคุณด้วยความช่วยเหลือของสิ่งนี้คุณสามารถเห็นทุกสิ่งที่เกิดขึ้นในรหัส VS ซึ่งช่วยประหยัดเวลาได้มาก

มีหลายวิธีในการเรียกใช้จาวาสคริปต์ใน Visual Studio Code

ถ้าคุณใช้ Node ฉันแนะนำให้ใช้ดีบักเกอร์มาตรฐานใน VSC

ปกติฉันจะสร้างไฟล์จำลองเช่น test.js ที่ฉันทำการทดสอบภายนอก

ในโฟลเดอร์ที่คุณมีรหัสคุณสร้างโฟลเดอร์ชื่อ ".vscode" และสร้างไฟล์ชื่อ "launch.json"

ในไฟล์นี้คุณวางต่อไปนี้และบันทึก ตอนนี้คุณมีสองทางเลือกในการทดสอบรหัสของคุณ

เมื่อคุณเลือก "Nodemon Test File" คุณจะต้องใส่รหัสของคุณเพื่อทดสอบใน test.js

ในการติดตั้ง nodemon และข้อมูลเพิ่มเติมเกี่ยวกับวิธีการดีบักด้วย nodemon ใน VSC ฉันแนะนำให้อ่านบทความนี้ซึ่งอธิบายรายละเอียดเพิ่มเติมในส่วนที่สองของไฟล์ 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",
        },
    ]
}

อีกตัวเลือกหนึ่งคือการใช้คอนโซลเครื่องมือนักพัฒนาซอฟต์แวร์ภายในรหัส Visual Studio เพียงเลือก "เครื่องมือสำหรับนักพัฒนาสลับ" จากเมนูความช่วยเหลือจากนั้นเลือกแท็บ "คอนโซล" ในเครื่องมือนักพัฒนาซอฟต์แวร์ที่ปรากฏขึ้น จากตรงนั้นคุณจะมีเครื่องมือ dev เดียวกับ REPL ที่คุณได้รับใน Chrome

สำหรับ 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".

อีกวิธีหนึ่งที่จะเปิด terminal Ctrl + `nodeรัน ตอนนี้คุณมีโหนด REPL ที่ใช้งานอยู่ ตอนนี้คุณสามารถส่งไฟล์ของคุณหรือข้อความที่เลือกไปยังสถานี เพื่อที่จะทำคำสั่งเปิด VSCode pallete ( F1หรือctrl + shift + p ) และดำเนินการ>run selected text in active terminalหรือ>run active file in active terminalหรือ

หากคุณต้องการ REPL ใหม่ทั้งหมดก่อนที่จะรันโค้ดของคุณคุณจะต้องรีสตาร์ทโหนด REPL สิ่งนี้จะทำเมื่ออยู่ใน Terminal ด้วยโหนด REPL ctrl+c ctrl+cเพื่อออกจากมันและพิมพ์nodeเพื่อเริ่มใหม่

คุณอาจจะสามารถผูกคำสั่ง palleteคำสั่งกับสิ่งที่คุณต้องการคีย์

PS: nodeควรติดตั้งและในเส้นทางของคุณ

เพียงติดตั้ง nodemon และเรียกใช้

nodemon your_file.js

บน vs code terminal