PDF (화면 그대로): 설치된 Chrome/Edge로 화면에서 보이는 그대로 한 장의 연속 페이지로 저장 — 100vh·고정 헤더·반응형 레이아웃이 화면과 동일 (페이지 분할로 깨지지 않음). 미리보기에서 고른 기기 폭(모바일 등)을 그대로 따라갑니다. 텍스트 선택이 필요하면 설정 pdfMode: document(A4 분할). Chrome이 없으면 브라우저 인쇄로 폴백.
자체 완결 HTML: 로컬 CSS·JS·이미지를 한 파일에 인라인해 어디서든 열리는 단일 HTML로.
🧭 브라우저에서 열기 / URL 복사, 상태바 표시, SPA 폴백, 고정 포트.
🚀 사용법
HTML 파일을 열면 미리보기가 자동으로 열립니다(설정으로 끌 수 있음).
수동으로 열려면:
에디터 우상단 미리보기 아이콘
단축키 ⌘⇧1 (mac) / Ctrl+Shift+1
명령 팔레트(⌘⇧P) → 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' 패널로 전달
htmlViewer.showErrorOverlay
true
에러 발생 시 미리보기 화면에 유리 카드로 표시
htmlViewer.qualityChecks
false
깨진 링크·alt 없는 이미지 점검
htmlViewer.spaFallback
false
확장자 없는 경로 → index.html (SPA 라우팅)
htmlViewer.port
0
서버 포트 고정 (0=자동)
htmlViewer.allowNetworkPreview
false
⚠️ 같은 Wi-Fi 기기 접속 허용 (QR용)
htmlViewer.syncScroll
false
에디터 스크롤 → 미리보기 동기화
🧭 명령
HTML: 미리보기 열기 · 미리보기 열기 (옆 패널) · 새로고침 · 브라우저에서 열기 ·
미리보기 URL 복사 · 미리보기 콘솔 열기 · 설정 열기 · 휴대폰으로 보기 (QR) ·
PDF로 내보내기 · 자체 완결 HTML로 내보내기
🔒 동작 방식 · 보안
미리보기는 127.0.0.1(로컬)에만 바인딩된 정적 서버로 제공되어 외부에 노출되지 않습니다.
서버 루트는 워크스페이스 폴더(없으면 해당 파일의 폴더). 상위 경로 접근은 차단됩니다.
로컬 한정이지만 워크스페이스 파일이 서빙 대상이 되므로, 민감 파일(.env 등)이 있는
폴더에서 사용할 때는 알고 사용하세요.
