Visual Studio Code에서 크롬(Chrome)으로 JavaScript 실행하기(Widows10 기준)

자바스크립트 에디터로 Visual Studio Code를 사용하기 위한 설정

 

 

1. 코딩(작업)하려는 폴더에서 VS Code 실행 (VS Code가 탐색기에 추가된 경우 마우스 우버튼 후 실행)

2. VS Code의 Command Palette(F1 또는 Ctrl+Shift+P)에서 "Tasks: Configure Task" 선택 또는 "tasks" 입력 후 해당 항목 선택

3. 구성할 작업 선택 '템플릿에서 tasks.json 파일 만들기' 선택

4. 작업 템플릿 선택에서 'Others 임의의 ~' 선택하면, tasks.json 파일이 열리고 작업 폴더에는 '.vscode' 라는 폴더가 새로 생기고 그 폴더에 tasks.json 이라는 파일이 생김

 

 

 

 

 

5. tasks.json 파일의 내용을 모두 지우고 아래와 같이 입력(복사&붙여넣기)

tsaks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "$"
            ],
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

** 붙여넣기 후 들여쓰기 맞출 것 (소스코드 정렬 단축키 Ctrl + K + F)

6. 작업 폴더에 .html 파일을 작성한 후 'Ctrl + Shift + B'를 누르면 크롬 브라우저가 열리면서 결과를 확인할 수 있음

** 디버깅(F5), 디버깅 없이 실행(Ctrl + F5)