Visual Studio 코드에서 JavaScript 실행

JavaScript를 실행하고 다음을 사용하여 결과를 표시하는 방법이 있습니까? Visual Studio Code를 있습니까?

예를 들어, 다음을 포함하는 스크립트 파일 :

console.log('hello world');

Node.js가 필요하다고 가정하지만 어떻게해야합니까?

으로 비주얼 스튜디오 코드 비주얼 스튜디오를 사용하여 작성하지 코드 - 나는 마이크로 소프트의 새로운 코드 편집기를 의미한다.

이 솔루션은 현재 열려있는 파일을 노드에서 실행하고 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 UI 메뉴에서 '코드'> '환경 설정'> '키보드 단축키'로 이동하십시오. 이것을 키보드 단축키에 추가하십시오 :

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

물론 키 조합으로 원하는 것을 선택할 수 있습니다.

최신 정보:

JavaScript 코드를 실행하여 테스트 한다고 가정하면 해당 속성 을 로 설정하여 작업을 테스트 작업 으로 표시 한 다음 단일 동작 호출 을 위해 명령 에 키를 바인딩 할 수 있습니다 .isTestCommandtrueworkbench.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 Extension 설치
2. 텍스트 편집기에서 JavaScript 코드 파일을 연 다음 단축키 Control+ Alt+ N(또는 macOS의 경우 ⌃ Control+ ⌥ Option+ N)를 사용하거나를 누른 다음를 F1선택 / 입력 Run Code하면 코드가 실행되고 출력이 출력 창에 표시됩니다.

또한 JavaScript 코드의 일부를 선택하고 코드 스 니펫을 실행할 수 있습니다. 확장은 저장되지 않은 파일과도 작동하므로 파일을 작성하고 Javascript로 변경하고 코드를 빠르게 작성할 수 있습니다 (빠른 것을 시도해야하는 경우). 매우 편리합니다!

아직 언급되지 않은 것에 놀랐습니다.

간단히 .jsVS 코드에서 파일을 '디버그 콘솔'탭으로 전환하고 왼쪽 탐색 모음의 디버그 버튼을 누른 다음 실행 아이콘 (재생 버튼)을 클릭하십시오!

nodejs를 설치해야합니다!

이것은 내 의견으로는 가장 빠른 방법입니다.

• Visual Studio 코드에서 개방형 통합 터미널 (View > Integrated Terminal )
• 유형 'node filename.js'
• 엔터 키를 치시오

참고 : 노드 설정이 필요합니다. (homebrew가있는 경우 터미널에 'brew install node'를 입력하십시오)

노트 2 : homebrew 및 node는 아직 권장하지 않습니다.

좋은 하루 보내세요.

내장형 터미널의 바로 가기는 ctrl+ `이고 입력하십시오 node <filename>.

또는 작업을 생성 할 수 있습니다. 이것은 내 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"
}

여기에서 바로 가기를 만듭니다. 이것은 내 키 바인딩입니다 .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"
}
]

Command Pallete에서 'run'이 열리지 만 여전히 실행하려는 작업 (이 경우 노드)을 마우스로 입력하거나 선택해야합니다. 두 번째 단축키는 출력 패널을 토글합니다. 이미 단축키가 있지만 이러한 키는 서로 옆에 있고 작업하기가 더 쉽습니다.

글쎄, 단순히 코드를 실행하고 콘솔에 출력을 표시하기 위해 @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 Runner

당신이해야 할 일들이 설정되어 Node.js를 에서 경로 사용자 설정

Windows 시스템에 경로 를 설치할 때 경로 를 설정해야합니다 .

내겐 \"C:\\Program Files\\nodejs\\node.exe\"

파일 디렉토리 이름에 공백이 있으므로

아래 이미지를 참조하십시오 . 나는 코드를 실행하지 못했습니다 처음에 내가에서 실수 만든 원인을 경로 이름을

이것이 도움이되기를 바랍니다.

그리고 물론, VS 코드JS 에서 실행하기 위해 여기에 왔기 때문에 귀하의 질문에 도움이되었습니다.

VS 코드에서 다음 단계를 수행하십시오. [Windows OS에서 수행]

1. 새 파일 만들기

2. 자바 스크립트 코드 작성

3. 파일을 filename.js로 저장

4. 디버깅 메뉴로 이동

5. 디버깅 시작을 클릭하십시오

6. 또는 단순히 F5를 누르십시오

디버깅 시작 스크린 샷

터미널에서 JS 코드 출력 스크린 샷

설정이 필요없는 Node Exec을 사용하여 현재 종료중인 파일이나 VSCode 내부에서 선택한 파일을 빌드합니다.

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

약간의 설정으로 바벨을 추가하여 즉시 변환 할 수 있습니다.

VS 코드에서 새 파일을 생성하고 실행할 때 매우 간단합니다. 구성 파일이없는 경우 구성 파일이 없으면 "프로그램"값만 설정하면됩니다. 기본 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
        }
    ]
}

Visual Studio 코드에서 javascript, Python 등에서 코드를 실행하기위한 환경을 설정할 필요가 없습니다. 코드 러너 확장 프로그램을 설치 한 다음 실행하려는 코드 부분을 선택하기 만하면됩니다. 오른쪽 상단에 실행 버튼이 있습니다.

v1.32부터는 이것이 가장 쉬울 수 있습니다.

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

자신의 키 바인딩을 사용하십시오.

릴리스 정보 : sendSequence 및 variables를 참조하십시오 .

vscode v1.32를 사용하면 다음 sendSequence과 같은 변수를 사용하여 터미널에 연결할 수 있습니다${file} 에서는 현재 파일 . 다른 경로를 원하면 위의 키 바인딩에서 $ {file}을 경로 이름으로 바꾸십시오.

은 \u000D즉시 실행할 수 있도록 반환합니다.

파일 경로에 공백이있는 경우 변수 '주위 에 s를 추가 ${file}했습니다.c:Users\Some Directory\fileToRun

요즘 매우 인기가 있고 이동 중에 코드를 디버깅하는 데 도움이되는 Quokka라는 간단하고 쉬운 플러그인을 사용하는 것이 좋습니다. Quokka.js . 이 플러그인을 사용하는 것의 가장 큰 장점은 웹 브라우저를 사용하고 코드를 평가하는 데 많은 시간을 절약한다는 것입니다.이를 사용하면 VS 코드에서 발생하는 모든 것을 볼 수 있으므로 많은 시간이 절약됩니다.

Visual Studio Code에서 자바 스크립트를 실행하는 방법에는 여러 가지가 있습니다.

Node를 사용하는 경우 VSC에서 표준 디버거를 사용하는 것이 좋습니다.

나는 보통 외부 테스트를 수행하는 test.js와 같은 더미 파일을 만듭니다.

코드가있는 폴더에 ".vscode"라는 폴더를 만들고 "launch.json"이라는 파일을 만듭니다.

이 파일에서 다음을 붙여 넣고 저장하십시오. 이제 코드를 테스트하는 두 가지 옵션이 있습니다.

"Nodemon Test File"을 선택하면 test.js에서 테스트 할 코드를 넣어야합니다.

VSC에서 nodemon으로 디버깅하는 방법에 대한 nodemon 및 자세한 정보를 설치하려면 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 Code 내에서 개발자 도구 콘솔을 사용하는 것입니다. 도움말 메뉴에서 "개발자 도구 토글"을 선택한 다음 나타나는 개발자 도구에서 "콘솔"탭을 선택하십시오. 거기에는 Chrome에서와 동일한 개발 도구 REPL이 있습니다.

Windows의 경우 : 파일의 파일 연결 .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".

다른 방법은 터미널 ctrl +` execute 를 여는 것 node입니다. 이제 노드 REPL이 활성화되었습니다. 이제 파일 또는 선택한 텍스트를 터미널로 보낼 수 있습니다. 개폐 VSCode를 수행하기 위하여 명령 파레트 ( F1 또는 CTRL + 시프트 + 쪽 )하고 실행 >run selected text in active terminal하거나 >run active file in active terminal.

코드를 실행하기 전에 깨끗한 REPL이 필요한 경우 노드 REPL을 다시 시작해야합니다. 이것은 노드 REPL ctrl+c ctrl+c이 있는 터미널 에서 종료하고 node새 시작을 입력 할 때 수행됩니다 .

명령 팔레트 명령을 원하는 키에 키 바인딩 할 수 있습니다.

추신 : node설치하고 경로에 있어야합니다

nodemon을 설치하고 실행하십시오.

nodemon your_file.js

vs 코드 터미널에서.