VSCode extensions 비주얼 스튜디오 코드 익스텐션 추천

 

 

데브리입니다. 어제부터 새로운 유데미 강의를 듣기 시작했는데, 듣기 전에 vscode extention을 몇 개 추천하더라구요. 대부분이 이미 제가 쓰고 있었던 거라 새로울 건 없었지만 혹시 아직 모르시는 분들을 위해 추천합니다. 

 

 

 

---

 

 

 

1. Prettier

 

코드를 쓰다가 빠트린 부분이나 띄어쓰기 등이 잘못된 경우, 저장을 할 때마다 자동으로 바로잡아주는 필수 extention 입니다. install 하는 걸로 끝이 아니라 꼭 prettier user settings 에서 가셔서 추가로 설정할 부분들을 확인하시고 원하시는 대로 설정하셔서 사용하시길 권해요. (세세한 설정은 유튜브나 구글로 검색하셔서 쉽게 확인하실 수 있어요)

 

 

 

 

 

 

 

 

2. vscode-icons

 

저장하는 파일명에 따라 자동으로 파일 아이콘을 바꿔주기 때문에 여러 파일을 만들어서 작업할 때 훨씬 보기 편하게 만들어 주는 extension 입니다. 프로젝트가 커질수록 파일의 개수가 많아지면 일일이 파일명으로 구분하기 힘들어질 수 있는데 vscode-icons를 미리 설치하면 파일을 찾는 시간이 훨씬 단축되겠죠?

 

 

 

 

 

 

 

 

 

3. Bracket Pair Colorizer

 

이건 이번 강의를 통해 처음 설치하게 된 extension 입니다. 코딩을 하다보면 (). {}, [] 등의 괄호가 너무 많이 쓰이기 때문에 제대로 닫았는지(?) 어느 괄호가 어디서부터 시작된건지? 등 헷갈릴 때가 많아요. 이 Bracket Pair Colorizer가 매치되는 괄호에 따라 색을 바꿔주기 때문에 눈으로 확인하기가 훨씬 쉬워질 것 같네요. 

 

반응형

 

 

 

 

 

 

4. ES React/Redux/GraphQL/React-Native snippets 

 

예전부터 설치는 해뒀었지만 있는지도 몰라서 잘 쓰지는 않았었는데, 익숙해지면 도움이 될 것 같네요. 

두번째 이미지를 보시면 알 수 있듯이 자주쓰는

 import React ', { component } from react';

같은 라인을 rcc 로 입력하면 자동으로 불러내는 기능이 있습니다.