vscode 유용한 확장도구 (extension)

한글화 확장 기능

가장 대중적으로 쓰이는 코드 포멧터

기본 설정 방법 : 컨트롤 + , 를 누른 후 formatOnSave검색 후 체크

설정이 완료 되면 저장 시 마다 자동으로 인덴트 등을 잡아준다. 상세한 설정은 다른 포스팅에서 다룰 예정

beautify와 같이 쓸 경우 충돌이 나니 둘 중 하나만 사용할 것

beautify는 코드의 들여쓰기를 정리해주는 확장기능 입니다

설치 후에 키 지정이 필요합니다

윈도우 기준으로 파일 - 기본 설정 - 바로 가기 키 를 실행합니다

검색어 창에 HookyQR.beautify를 입력한 후 HookyQR.beautify를 클릭하면 단축키를 입력하는 창이 나옵니다

ctrl + alt + L 로 설정을 해주면 끝 / 단축키는 원하시는 것으로 하시면 됩니다

html 파일을 브라우저에 띄어서 확인 할 수 있게 도와주는 확장 기능

파일을 수정 후 저장하면 브라우저에서 바로 적용이 됩니다

설치를 하게 되면 우측 하단에 Go Live 가 생성 되어 있습니다. 클릭을 하시면 브라우저가 실행됩니다

또는 우측에 파일을 우클릭 후 Open with Live Server 를 누르셔도 됩니다.

html 태그를 수정 하면 여는 태그와 닫는 태그를 자동으로 수정

브라켓의 인덴트를 색깔 별로 구분

html snippet 지원

자바스크립트(node, react 등)에서 파일 path를 입력할 때 자동완성 기능을 지원

아이콘을 직관적으로 바꿔줌

git log를 그래프 형식으로 나타내줌

Terminal
Live Sass Compiler
Turbo Console log
Better Comments
Highlight Matching Tag
GitLens
REST Client