Запустите 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 Code, перейдите на вкладку «Debug Console», нажмите кнопку отладки на левой навигационной панели и нажмите значок запуска (кнопка воспроизведения)!

Требуется установить nodejs!

На мой взгляд, это самый быстрый способ для вас;

• Открыть интегрированный терминал на Visual Studio Code ( View > Integrated Terminal)
• тип 'node filename.js'
• нажмите Ввод

примечание : требуется настройка узла. (если у вас есть homebrew, просто наберите «brew install node» на терминале)

примечание 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"
}
]

Откроется окно «Выполнить» в командной палитре, но вам все равно придется ввести или выбрать с помощью мыши задачу, которую вы хотите запустить, в данном случае узел. Второй ярлык переключает панель вывода, для нее уже есть ярлык, но эти клавиши расположены рядом друг с другом и с ними проще работать.

Ну, чтобы просто запустить код и отобразить вывод на консоли, вы можете создать задачу и выполнить ее, почти как @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 CODE

Выполните следующие действия в коде 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 Code и запускаете его, если у вас уже нет файла конфигурации, он создает его для вас, единственное, что вам нужно настроить - это значение «program» и установить его к пути вашего основного файла 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. Вам нужно просто установить расширение Code 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возврат, поэтому он будет запущен немедленно.

Я добавил 's вокруг ${file}переменной на случай, если в пути к файлу есть пробелы, напримерc:Users\Some Directory\fileToRun

Существует много способов запуска JavaScript в коде Visual Studio.

Если вы используете Node, то я рекомендую использовать стандартный отладчик в VSC.

Обычно я создаю фиктивный файл, например test.js, где я делаю внешние тесты.

В вашей папке, где у вас есть код, вы создаете папку с именем «.vscode» и создаете файл с именем «launch.json»

В этом файле вы вставляете следующее и сохраняете. Теперь у вас есть два варианта для проверки вашего кода.

Когда вы выбираете «Тестовый файл Nodemon», вы должны поместить свой код для тестирования в 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. Просто выберите «Переключить инструменты разработчика» в меню справки, а затем откройте вкладку «Консоль» во всплывающих инструментах разработчика. Оттуда у вас есть те же инструменты разработчика REPL, которые вы получаете в Chrome.

Для окон : просто измените файловую ассоциацию .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".

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

Другой способ - открыть терминал 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чтобы начать новый.

Вероятно, вы можете связать команды команды pallete с любой клавишей, которую вы хотите.

PS: nodeдолжен быть установлен и на вашем пути

Просто установите nodemon и запустите

nodemon your_file.js

на кодовом терминале.