web-dev-qa-db-fra.com

Exécuter JavaScript dans le code Visual Studio

Existe-t-il un moyen d'exécuter javascript et d'afficher les résultats à l'aide de Visual Studio Code?

Par exemple, un fichier de script contenant

console.log('hello world');

Je suppose que nodejs serait nécessaire mais je ne vois pas comment le faire.

EDIT: Par "code Visual Studio", je veux dire le nouvel éditeur de code de Microsoft - Pas de code écrit avec Visual Studio

Code Visual Studio

node.jsvisual-studio-code
119
Nick Le Page

Cette solution a pour but d'exécuter le fichier actuellement ouvert dans le noeud et d'afficher la sortie en VSCode.

J'avais la même question et trouvais nouvellement introduit tasks utile pour ce cas d'utilisation spécifique. C'est un peu compliqué, mais voici ce que j'ai fait:

Créez un répertoire _.vscode_ à la racine du projet et créez un fichier _tasks.json_. Ajoutez cette définition de tâche au fichier:

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

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

Ensuite, vous pouvez: _press F1 > type `run task` > enter > select `runFile` > enter_ exécuter votre tâche, mais j’ai trouvé plus facile d’ajouter une liaison de clé personnalisée pour ouvrir des listes de tâches.

Pour ajouter la liaison de clé, dans le menu de l'interface utilisateur de VSCode, sélectionnez "Code"> "Préférences"> "Raccourcis clavier". Ajoutez ceci à vos raccourcis clavier:

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

Bien sûr, vous pouvez sélectionner la combinaison de touches de votre choix.

UPDATE:

En supposant que vous exécutiez le code JavaScript pour le tester , vous pouvez marquer votre tâche en tant que tâche test en définissant la valeur propriété isTestCommand à true et vous pouvez ensuite lier une clé à la commande workbench.action.tasks.test pour un appel à une seule action.

En d'autres termes, votre fichier _tasks.json_ contiendrait maintenant:

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

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

... et votre fichier _keybindings.json_ contiendrait maintenant:

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

Il existe un moyen beaucoup plus simple d’exécuter JavaScript, aucune configuration n’est nécessaire:

  1. Installez le Code Runner Extension
  2. Ouvrez le fichier de code JavaScript dans l'éditeur de texte, puis utilisez le raccourci Control+Alt+N (ou ⌃ Control+⌥ Option+N sur macOS), ou appuyez sur F1 puis sélectionnez/tapez Run Code, le code sera exécuté et la sortie sera affichée dans la fenêtre de sortie.

En outre, vous pouvez sélectionner une partie du code JavaScript et exécuter l'extrait de code. L'extension fonctionne également avec les fichiers non enregistrés, vous pouvez donc simplement créer un fichier, le changer en Javascript et écrire du code rapidement (pour quand vous avez juste besoin d'essayer quelque chose de rapide). Très pratique!

223
Jun Han

Je suis surpris que cela n'ait pas encore été mentionné:

Ouvrez simplement le fichier .js en question dans VS Code, passez à l'onglet 'Console de débogage', cliquez sur le bouton de débogage dans la barre de navigation de gauche, puis cliquez sur l'icône d'exécution (bouton de lecture)!

Nécessite l'installation de nodejs!

22
tenwest

Le raccourci pour le terminal intégré est (ctrl + `), puis tapez node <filename>.

Sinon, vous pouvez créer une tâche. C'est le seul code dans mon tasks.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"
}

À partir de là, créez un raccourci. C'est mon 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"
}
]

Ceci ouvrira "Exécuter" dans la palette de commandes, mais vous devrez toujours taper ou sélectionner avec la souris la tâche que vous souhaitez exécuter, dans ce cas, le nœud. Le deuxième raccourci bascule dans le panneau de sortie. Il existe déjà un raccourci pour ce dernier, mais ces touches sont côte à côte et plus faciles à utiliser.

9
coty h

J'ai fait face à ce problème exact, quand je commence à utiliser VS Code avec extension Code Runner

Ce que vous devez faire est de définir le chemin node.js dans les paramètres utilisateur .

Vous devez définir le Path au fur et à mesure de son installation sur votre ordinateur Windows.

Pour le mien, c'était \"C:\\Program Files\\nodejs\\node.exe\"

Comme j'ai un espace dans mon nom de répertoire de fichiers

Voir cette image ci-dessous. Je n'ai pas réussi à exécuter le code au début ​​parce que j'ai commis une erreur dans le Nom du cheminenter image description here

J'espère que cela vous aidera.

Et bien sûr, votre question m'a aidé, car j'étais aussi venu ici pour obtenir de l'aide pour courir JS dans mon VS CODE

6
Legend

Ceci est le moyen le plus rapide pour vous à mon avis;

  • Terminal intégré ouvert sur code Visual Studio (View > Integrated Terminal)
  • tapez 'node filename.js'
  • appuyez sur Entrée

note: configuration du nœud requise. (si vous avez un homebrew, tapez simplement 'brew install node' sur le terminal)

note 2: homebrew et noeud fortement recommandés si vous ne les avez pas déjà.

bonne journée.

5
Vehbi

Eh bien, pour exécuter simplement le code et afficher la sortie sur la console, vous pouvez créer une tâche et l'exécuter, à peu près comme @canerbalci le mentionne.

L'inconvénient est que vous n'obtiendrez que la sortie et c'est tout.

Ce que j’aime vraiment faire, c’est de pouvoir déboguer le code. Imaginons que je tente de résoudre un petit algorithme ou une nouvelle fonctionnalité de ES6.

Ainsi, au lieu de créer une tâche pour cela, j'ai modifié le fichier .vscode/launch.json dans ce répertoire comme suit:

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

Cela permet de lancer le fichier sur lequel vous vous trouvez actuellement, dans le débogueur de VSC. Son ensemble pour arrêter au début.

Pour le lancer, appuyez sur la touche F5 dans le fichier que vous souhaitez déboguer.

3
lebobbi

C'est très simple, lorsque vous créez un nouveau fichier dans VS Code et que vous l'exécutez, si vous ne possédez pas déjà un fichier de configuration, il en crée un pour vous. La seule chose dont vous avez besoin pour configurer est la valeur "programme" dans le chemin de votre fichier JS principal, ressemble à ceci:

{
    "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
        }
    ]
}
2
João Marcelo Brito

Il n’est pas nécessaire de définir l’environnement pour exécuter le code sur JavaScript, python, etc. dans Visual Studio code, vous devez simplement installer Code Runner Extension, puis sélectionner la partie du code que vous voulez exécuter et appuyer sur le bouton bouton exécuter présent dans le coin supérieur droit.

2
Aman Mishra

J'ai utilisé Node Exec, aucune configuration requise, construit le fichier que vous êtes en train de terminer ou ce qui a déjà été sélectionné et sorti dans VSCode.

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

Avec un peu de configuration, vous pouvez aussi ajouter Babel pour transpiler à la volée.

2
dmo

Cela peut maintenant être le plus simple, à partir de la v1.32:

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

Utilisez votre propre raccourci clavier.

Voir Notes de version: sendSequence et variables .

Avec vscode v1.32, vous pouvez sendSequence aller au terminal à l’aide de variables telles que ${file}, qui est le fichier actuel. Si vous voulez un autre chemin, remplacez $ {fichier} par votre chemin dans le raccourci ci-dessus.

Le \u000D est un retour, il sera donc exécuté immédiatement.

J'ai ajouté 's autour de la variable ${file} au cas où votre chemin de fichier comporte des espaces, comme c:Users\Some Directory\fileToRun

1
Mark

Une autre solution consisterait à ouvrir le terminal ctrl + ` exécuter node. Vous avez maintenant un noeud REPL actif. Vous pouvez maintenant envoyer votre fichier ou le texte sélectionné au terminal. Pour ce faire, ouvrez le VSCode commande pallete (F1 ou ctrl + shift + p) et exécutez >run selected text in active terminal ou >run active file in active terminal.

Si vous avez besoin de nettoyer REPL avant d'exécuter votre code, vous devrez redémarrer le noeud REPL. Ceci est fait lorsque vous êtes dans le terminal avec le noeud REPL ctrl+c ctrl+c pour le quitter et en tapant node pour en démarrer un nouveau.

Vous pouvez probablement associer les commandes palette de commandes à la clé de votre choix.

PS: node devrait être installé et dans votre chemin

0
h3dkandi

Il existe plusieurs manières d’exécuter javascript dans Visual Studio Code.

Si vous utilisez Node, je vous recommande d'utiliser le débogueur standard dans VSC.

Je crée normalement un fichier factice, comme test.js, dans lequel je fais des tests externes.

Dans votre dossier où vous avez votre code, vous créez un dossier appelé ".vscode" et créez un fichier appelé "launch.json"

Dans ce fichier, vous collez ce qui suit et enregistrez. Vous avez maintenant deux options pour tester votre code.

Lorsque vous choisissez "Fichier de test Nodemon", vous devez mettre votre code à tester dans test.js.

Pour installer nodemon et plus d’informations sur la façon de déboguer avec nodemon dans VSC, je vous recommande de lire ceci article , qui explique plus en détail la deuxième partie du fichier launch.json et comment déboguer dans 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",
        },
    ]
}
0
Isak La Fleur

Une autre option consiste à utiliser la console des outils de développement dans Visual Studio Code. Sélectionnez simplement "Basculer les outils de développement" dans le menu Aide, puis sélectionnez l'onglet "Console" dans les outils de développement qui apparaissent. À partir de là, vous avez les mêmes outils de développement REPL que vous obtenez dans Chrome.

0
Alex Broadwin