vscode 유용한 확장도구 (extension)

Korean Language Pack for Visual Studio Code

한글화 확장 기능

Prettier

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

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

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

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

Beautify

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

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

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

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

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

Live Server

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

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

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

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

Auto Rename Tag

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

Bracket Pair Colorizer

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

HTML Snippets

html snippet 지원

Path Intellisense

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

vscode-icons

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

Git History

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

그 외 추천

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