HTML Live Viewer

VS Code에서 HTML을 실제 브라우저처럼 미리보기하는 확장입니다. 로컬 정적 서버를 띄워 편집기 안 탭에서 http://localhost로 렌더하므로, 일반 브라우저와 동일하게 동작합니다.

기능

🌐 실제 브라우저와 동일한 렌더링 — 내부적으로 로컬 서버를 띄워 iframe으로 임베드. fetch, ES 모듈(<script type="module">), 절대경로(/assets/...), 웹폰트 등 그대로 동작합니다.
⚡ 라이브 리로드 — 편집/저장 즉시 미리보기가 갱신됩니다(SSE). 링크된 style.css, script.js를 고쳐도 자동 반영.
📝 저장하지 않은 편집도 반영 — 편집 중인 에디터 버퍼를 우선 제공합니다.
🖥 전체 탭으로 표시 — 옆 분할이 아니라 탭 하나를 꽉 채워 웹페이지처럼 보여줍니다.
📱 반응형 기기 미리보기 — 미리보기 상단 툴바에서 Desktop/Laptop/Tablet/Mobile 폭 전환.
🐞 콘솔/에러 전달 — 미리보기 페이지의 console.*·자바스크립트 에러를 VS Code 'HTML Preview Console' 출력 패널로 보여줍니다.
🧭 브라우저에서 열기 / URL 복사 — 같은 페이지를 실제 브라우저로 열거나 URL을 복사.
👁 활성 에디터 따라가기, 상태바 표시.

HTML 파일을 엽니다 → 미리보기가 자동으로 열립니다(설정으로 끌 수 있음).
수동으로 열려면:
- 에디터 우상단 미리보기 아이콘
- 단축키 ⌘⇧1 (mac) / Ctrl+Shift+1 (win/linux)
- 명령 팔레트(⌘⇧P) → HTML: 미리보기 열기
- 탐색기에서 .html 우클릭 → HTML: 미리보기 열기
편집하면 즉시 반영됩니다. 상단 🌐 아이콘으로 실제 브라우저에서도 열 수 있습니다.

설정	기본값	설명
`htmlViewer.autoOpenOnHtml`	`true`	HTML 파일을 열면 미리보기를 자동으로 엽니다.
`htmlViewer.autoOpenOnFolder`	`false`	폴더를 열 때 워크스페이스에서 HTML(index.html 우선)을 찾아 자동으로 엽니다.
`htmlViewer.autoRefresh`	`onType`	`onType`(입력 즉시) / `onSave`(저장 시) / `off`(수동)
`htmlViewer.refreshDelay`	`300`	onType 모드에서 입력 후 새로고침까지 대기(ms)
`htmlViewer.followActiveEditor`	`true`	포커스한 HTML 파일로 미리보기 대상 자동 전환
`htmlViewer.forwardConsole`	`true`	페이지의 콘솔/에러를 'HTML Preview Console' 출력 패널로 전달

미리보기는 127.0.0.1(로컬)에만 바인딩된 정적 서버로 제공되며, 외부 네트워크에 노출되지 않습니다.
서버 루트는 워크스페이스 폴더(없으면 해당 HTML 파일의 폴더)이며, 그 아래 파일을 서빙합니다. 상위 경로 접근(디렉터리 트래버설)은 차단됩니다.
로컬 한정이지만, 워크스페이스 안의 파일이 서빙 대상이 되므로 민감 파일(.env 등)이 있는 폴더에서 사용할 때는 이 점을 알고 사용하세요.

.vsix 파일을 확장 패널 ... → VSIX에서 설치, 또는:
```
code --install-extension html-live-viewer-<버전>.vsix
```

npm test          # 서버 통합 테스트 + 확장 관통 테스트
npm run package    # .vsix 생성 (vsce)