윈도우(Windows) Visual Studio Code 웹페이지 테스트시 크롬(chrome) 실행 환경 만들기(tasks.json)

Visual Studio Code에서 HTML/CSS나 JavaScript 테스트를 할 경우,

크롬(Chrome)으로 실행해서 바로 테스트를 해보고 싶을 경우가 있다.

 

새로만든 폴더에서 새로운 html파일 등을 작성해서 테스트하고 있다고 가정하겠다.

Ctrl+Shift+B를 누르면 다음과 같은 화면이 뜬다.

Configure Build Task를 눌러주자.

Configure Build Task를 누르면,

tasks.json파일을 만들어보자.

task.json파일 생성을 누르고,

적당한 게 없어보이니 Others로.

적당한 게 없어보이니 Others를 눌러주면,

위와 같이 Hello라고 shell에 찍어주는 echo task가 자동으로 생성된다.

이 task.json파일을 아래와 같이 교체해준다.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "chrome",
            "type": "process",
            "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
            "args": [
                "${file}"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

command에 있는 경로를 본인의 chrome경로에 맞게 조정해주어야 하는데 주의할 점은

윈도우의 \경로 대신 /경로로 변경해줄 것!

type을 shell에서 process를 바꿔줬고, args를 통해 argument(인자)를 추가해주었다는 것만 알면 된다.

extension설치로도 좋은 방법들이 더 있으나 가장 쉽게 할 수 있는 방법 하나를 소개 완료했음.

끝.