Запустіть JavaScript у коді Visual Studio

Чи існує спосіб виконання JavaScript та відображення результатів за допомогою коду Visual Studio ?

Наприклад, файл сценарію, що містить:

console.log('hello world');

Я припускаю, що Node.js знадобиться, але не може розробити, як це зробити?

Під кодом Visual Studio я маю на увазі новий редактор коду від 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 перейдіть «Код»> «Налаштування»> «Комбінації клавіш». Додайте це до комбінацій клавіш:

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

Існує набагато простіший спосіб запуску JavaScript, не потрібна конфігурація:

1. Встановіть розширення Code Runner
2. Відкрийте файл коду JavaScript у текстовому редакторі, потім скористайтеся ярликом Control+ Alt+ N(або ⌃ Control+ ⌥ Option+ Nна macOS) або натисніть, F1а потім виберіть / введіть Run Code, код запуститься, а вихід буде показаний у вікні виводу.

Крім того, ви можете вибрати частину коду JavaScript і запустити фрагмент коду. Розширення також працює з збереженими файлами, тому ви можете просто створити файл, змінити його на Javascript і швидко написати код (бо коли вам потрібно просто спробувати щось швидко). Дуже зручно!

Я здивований, про це ще не було сказано:

Просто відкрийте розглянутий .jsфайл у коді VS, перейдіть на вкладку "Консоль налагодження", натисніть кнопку налагодження на лівій панелі навігації та натисніть на значок запуску (кнопку відтворення)!

Потрібно встановити nodejs!

На мою думку, це найшвидший спосіб для вас;

• Відкрити інтегрований термінал з кодом візуальної студії ( View > Integrated Terminal)
• тип 'node filename.js'
• натисніть Enter

Примітка : потрібна настройка вузла. (якщо у вас є домашня мова, просто введіть "варити встановити вузол" на терміналі)

Примітка 2 : домашня мова та вузол дуже рекомендуються, якщо у вас ще цього немає.

гарного дня.

Ярлик для інтегрованого терміналу дорівнює ctrl+ `, а потім введіть node <filename>.

Крім того, ви можете створити завдання. Це єдиний код у моїх завданнях.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"
}
]

Це відкриє команду "run" у командній палітрі, але ви все одно повинні набрати або вибрати мишкою завдання, яке потрібно виконати, у цьому випадку вузол. Другий ярлик перемикає панель виводу, вже є ярлик для неї, але ці клавіші знаходяться поруч і з ними простіше працювати.

Ну а щоб просто запустити код і показати вихід на консолі, ви можете створити завдання та виконати його, майже як згадує @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 у файлі, який ви хочете налагодити.

Я зіткнувся з цією точною проблемою, коли я вперше почав використовувати VS Code з розширеннямCode Runner

Що потрібно зробити, це встановити шлях node.js в Налаштуваннях користувача

Потрібно встановити Шлях під час встановлення його на вашій машині Windows.

Для моєї це було \"C:\\Program Files\\nodejs\\node.exe\"

Як я маю пробіл у своєму імені файлових файлів

Дивіться це зображення нижче. Я не зміг запустити код спочатку, тому що я помилився в Імені Шляху

Сподіваюся, що це вам допоможе.

І звичайно, Ваше запитання допомогло мені, оскільки я також прийшов сюди, щоб отримати допомогу пробіг JSу своєму коді VS

Виконайте ці дії у коді VS. [Виконується у Windows OS]

1. Створіть новий файл

2. Запишіть у нього коди javascript

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 тощо у візуальному коді студії, що вам потрібно зробити, це просто встановити розширення Code Runner і потім просто вибрати частину коду, який потрібно запустити, і натисніть на кнопка запуску присутня у верхньому правому куті.

Це може бути найпростіше, починаючи з v1.32:

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

Використовуйте власне прив’язку клавіш.

Див. Примітки до випуску: sendSequence та змінні .

За допомогою vscode v1.32 ви можете sendSequenceперейти до терміналу, використовуючи такі змінні, як ${file}поточний файл. Якщо вам потрібен якийсь інший шлях до нього, замініть $ {файл} на своє ім'я шляху в клавіатурній палітурці вище.

Це \u000Dповернення, тому воно запуститься негайно.

Я додав 's навколо ${file}змінної у випадку, якщо у вашому шляху файлу є пробіли, наприкладc:Users\Some Directory\fileToRun

Я б запропонував вам скористатися простим і легким плагіном під назвою Quokka, який дуже популярний в наші дні і допомагає налагоджувати код на ходу. Quokka.js . Однією з найбільших переваг використання цього плагіна є те, що ви економите багато часу, щоб перейти на веб-браузер і оцінити свій код, за допомогою цього ви зможете побачити все, що відбувається в коді VS, що економить багато часу.

Існує багато способів запуску javascript у коді Visual Studio.

Якщо ви використовуєте Node, то рекомендую використовувати стандартний налагоджувач у VSC.

Я зазвичай створюю фіктивний файл, як-от test.js, де я роблю зовнішні тести.

У своїй папці, де у вас є ваш код, ви створюєте папку під назвою ".vscode" і створюєте файл під назвою "start.json"

У цей файл ви вставляєте наступне та зберігаєте. Тепер у вас є два варіанти тестування вашого коду.

Вибираючи "Тестовий файл Nememon", вам потрібно покласти свій код для тестування в test.js.

Щоб встановити nodemon та більше інформації про те, як налагодити nodemon у VSC, рекомендую ознайомитись із цією статтею , де детальніше пояснюється друга частина файлу start.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. Просто виберіть "Переключити інструменти для розробників" у довідковому меню, а потім виберіть вкладку "Консоль" в інструментах для розробників, що з'являються. Звідси у вас є ті самі інструменти для розробників 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".

Іншим способом було б відкрити термінал ctrl + ` Execute 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повинен бути встановлений і на вашому шляху

Просто встановіть nodemon і запустіть

nodemon your_file.js

на терміналі проти коду.