[HTML] HTML 파일 Chrome에서 실행하기

목표: 작성된 파일(e.g. Test.html)을 Chrome 브라우저에서 실행하기

요약

1. Configure Tast 실행: ctrl + shift + p
2. tasks.json 파일 생성 및 수정
3. MSBuild 실행
4. tasks.json 파일에 Chrome 설정 반영하기
5. 파일 선택 후 실행

 

HTML Extensions 설치, HTML 사용하기는 아래 게시글 참고!

2019/11/20 - [놀고있네/HTML] - [HTML] VS Code - HTML Extensions 설치, HTML 사용하기

[HTML] VS Code - HTML Extensions 설치, HTML 사용하기

 

1. Configure Tast 실행

 

ctrl + shift + p 누르고 Tasks: Configure Task 입력

 

2. tasks.json 파일 생성 및 수정

 

- tasks.json 파일을 처음 생성하는 경우

  Create tasks.json file

 

 

- 이미 tasks.json 파일이 생성되어 있는 경우

  Open tasks.json file

 

3. MSBuild 실행

빌드할 소스타겟을 실행하는 건데, 

Tasks: Configure Task 를 클릭하면 아래에 tasks.json 이 뜨면, 그걸 클릭하고 MSBuild를 선택

 

아마 처음 tasks.json 파일을 로딩한 경우라면 아래와 같이 되어 있을 것이다.

 

 

tasks.json 을 생성하자마자 워크스페이스에 .vscode라는 폴더가 생성되고 들어가 보면 해당 json 파일이 생성되어 있음을 확인할 수 있다.

 

 

4. tasks.json 파일에 Chrome 설정 반영하기

 

아래 코드로 변경하고 저장

 

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

난 혹시 몰라 기존 tasks.json 파일을 백업해뒀다 (tasks_old.json)

 

** 주의사항

command에 입력한 경로에 Chrome.exe 파일이 존재해야하고

다른 경로라면 실제 Chrome.exe이 설치된 경로로 변경 바람

 

5. 파일 선택 후 실행

 

ctrl + shift + b 누르면

 

크롬에서 실행된다

---