Executar JavaScript no código do Visual Studio

Existe uma maneira de executar JavaScript e exibir os resultados usando o Código do Visual Studio ?

Por exemplo, um arquivo de script contendo:

console.log('hello world');

Presumo que o Node.js seria necessário, mas não consigo descobrir como fazê-lo?

Por código do Visual Studio, quero dizer o novo editor de código da Microsoft - não código escrito usando o Visual Studio.

Esta solução pretende executar o arquivo atualmente aberto no nó e mostrar a saída no VSCode.

Eu tive a mesma pergunta e achei recém-introduzido tasks útil para este caso de uso específico. É um pouco complicado, mas aqui está o que eu fiz:

Crie um .vscodediretório na raiz do seu projeto e crie um tasks.jsonarquivo nele. Inclua esta definição de tarefa no arquivo:

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

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

Então você pode: press F1 > type `run task` > enter > select `runFile` > enter executar sua tarefa, mas achei mais fácil adicionar uma ligação de chave personalizada para abrir listas de tarefas.

Para adicionar a ligação de teclas, no menu da interface do usuário do VSCode, vá em 'Código'> 'Preferências'> 'Atalhos do teclado'. Adicione isso aos atalhos do teclado:

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

Claro que você pode selecionar o que quiser como combinação de teclas.

ATUALIZAR:

Supondo que você esteja executando o código JavaScript para testá- lo, poderá marcar sua tarefa como uma tarefa de teste configurando sua isTestCommandpropriedade como truee, em seguida, poderá vincular uma chave ao workbench.action.tasks.testcomando para uma chamada de ação única.

Em outras palavras, seu tasks.jsonarquivo agora conteria:

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

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

... e seu keybindings.jsonarquivo agora conteria:

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

Existe uma maneira muito mais fácil de executar JavaScript, sem necessidade de configuração:

1. Instale a extensão do Code Runner
2. Abra o arquivo de código JavaScript no Editor de texto, use o atalho Control+ Alt+ N(ou ⌃ Control+ ⌥ Option+ Nno macOS) ou pressione F1e selecione / digite Run Code, o código será executado e a saída será exibida na janela Saída.

Além disso, você pode selecionar parte do código JavaScript e executar o snippet de código. A extensão também funciona com arquivos não salvos, para que você possa apenas criar um arquivo, alterá-lo para Javascript e escrever rapidamente o código (para quando você precisar apenas tentar algo rápido). Muito conveniente!

Estou surpreso que isso ainda não tenha sido mencionado:

Basta abrir o .jsarquivo em questão no VS Code, alternar para a guia 'Debug Console', clicar no botão debug na barra de navegação esquerda e clicar no ícone executar (botão play)!

Requer nodejs para ser instalado!

Este é o caminho mais rápido para você na minha opinião;

• Terminal integrado aberto no código do visual studio ( View > Integrated Terminal)
• tipo 'node filename.js'
• pressione Enter

nota : configuração do nó necessária. (se você tiver um homebrew, digite 'brew install node' no terminal)

nota 2 : homebrew e nó são altamente recomendados se você ainda não o possui.

tenha um bom dia.

O atalho para o terminal integrado é ctrl+ `e digite node <filename>.

Como alternativa, você pode criar uma tarefa. Este é o único código em minhas 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"
}

A partir daqui, crie um atalho. Este é o meu 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"
}
]

Isso abrirá 'run' no Command Pallete, mas você ainda precisará digitar ou selecionar com o mouse a tarefa que deseja executar, neste nó do caso. O segundo atalho alterna o painel de saída, já existe um atalho para ele, mas essas teclas são próximas umas das outras e mais fáceis de trabalhar.

Bem, para simplesmente executar o código e mostrar a saída no console, você pode criar uma tarefa e executá-la, como o @canerbalci menciona.

A desvantagem disso é que você só obterá a saída e é isso.

O que realmente gosto de fazer é poder depurar o código, digamos que estou tentando resolver um pequeno algoritmo ou tentando um novo recurso do ES6, e eu o executo e há algo suspeito nele, posso depurá-lo no VSC.

Portanto, em vez de criar uma tarefa para isso, modifiquei o arquivo .vscode / launch.json nesse diretório da seguinte maneira:

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

O que isso faz é que ele inicie o arquivo em que você está atualmente, no depurador do VSC. Está pronto para parar no início.

Para iniciá-lo, pressione a tecla F5 no arquivo que você deseja depurar.

Eu enfrentei esse problema exato, quando comecei a usar o VS Code com extensãoCode Runner

O que você precisa fazer é definir o caminho node.js em Configurações do usuário

Você precisa definir o caminho medida que o instala na máquina Windows.

Para o meu era \"C:\\Program Files\\nodejs\\node.exe\"

Como tenho um espaço no meu nome de diretório de arquivos

Veja esta imagem abaixo. Falha ao executar o código na primeira causa, cometi um erro no nome do caminho

Espero que isso ajude você.

E, é claro, sua pergunta me ajudou, pois eu também vim aqui para obter ajuda para executar JSmeu código VS

Siga estas etapas no código VS. [realizado no sistema operacional Windows]

1. Criar novo arquivo

2. Escreva códigos javascript nele

3. Salvar arquivo como filename.js

4. Vá para o menu Depuração

5. Clique em Iniciar depuração

6. ou simplesmente pressione F5

captura de tela do início da depuração

captura de tela da saída do código js no terminal

Eu usei o Node Exec, nenhuma configuração necessária, cria o arquivo que você está finalizando no momento ou o que já foi selecionado e gera dentro do VSCode.

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

Com um pouco de configuração, você pode adicionar o Babel para fazer algumas transpilações dinâmicas também.

É muito simples: quando você cria um novo arquivo no VS Code e o executa, se você já não possui um arquivo de configuração, ele cria um para você, a única coisa que você precisa configurar é o valor "program" e o define para o caminho do seu arquivo JS principal, fica assim:

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

Não é necessário definir o ambiente para executar o código em javascript, python, etc. No código do visual studio, basta instalar a Extensão do Code Runner e selecionar a parte do código que você deseja executar e pressionar a tecla botão de execução presente no canto superior direito.

Agora pode ser o mais fácil a partir da v1.32:

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

Use sua própria combinação de teclas.

Consulte Notas da versão: sendSequence e variáveis .

Com o vscode v1.32, você pode acessar sendSequenceo terminal usando variáveis ​​como${file} , que é o arquivo atual. Se você quiser algum outro caminho, substitua $ {file} pelo nome do caminho no atalho de teclas acima.

o \u000D é um retorno para que seja executado imediatamente.

Eu adicionei 's ao redor da ${file}variável, caso o caminho do arquivo contenha espaços, comoc:Users\Some Directory\fileToRun

Eu sugiro que você use um plugin simples e fácil chamado Quokka, que é muito popular hoje em dia e ajuda a depurar seu código em movimento. Quokka.js . Uma grande vantagem do uso desse plug-in é que você economiza muito tempo para acessar o navegador da Web e avaliar seu código. Com a ajuda disso, você pode ver tudo o que está acontecendo no código VS, o que economiza muito tempo.

Existem várias maneiras de executar o javascript no Visual Studio Code.

Se você usa o Node, recomendo usar o depurador padrão no VSC.

Normalmente, crio um arquivo fictício, como test.js, onde faço testes externos.

Na sua pasta em que você tem seu código, você cria uma pasta chamada ".vscode" e cria um arquivo chamado "launch.json"

Neste arquivo, cole o seguinte e salve. Agora você tem duas opções para testar seu código.

Quando você escolhe "Nodemon Test File", precisa colocar seu código para testar em test.js.

Para instalar o nodemon e mais informações sobre como depurar com o nodemon no VSC, recomendo a leitura deste artigo , que explica com mais detalhes a segunda parte do arquivo launch.json e como depurar no 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",
        },
    ]
}

Outra opção é usar o console das ferramentas do desenvolvedor no Visual Studio Code. Simplesmente selecione "Alternar Ferramentas do desenvolvedor" no menu de ajuda e selecione a guia "Console" nas ferramentas do desenvolvedor que aparecerem. A partir daí, você tem as mesmas ferramentas de desenvolvimento REPL que obtém no Chrome.

Para Windows : basta alterar a associação do .jsarquivo paranode.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".

Outra maneira seria abrir o terminal ctrl + ` execute node. Agora você tem um nó REPL ativo. Agora você pode enviar seu arquivo ou texto selecionado para o terminal. Para fazer isso, abra o comando VSCode pallete ( F1 ou ctrl + shift + p ) e execute >run selected text in active terminalou>run active file in active terminal .

Se você precisar de um REPL limpo antes de executar seu código, precisará reiniciar o nó REPL. Isso é feito no Terminal com o nó REPL ctrl+c ctrl+cpara sair e digitando nodepara começar de novo.

Você provavelmente poderia vincular o comando pallete command a qualquer chave que desejar.

PS: nodedeve estar instalado e no seu caminho

Basta instalar o nodemon e executar

nodemon your_file.js

no terminal de código vs.