Uruchom JavaScript w Visual Studio Code

Czy istnieje sposób na wykonanie JavaScript i wyświetlenie wyników przy użyciu Visual Studio Code ?

Na przykład plik skryptu zawierający:

console.log('hello world');

Zakładam, że Node.js byłby potrzebny, ale nie wiem, jak to zrobić?

Przez Visual Studio Code rozumiem nowy edytor kodu firmy Microsoft - nie kod napisany w Visual Studio.

To rozwiązanie ma na celu uruchomienie aktualnie otwartego pliku w węźle i wyświetlenie wyniku w VSCode.

Miałem to samo pytanie i stwierdziłem, że nowo wprowadzone są tasksprzydatne w tym konkretnym przypadku użycia. To trochę kłopotliwe, ale oto co zrobiłem:

Utwórz .vscodekatalog w katalogu głównym swojego projektu i utwórz tasks.jsonw nim plik. Dodaj tę definicję zadania do pliku:

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

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

Następnie możesz: press F1 > type `run task` > enter > select `runFile` > enter uruchomić swoje zadanie, ale łatwiej mi było dodać niestandardowe powiązanie klawiszy do otwierania list zadań.

Aby dodać powiązanie klawiszy, w menu VSCode UI wybierz „Kod”> „Preferencje”> „Skróty klawiaturowe”. Dodaj to do swoich skrótów klawiaturowych:

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

Oczywiście możesz wybrać dowolną kombinację klawiszy.

AKTUALIZACJA:

Zakładając, że uruchamiasz kod JavaScript, aby go przetestować , możesz oznaczyć zadanie jako zadanie testowe , ustawiając jego isTestCommandwłaściwość na, truea następnie możesz powiązać klucz z workbench.action.tasks.testpoleceniem w celu wywołania pojedynczego działania.

Innymi słowy, twój tasks.jsonplik będzie teraz zawierał:

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

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

... a twój keybindings.jsonplik będzie teraz zawierał:

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

Istnieje znacznie łatwiejszy sposób na uruchomienie JavaScript, bez konieczności konfiguracji:

1. Zainstaluj rozszerzenie Code Runner
2. Otwórz plik kodu JavaScript w Edytorze tekstu, a następnie użyj skrótu Control+ Alt+ N(lub ⌃ Control+ ⌥ Option+ Nw systemie macOS) lub naciśnij, F1a następnie wybierz / wpisz Run Code, kod zostanie uruchomiony, a dane wyjściowe zostaną wyświetlone w oknie danych wyjściowych.

Poza tym możesz wybrać część kodu JavaScript i uruchomić fragment kodu. Rozszerzenie działa również z niezapisanymi plikami, więc możesz po prostu utworzyć plik, zmienić go na Javascript i szybko napisać kod (gdy potrzebujesz tylko czegoś szybkiego). Bardzo wygodne!

Dziwię się, że jeszcze nie wspomniano:

Po prostu otwórz dany .jsplik w VS Code, przejdź do zakładki „Debug Console”, naciśnij przycisk debugowania na lewym pasku nawigacyjnym i kliknij ikonę uruchamiania (przycisk odtwarzania)!

Wymaga zainstalowania nodejs!

Moim zdaniem jest to dla Ciebie najszybsza droga;

• Otwórz zintegrowany terminal w kodzie Visual Studio ( View > Integrated Terminal)
• rodzaj 'node filename.js'
• naciśnij enter

uwaga : wymagana konfiguracja węzła. (jeśli masz homebrew, po prostu wpisz 'brew install node' na terminalu)

uwaga 2 : homebrew i node wysoce zalecane, jeśli jeszcze tego nie zrobiłeś.

miłego dnia.

Skrót do zintegrowanego terminala to ctrl+ `, a następnie wpisz node <filename>.

Alternatywnie możesz utworzyć zadanie. To jest jedyny kod w moim pliku 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"
}

Stąd utwórz skrót. To jest moje 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"
}
]

Spowoduje to otwarcie polecenia „uruchom” w palecie poleceń, ale nadal musisz wpisać lub wybrać myszką zadanie, które chcesz uruchomić, w tym przypadku węzeł. Drugi skrót przełącza panel wyjściowy, jest już do niego skrót, ale te klawisze są obok siebie i są łatwiejsze w obsłudze.

Cóż, aby po prostu uruchomić kod i wyświetlić dane wyjściowe na konsoli, możesz utworzyć zadanie i wykonać je, prawie tak, jak wspomina @canerbalci.

Wadą tego jest to, że uzyskasz tylko wynik i to wszystko.

To, co naprawdę lubię robić, to móc debugować kod, powiedzmy, że próbuję rozwiązać mały algorytm lub wypróbować nową funkcję ES6, uruchamiam ją i jest w tym coś podejrzanego, mogę go debugować w VSC.

Dlatego zamiast tworzyć dla niego zadanie, zmodyfikowałem plik .vscode / launch.json w tym katalogu w następujący sposób:

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

Robi to, że uruchomi dowolny plik, na którym aktualnie się znajdujesz, w debugerze VSC. Zatrzymuje się na starcie.

Aby go uruchomić, naciśnij klawisz F5 w pliku, który chcesz debugować.

Dokładnie napotkałem ten problem, kiedy po raz pierwszy zacząłem używać VS Code z rozszerzeniemCode Runner

Musisz tylko ustawić ścieżkę node.js w Ustawieniach użytkownika

Musisz ustawić ścieżkę podczas instalacji na komputerze z systemem Windows.

Dla mnie to było \"C:\\Program Files\\nodejs\\node.exe\"

Ponieważ mam spację w mojej nazwie katalogu plików

Zobacz ten obraz poniżej. Nie udało mi się uruchomić kod w pierwszym bo popełnił błąd w nazwie ścieżki

Mam nadzieję, że to ci pomoże.

I oczywiście Twoje pytanie mi pomogło, ponieważ przyjechałem tutaj, aby uzyskać pomoc w uruchomieniu JSmojego VS CODE

Wykonaj te czynności w kodzie VS. [wykonywane w systemie operacyjnym Windows]

1. Utwórz nowy plik

2. Napisz w nim kody javascript

3. Zapisz plik jako nazwa_pliku.js

4. Przejdź do menu Debugowanie

5. Kliknij Rozpocznij debugowanie

6. lub po prostu naciśnij klawisz F5

zrzut ekranu przedstawiający rozpoczęcie debugowania

zrzut ekranu wyjścia kodu js w terminalu

Użyłem Node Exec, żadna konfiguracja nie jest potrzebna, buduje plik, który aktualnie kończysz lub co kiedykolwiek zostało wybrane i wyprowadza wewnątrz VSCode.

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

Przy odrobinie konfiguracji możesz dodać Babel, aby wykonać transpilowanie w locie.

To bardzo proste, kiedy tworzysz nowy plik w programie VS Code i uruchamiasz go, jeśli nie masz jeszcze pliku konfiguracyjnego, tworzy go za Ciebie, jedyną rzeczą, którą musisz skonfigurować, jest wartość „programu” i ustawienie go do ścieżki twojego głównego pliku JS, wygląda następująco:

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

Nie ma potrzeby ustawiania środowiska do uruchamiania kodu w języku javascript, python itp. W kodzie Visual Studio, co musisz zrobić, to po prostu zainstalować rozszerzenie Code Runner, a następnie po prostu wybrać część kodu, którą chcesz uruchomić i nacisnąć przycisk przycisk uruchamiania obecny w prawym górnym rogu.

To może być teraz najłatwiejsze, od wersji 1.32:

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

Użyj własnego skrótu klawiszowego.

Zobacz Uwagi do wydania: sendSequence i zmienne .

Z vscode v1.32 możesz połączyć sendSequencesię z terminalem używając zmiennych, takich jak ${file}bieżący plik. Jeśli chcesz mieć tam inną ścieżkę, zamień $ {file} na swoją nazwę ścieżki w powiązaniu klawiszy powyżej.

\u000DTo powrót tak to będzie działać natychmiast.

Dodałem 's wokół ${file}zmiennej na wypadek, gdyby ścieżka do pliku zawierała spacje, na przykładc:Users\Some Directory\fileToRun

Sugerowałbym użycie prostej i łatwej wtyczki o nazwie Quokka, która jest obecnie bardzo popularna i pomaga w debugowaniu kodu w ruchu. Quokka.js . Największą zaletą korzystania z tej wtyczki jest to, że oszczędzasz dużo czasu, aby przejść do przeglądarki internetowej i ocenić swój kod, dzięki czemu możesz zobaczyć wszystko, co dzieje się w kodzie VS, co oszczędza dużo czasu.

Istnieje wiele sposobów uruchamiania języka JavaScript w programie Visual Studio Code.

Jeśli używasz Node, to polecam użyć standardowego debuggera w VSC.

Zwykle tworzę fałszywy plik, taki jak test.js, w którym wykonuję testy zewnętrzne.

W swoim folderze, w którym masz kod, tworzysz folder o nazwie „.vscode” i tworzysz plik o nazwie „launch.json”

W tym pliku wklej i zapisz. Teraz masz dwie możliwości przetestowania kodu.

Kiedy wybierzesz „Nodemon Test File”, musisz umieścić swój kod w pliku test.js.

Aby zainstalować nodemon i więcej informacji na temat debugowania za pomocą nodemon w VSC, polecam przeczytanie tego artykułu , który bardziej szczegółowo wyjaśnia drugą część pliku launch.json i jak debugować w 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",
        },
    ]
}

Inną opcją jest użycie konsoli narzędzi deweloperskich w programie Visual Studio Code. Po prostu wybierz „Przełącz narzędzia programistyczne” z menu pomocy, a następnie wybierz kartę „Konsola” w wyskakujących narzędziach programistycznych. Stamtąd masz te same narzędzia programistyczne REPL, które otrzymujesz w Chrome.

W przypadku systemu Windows : po prostu zmień skojarzenie .jspliku nanode.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".

Innym sposobem byłoby otwarcie terminala ctrl + ` execute node. Teraz masz aktywny węzeł REPL. Możesz teraz wysłać plik lub wybrany tekst do terminala. Aby to zrobić, otwórz paletę poleceń VSCode ( F1 lub ctrl + shift + p ) i wykonaj >run selected text in active terminallub >run active file in active terminal.

Jeśli potrzebujesz czystej REPL przed wykonaniem kodu, będziesz musiał ponownie uruchomić węzeł REPL. Odbywa się to w terminalu z węzłem REPL, ctrl+c ctrl+caby go zamknąć i wpisując, nodeaby rozpocząć nowy.

Prawdopodobnie mógłbyś przypisać komendę poleceń palety poleceń do dowolnego klawisza.

PS: nodepowinno być zainstalowane i na twojej drodze

Po prostu zainstaluj nodemon i uruchom

nodemon your_file.js

na terminalu VS Code.