Jalankan JavaScript dalam Visual Studio Code

Apakah ada cara untuk menjalankan JavaScript dan menampilkan hasilnya menggunakan Visual Studio Code ?

Misalnya, file skrip yang berisi:

console.log('hello world');

Saya berasumsi bahwa Node.js akan diperlukan tetapi tidak dapat menemukan cara melakukannya?

Dengan Visual Studio Code yang saya maksud adalah Editor Kode baru dari Microsoft - Bukan kode yang ditulis menggunakan Visual Studio.

Solusi ini bermaksud untuk menjalankan file yang saat ini terbuka di node dan menunjukkan output dalam VSCode.

Saya memiliki pertanyaan yang sama dan merasa baru diperkenalkan tasksbermanfaat untuk penggunaan khusus ini. Ini sedikit merepotkan, tapi inilah yang saya lakukan:

Buat .vscodedirektori di root proyek Anda dan buat tasks.jsonfile di dalamnya. Tambahkan definisi tugas ini ke file:

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

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

Kemudian Anda dapat: press F1 > type `run task` > enter > select `runFile` > enter untuk menjalankan tugas Anda, tetapi saya merasa lebih mudah untuk menambahkan kunci kustom yang mengikat untuk membuka daftar tugas.

Untuk menambahkan pengikatan tombol, di menu VSCode UI, buka 'Kode'> 'Preferensi'> 'Pintasan Keyboard'. Tambahkan ini ke pintasan keyboard Anda:

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

Tentu saja Anda dapat memilih apa pun yang Anda inginkan sebagai kombinasi tombol.

MEMPERBARUI:

Dengan asumsi Anda menjalankan kode JavaScript untuk menguji itu, Anda bisa menandai tugas Anda sebagai uji tugas dengan mengatur isTestCommandproperti untuk truedan kemudian Anda dapat mengikat kunci untuk workbench.action.tasks.testperintah untuk doa single-tindakan.

Dengan kata lain, tasks.jsonfile Anda sekarang akan berisi:

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

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

... dan keybindings.jsonfile Anda sekarang akan berisi:

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

Ada banyak cara yang lebih mudah untuk menjalankan JavaScript, tidak diperlukan konfigurasi:

1. Instal Ekstensi Code Runner
2. Buka file kode JavaScript di Editor Teks, kemudian gunakan pintasan Control+ Alt+ N(atau ⌃ Control+ ⌥ Option+ Npada macOS), atau tekan F1lalu pilih / ketik Run Code, kode akan berjalan dan output akan ditampilkan di Output Window.

Selain itu, Anda dapat memilih bagian dari kode JavaScript dan menjalankan cuplikan kode. Ekstensi ini juga berfungsi dengan file yang belum disimpan, jadi Anda bisa membuat file, mengubahnya ke Javascript dan menulis kode dengan cepat (untuk saat Anda hanya perlu mencoba sesuatu dengan cepat). Sangat mudah!

Saya terkejut ini belum disebutkan:

Cukup buka .jsfile yang dimaksud dalam VS Code, alihkan ke tab 'Debug Console', tekan tombol debug di bilah navigasi kiri, dan klik ikon jalankan (tombol putar)!

Membutuhkan nodejs untuk diinstal!

Ini adalah cara tercepat untuk Anda menurut saya;

• Buka terminal terintegrasi pada kode studio visual ( View > Integrated Terminal)
• Tipe 'node filename.js'
• tekan enter

Catatan : diperlukan penyiapan simpul. (jika Anda memiliki homebrew cukup ketik 'brew install node' di terminal)

Catatan 2 : homebrew dan node sangat dianjurkan jika Anda belum memilikinya.

semoga harimu menyenangkan.

Pintasan untuk terminal terintegrasi adalah ctrl+ `, lalu ketik node <filename>.

Atau Anda dapat membuat tugas. Ini adalah satu-satunya kode di task.json saya:

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

Dari sini buat jalan pintas. Ini keybindings.json saya:

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

Ini akan membuka 'run' di Command Pallete, tetapi Anda masih harus mengetik atau memilih dengan mouse tugas yang ingin Anda jalankan, dalam hal ini node. Pintasan kedua mengaktifkan panel output, sudah ada pintasan untuk itu tetapi tombol-tombol ini bersebelahan dan lebih mudah untuk dikerjakan.

Nah, untuk hanya menjalankan kode dan menunjukkan output pada konsol Anda dapat membuat tugas dan menjalankannya, seperti yang disebutkan oleh @canerbalci.

Kelemahan dari ini adalah Anda hanya akan mendapatkan output dan hanya itu.

Apa yang saya benar-benar suka lakukan adalah dapat men-debug kode, katakanlah saya mencoba untuk menyelesaikan algoritma kecil atau mencoba fitur ES6 baru, dan saya menjalankannya dan ada sesuatu yang mencurigakan dengan itu, saya dapat men-debug-nya di dalam VSC.

Jadi, alih-alih membuat tugas untuk itu, saya memodifikasi file .vscode / launch.json di direktori ini sebagai berikut:

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

Apa yang dilakukan adalah bahwa ia akan meluncurkan file apa pun yang Anda gunakan saat ini, di dalam debugger VSC. Sudah diatur untuk berhenti di awal.

Untuk meluncurkannya, tekan tombol F5, dalam file yang ingin Anda debug.

Saya menghadapi masalah ini, ketika saya mulai menggunakan VS Code dengan ekstensiCode Runner

Hal-hal yang perlu Anda lakukan adalah mengatur jalur node.js di Pengaturan Pengguna

Anda perlu mengatur Path saat Anda menginstalnya di Mesin Windows Anda.

Bagi saya itu \"C:\\Program Files\\nodejs\\node.exe\"

Karena saya memiliki spasi di Nama Direktori File saya

Lihat Gambar ini di bawah. Saya gagal menjalankan kode pada awalnya karena saya membuat kesalahan dalam Nama Path

Semoga ini bisa membantu Anda.

Dan tentu saja, Pertanyaan Anda membantu saya, karena saya juga datang ke sini untuk mendapatkan bantuan untuk menjalankan JSdi VS CODE saya

Ikuti langkah-langkah ini dalam kode VS. [Dilakukan di os windows]

1. Buat file baru

2. Tulis kode javascript di dalamnya

3. Simpan file sebagai filename.js

4. Buka menu Debugging

5. Klik Mulai debug

6. atau cukup tekan F5

tangkapan layar mulai debugging

tangkapan layar dari output kode js di terminal

Saya menggunakan Node Exec, tidak perlu konfigurasi, membuat file yang sedang Anda akhiri atau apa yang pernah dipilih dan menampilkan di dalam VSCode.

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

Dengan sedikit konfigurasi, Anda dapat menambahkan Babel untuk melakukan beberapa perubahan dengan cepat juga.

Ini sangat sederhana, ketika Anda membuat file baru dalam VS Code dan menjalankannya, jika Anda sudah tidak memiliki file konfigurasi yang dibuatnya untuk Anda, satu-satunya hal yang perlu Anda setup adalah nilai "program", dan atur ke jalur file JS utama Anda, terlihat seperti ini:

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

Tidak perlu mengatur lingkungan untuk menjalankan kode pada javascript, python, dll dalam kode visual studio apa yang harus Anda lakukan adalah hanya menginstal Ekstensi Kode Runner dan kemudian cukup pilih bagian dari kode yang ingin Anda jalankan dan tekan tombol tombol run hadir di sudut kanan atas.

Ini sekarang mungkin yang paling mudah, pada v1.32:

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

Gunakan pengikat kunci Anda sendiri.

Lihat Catatan rilis: sendSequence dan variabel .

Dengan vscode v1.32 Anda dapat sendSequenceke terminal menggunakan variabel seperti${file} , yang merupakan file saat ini. Jika Anda menginginkan jalur lain di sana, ganti $ {file} dengan pathname Anda di pengikat kunci di atas.

Ini \u000Dadalah pengembalian sehingga akan segera berjalan.

Saya menambahkan 'sekitar ${file}variabel jika jalur file Anda memiliki spasi di dalamnya, sepertic:Users\Some Directory\fileToRun

Saya menyarankan Anda untuk menggunakan plugin yang sederhana dan mudah disebut Quokka yang sangat populer hari ini dan membantu Anda men-debug kode Anda saat bepergian. Quokka.js . Satu keuntungan terbesar dalam menggunakan plugin ini adalah Anda menghemat banyak waktu untuk pergi di browser web dan mengevaluasi kode Anda, dengan bantuan ini Anda dapat melihat semua yang terjadi dalam kode VS, yang menghemat banyak waktu.

Ada banyak cara untuk menjalankan javascript dalam Visual Studio Code.

Jika Anda menggunakan Node, maka saya sarankan menggunakan debugger standar di VSC.

Saya biasanya membuat file dummy, seperti test.js tempat saya melakukan tes eksternal.

Di folder tempat Anda memiliki kode, buat folder bernama ".vscode" dan buat file bernama "launch.json"

Dalam file ini Anda menempel yang berikut ini dan menyimpannya. Sekarang Anda memiliki dua opsi untuk menguji kode Anda.

Saat Anda memilih "File Tes Nodemon", Anda harus memasukkan kode Anda untuk diuji di test.js.

Untuk menginstal nodemon dan info lebih lanjut tentang cara debug dengan nodemon di VSC, saya sarankan untuk membaca artikel ini , yang menjelaskan secara lebih rinci bagian kedua pada file launch.json dan cara debug di 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",
        },
    ]
}

Pilihan lain adalah menggunakan konsol alat pengembang dalam Visual Studio Code. Cukup pilih "Toggle Developer Tools" dari menu bantuan dan kemudian pilih tab "Console" di alat pengembang yang muncul. Dari sana Anda memiliki alat dev yang sama REPL yang Anda dapatkan di Chrome.

Untuk windows : cukup ubah asosiasi .jsfile dari file menjadinode.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".

Cara lain adalah dengan membuka terminal ctrl + ` eksekusi node. Sekarang Anda memiliki simpul REPL aktif. Anda sekarang dapat mengirim file atau teks yang dipilih ke terminal. Untuk melakukan itu buka pallete perintah VSCode ( F1 atau ctrl + shift + p ) dan jalankan >run selected text in active terminalatau >run active file in active terminal.

Jika Anda memerlukan REPL bersih sebelum menjalankan kode Anda, Anda harus memulai kembali node REPL. Ini dilakukan ketika di Terminal dengan simpul REPL ctrl+c ctrl+cuntuk keluar dan mengetik nodeuntuk memulai yang baru.

Anda mungkin bisa mengikat kunci perintah pallete perintah ke tombol apa pun yang Anda inginkan.

PS: nodeharus dipasang dan di jalur Anda

Cukup instal nodemon dan jalankan

nodemon your_file.js

di terminal kode vs.