비쥬얼 스튜디오 코드(Vscode) 추천 Extension

​vscode 이용시 생산성을 높여주는 extension들. 오늘은 개인적으로 사용하고 추천하는 extension 리스트들을 정리해보았다. 

 

Auto Close Tag

태그를 쓸 때 자동적으로 끝맺음 태그도 쓸 수 있게 해준다.

 

 

Auto Rename Tag

태그를 수정할 때, 관련된 태그도 같이 수정해준다.

 

 

Auto Import

Import 코드를 쓸 때 자동완성 해준다.

 

 

Beautify

코드 포멧터로 들여쓰기를 정리해준다.

 

 

 

Jira and Bitbucket (Official)

프로젝트에서 Jira 나 Bitbucket을 사용한다면 vscode 내에서 연동해준다.

 

 

Docker

역시 프로젝트 혹은 개인적으로 도커를 사용하고 있다면 도커와 연동해주는 Extension

 

Lint 및 코드 포맷터 확장 프로그램

1. editorconfig : 만약 여러 유저가 VScode가 아닌 다른 IDE(Webstrom, Atom 등) 사용한다면 포맷 규칙을 정해준다.

2. eslint, stylelint : javascript, (s)css 등 동일한 문법(?, 예를 들어 홑따옴표 사용 통일)을 사용하기 위해서 사용하는 Extension

3. prettier : 저장시 자동적으로 교정해주는 extension (eslint, stylelint 연동 가능)

 

Git 관련 Extension 

1. Githistory : vscode 내에서 git 기록(누가 언제 수정했는지 등)을 볼 수 있다.

2. Gitlens : vscode 내에서 git과 쉽게 연동하여 여러 사항들을 보기 좋게 해주는 extension

 

Highlight matching tag

블록별로 보기 좋게 하이라이트를 그어주어서 보기 좋게 해준다.

 

live server

vscode 에서 코드를 수정했다면 저장만 하면 웹상(브라우저)에서 새로 고침없이 바로 변경사항을 확인할 수 있다.

 

live share

다른 이와 코드를 같이 작성하기 위해서 사용하는 툴.

 

 

material icon theme

vscode 내에서 아이콘을 보기 좋게 해주는 extension

 

path intelligence

경로를 작성할 때, 자동적으로 파일 경로를 완성해주는 extension

 

 

Rainbow brackets

괄호별로 보기 좋게 색깔 칠해줘서 가독성을 높여준다. 

 

 

 

Bracket Pair Colorizer

블록별로(괄호 열고 닫히는 칸) 색깔을 칠해져서 가독성을 높여준다.

 

 

CSS Peek

html, js 파일에서 클래스를 command 혹은 ctrl 키를 누르고 클릭하면 해당 클래스의 css 손쉽게 볼 수 있다.