Beautify
작성된 코드를 정렬해주는 익스텐션이다. VSCode의 확장 탭에서 Beautify를 검색하면 설치할 수 있다.
설정방법(macOS 기준)
Code > 기본 설정 > 바로가기 키
HookyQR.beautify: 선택한 코드만 정렬해줌
HookyQR.beautifyFile: 파일 전체를 정렬해줌
검색창에 둘 중 원하는 것을 검색해서 키 바인딩 값으로 자신이 원하는 단축키(cmd + alt + l)를 지정해준다.
Live Server
작성하고 있는 HTML 파일을 브라우저에서 바로 확인할 수 있는 익스텐션이다. 확장 탭에서 Live Server를 검색하면 설치할 수 있다.
사용방법
- HTML 파일을 우클릭하면 나오는 Open in Default Broswer를 클릭해주면 된다.
- 또 다른 방법으로는 VSCode의 하단에 보면 Go Live 버튼이 있는데 이 버튼을 눌러주면 브라우저에서 변경사항을 바로바로 확인할 수 있다.
CSS Peek
HTML 파일과 CSS 파일이 분리되어 있을 때, 특정 HTML 태그의 스타일이 있는 위치로 이동시켜준다. 마찬가지로 VSCode의 확장 탭을 통해 설치할 수 있다.
사용방법
커맨드 키를 누른 상태로 HTML 태그의class나 id 값을 누르면 CSS 파일로 이동시켜준다.
