VSCode 추천 Extensions 개발 능률 향상!

이번 포스팅에서는 개발 능률을 향상 시킬 수 있는 VSCode 의 Extension을 추천드리려 합니다.

 

1. ident-rainbow

indent-rainbow는 위의 이미지와 같이 들여쓰기 정도를 색상으로 보여주는 Extension 입니다.

들여쓰기가 이상하다면 붉은 색으로 표출되어 바로 파악이 가능합니다.

코드 자동정렬 단축키 (Alt + Shift + f) 로 변화를 확인하세요!

 

2. Rainbow Brackets

Rainbow Brackets은 괄호의 색상을 짝에 맞게 변경해주어 열린 부분과 닫는 부분을 파악하는데 도움을 줍니다.

 

3. Prettier - Code formatter

코드를 분석하여 일관된 코드 스타일을 유지시켜주는 코드 포메터 입니다.

여러 옵션들을 설정하여 팀의 코드 스타일 유지에 도움을 줍니다. 설정관련한 내용은 다른 포스팅을 참고하세요

 

4. ESLint

ESLint 는 자바스크립트 코드에서 발견되는 안티패턴을 식별해주는 Extension입니다. 

프론트앤드 개발자라면 설치해서 사용해보세요!

 

5. Import Cost

Import Cost는 프론트앤드에서 import 하는 모듈의 사이즈와 압축사이즈를 보여주는 Extension입니다.

용량이 큰 모듈의 경우 페이지 로딩에 문제가 될 수 있으니 파악하는데 도움이 되겠죠!

 

6. GitLens

GitLens는 git 의 기능을 활용할 수 있는 Extension 입니다.

작성된 코드의 행을 클릭하면 누가 언제 Commit 했는지와 코맨트를 확인하실 수 있습니다.

 

7. Git Graph

Git Graph는 Branch 간 Merge가 어떻게 되었는지 그래프로 보여주어 한눈에 브랜치 병합과 생성,

커밋메시지를 확인할 수 있습니다.

설치 후 Source Control 메뉴에서 View Git Graph 아이콘을 클릭하시면 됩니다.

해당 기능은 GitLens에서는 Pro 버전에서만 제공하는 기능입니다.

 

이 외에도 좋은 Extension들이 많습니다. 여러 Extension을 설치해보고 지우고 하면서

자신에게 맞는 것을 설치하여 개발능률을 올려봅시다!