Vscode에서 html을 chrome으로 실행하기

vscode로 html 파일을 chrome(크롬)으로 실행하는 방법을 알아보겠습니다. 먼저 vscode를 실행시킵니다. 파일-작업영역에 폴더추가 를 클릭하고 원하는 곳의 폴더를 지정하고 추가(A)합니다. 저는 C:\Javascript\Test 폴더를 지정했습니다.

 

 

 

그 후 만드셨거나 만드실  html 파일을 작업영역 폴더(저는 C:\Javascript\Test) 내에서 불러 옵니다. 없으시면 링크시켰으니 다운 받아서 작업영역 폴더에 넣고 vscode에서 파일-파일열기로 여시면 됩니다.  aa.html 

 

그 다음 ctrl+shift+P 를 누르고 configure task 를 치면 아래처럼 나옵니다. 바로 선택 하시면 됩니다.

 

그 다음 템플릿에서 tasks.json 파일 만들기를 선택하고 MSBuild 빌드 대상~ 선택합니다.

 

 

 

 

tasks.json 파일이 켜지면서 아래와 같이 나타납니다.

 

싹 지우시고 다음코드로 엎으시고 저장(ctrl+s)하세요.

{
    "version": "2.0.0",
    "tasks": [
        {
            "taskName": "chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

 

 

저같은 경우는 크롬(chrome)이 위와 같은 폴더에 있습니다. 다른 폴더에 있다면 바꿔주셔야 합니다. aa.html 탭으로 가서 ctrl+shift+B 누르시면 크롬이 열리면서 html이 실행될 겁니다.