Exécuter JavaScript dans Visual Studio Code

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 Node.js serait nécessaire mais je ne peux pas savoir comment le faire?

Par Visual Studio Code, j'entends le nouvel éditeur de code de Microsoft - pas de code écrit à l'aide de Visual Studio.

Cette solution a l'intention d'exécuter le fichier actuellement ouvert dans le nœud et d'afficher la sortie dans VSCode.

J'avais la même question et j'ai trouvé que les nouveautés étaient tasksutiles pour ce cas d'utilisation spécifique. C'est un peu compliqué, mais voici ce que j'ai fait:

Créez un .vscoderépertoire à la racine de votre projet et créez-y un tasks.jsonfichier. 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 les listes de tâches.

Pour ajouter la liaison de touches, dans le menu de l'interface utilisateur VSCode, allez dans «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 ce que vous voulez comme combinaison de touches.

METTRE À JOUR:

En supposant que vous exécutez le code JavaScript pour le tester , vous pouvez marquer votre tâche comme une tâche de test en définissant sa isTestCommandpropriété sur true, puis vous pouvez lier une clé à la workbench.action.tasks.testcommande pour un appel à action unique.

En d'autres termes, votre tasks.jsonfichier contiendrait désormais:

{
    "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 keybindings.jsonfichier contiendrait désormais:

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

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

1. Installez l' extension Code Runner
2. Ouvrez le fichier de code JavaScript dans l'éditeur de texte, puis utilisez le raccourci Control+ Alt+ N(ou ⌃ Control+ ⌥ Option+ Nsous macOS), ou appuyez sur F1, puis sélectionnez / tapez Run Code, le code s'exécutera 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 (lorsque vous avez juste besoin d'essayer quelque chose rapidement). Très pratique!

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

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

Nécessite que nodejs soit installé!

C'est le moyen le plus rapide pour vous à mon avis;

• Ouvrir le terminal intégré sur le code Visual Studio ( View > Integrated Terminal)
• type 'node filename.js'
• appuyez sur Entrée

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

note 2 : homebrew et node fortement recommandés si vous ne l'avez pas déjà.

bonne journée.

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

Vous pouvez également créer une tâche. C'est le seul code de 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"
}

De là, créez un raccourci. Voici 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"
}
]

Cela ouvrira 'run' dans la Command Pallete, mais vous devez 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 fait basculer le panneau de sortie, il existe déjà un raccourci pour celui-ci, mais ces touches sont côte à côte et plus faciles à utiliser.

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

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

Ce que j'aime vraiment faire, c'est être en mesure de déboguer le code, disons que j'essaye de résoudre un petit algorithme ou d'essayer une nouvelle fonctionnalité ES6, et je l'exécute et il y a quelque chose de louche avec cela, je peux le déboguer dans VSC.

Donc, 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
    }
]
}

Ce que cela fait, c'est qu'il lancera le fichier sur lequel vous vous trouvez actuellement, dans le débogueur de VSC. Il est réglé pour s'arrêter au démarrage.

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

J'ai rencontré ce problème exact, lorsque je commence à utiliser VS Code avec l'extensionCode Runner

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

Vous devez définir le chemin lorsque vous l'installez sur votre machine 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. J'ai échoué à exécuter le code au début car j'ai fait une erreur dans le nom du chemin

J'espère que ceci vous aidera.

Et bien sûr, votre question m'a aidé, car j'étais également venu ici pour obtenir une aide pour exécuter JSmon VS CODE

Suivez ces étapes dans le code VS. [Effectué dans le système d'exploitation Windows]

1. Créer un nouveau fichier

2. Écrivez des codes javascript dedans

3. Enregistrez le fichier sous filename.js

4. Aller au menu Débogage

5. Cliquez sur Démarrer le débogage

6. ou appuyez simplement sur F5

capture d'écran du démarrage du débogage

capture d'écran de la sortie du code js dans le terminal

J'ai utilisé Node Exec, aucune configuration nécessaire, crée le fichier que vous terminez actuellement ou ce qui a été sélectionné et sort à l'intérieur de VSCode.

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

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

C'est très simple, lorsque vous créez un nouveau fichier dans VS Code et que vous l'exécutez, si vous n'avez déjà pas de fichier de configuration, il en crée un pour vous, la seule chose que vous devez configurer est la valeur "programme", et la définir au 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
        }
    ]
}

Il n'est pas nécessaire de définir l'environnement pour exécuter le code sur javascript, python, etc. dans le code de Visual Studio, ce que vous devez faire est simplement d'installer l'extension Code Runner, puis sélectionnez simplement la partie du code que vous souhaitez exécuter et appuyez sur le bouton bouton d'exécution présent dans le coin supérieur droit.

C'est peut-être maintenant 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 combinaison de touches.

Voir les notes de version: sendSequence et variables .

Avec vscode v1.32, vous pouvez sendSequence au terminal en utilisant des variables telles que${file} , qui est le fichier actuel. Si vous voulez un autre chemin, remplacez $ {file} par votre chemin dans le raccourci clavier ci-dessus.

le \u000D est un retour donc il s'exécutera immédiatement.

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

Il existe de nombreuses façons d'exécuter du 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 où 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 "Nodemon Test File", 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 recommande de lire cet article , qui explique plus en détail la deuxième partie sur le 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",
        },
    ]
}

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 d'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.

Pour Windows : changez simplement l'association de .jsfichier du fichier ennode.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".

Je vous suggère d'utiliser un plugin simple et facile appelé Quokka qui est très populaire ces jours-ci et vous aide à déboguer votre code lors de vos déplacements. Quokka.js . L'un des plus grands avantages de l'utilisation de ce plugin est que vous gagnez beaucoup de temps pour accéder au navigateur Web et évaluer votre code.Avec l'aide de cela, vous pouvez voir tout ce qui se passe dans le code VS, ce qui fait gagner beaucoup de temps.

Une autre façon serait d'ouvrir le terminal ctrl + ` execute node. Vous avez maintenant un nœud REPL actif. Vous pouvez maintenant envoyer votre fichier ou le texte sélectionné au terminal. Pour ce faire, ouvrez la palette de commandes VSCode ( F1 ou ctrl + shift + p ) et exécutez >run selected text in active terminalou>run active file in active terminal .

Si vous avez besoin d'un REPL propre avant d'exécuter votre code, vous devrez redémarrer le nœud REPL. Cela se fait lorsque vous vous trouvez dans le terminal avec le nœud REPL ctrl+c ctrl+cpour le quitter et en tapant nodepour en démarrer un nouveau.

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

PS: nodedoit être installé et dans votre chemin

Installez simplement nodemon et exécutez

nodemon your_file.js

sur terminal vs code.