[VSCode] 유용한 익스텐션(Extensions)

 

거의 필수로 사용하는 VScode익스텐션들을 정리 해보았다.

 

 

- prettier

저장 시 자동 줄바꿈등 코드를 예쁘게 만들어 줌

 

- Material Theme

코드화면의 테마 변경

- Material Icon Theme

파일 아이콘 예쁘게 변경

- Live Server

작성하고 있는 코드를 실시간으로 보여 줌

Open with Live Server (Alt+ L O)를 클릭하면 로컬 주소가 나오면서 실시간 창이 반영 됨.

- indent-rainbow

들여쓰기 시 아래와 같은 컬러효과.

(남들은 유용하다 했지만 쓰다보니 약간 거슬리는..)

- HTML CSS Support

Html 코드 작성시 미리 설정해둔 css가 있다면 자동 완성 기능

 

- CSS Peek

Html코드에서 설정한 클래스명 ctrl+클릭 시 해당 css파일로 이동

혹은 ctrl+t로 클래스명 검색 시 해당 css파일 이동가능

- Bracket Pair Colorizer

아래와 같이 코드블록에 컬러를 주어 구분하기 쉽게 도와 줌

- Auto Rename Tag

Html 태그 수정시 태그의 앞부분만 수정해도 뒤까지 auto 로 수정을 도와 줌

 

 

 

- ES7+ React/Redux/React-Native snippets

아래와 같은 키워드로 코드구조를 만들수 있는 snipents를 제공 함

rafce : allow function component 생성

rfce : function component 생성

rce : class component 생성

clg : console.log

 

 

- Code Runner

설치 후 ctrl + alt + n 누를 시 콘솔에 실행 결과 출력

 

- Code Spell Checker

잘못된 스펠링에 밑줄을 발생시켜 오타 방지에 도움을 줌

허용하고싶은 단어의 경우 밑줄이 발생한 코드에서 ctrl + . 으로

선택 옵션을 열어서 settings에 추가할 수 있다.

 

- Error Lens

아래와 같이 error, warning 메세지를 코드 내부에서 바로 확인하게 도와 줌

 

- Git Graph

git의 그래프를 VSCode 상에서 볼 수 있게 해줌

에디터 창 하단의 Git Graph를 누르면 확인할 수 있음