본문 바로가기
반응형
[Visual Studio Code] Live Preview 확장 프로그램 사용하기 이전에 Visual Studio Code에서 HTML/CSS/Javascript 파일을 실시간 편집 및 확인하는 방법으로 Browser Preview와 Live Server extension을 설치하여 테스트했었습니다. (아래 게시글 내용) [Visual Studio Code] Browser Preview 플러그인 사용하기 일반적으로 HTML/CSS/Javascript 등의 작업을 하는 경우 편집기에서 코드 수정을 한 후 크롬/엣지등의 브라우저를 따로 실행하여 결과를 확인하곤 했습니다. 이렇게 에디터와 브라우저를 왔다 갔다 rudalskim.tistory.com HTML Preview를 하기 위해서는 2개의 확장 프로그램을 설치해야만 했었는데, Visual Studio Code가 업데이트되어 히스토리를 .. 2021. 8. 12.
[Visual Studio Code] Browser Preview 확장 프로그램 사용하기 일반적으로 HTML/CSS/Javascript 등의 작업을 하는 경우 편집기에서 코드 수정을 한 후 크롬/엣지등의 브라우저를 따로 실행하여 결과를 확인하곤 했습니다. 이렇게 에디터와 브라우저를 왔다 갔다 작업을 해야 하기 때문에 번거롭고 불편합니다. 그래서 제가 사용하는 Visual Source Code의 플러그인을 검색해 보니 Browser Preview라는 플러그인을 발견하였고, 이 플러그인을 사용하면 에디터 안에서 바로 수정된 내용을 확인할 수 있는 것 같아 설치하여 테스트해 보았습니다. 어떤 식으로 동작되는가 하면 아래 그림과 같이 가운데 탭의 index.html을 수정하면 오른편의 Browser Preview탭에 변경된 결과가 바로 반영되어 확인할 수 있습니다. 우선 플러그인 설치를 위해 왼편의.. 2021. 6. 22.
반응형