개발 도구 확장

Prettier - Code formatter

코드의 포맷을 설정할 수 있는 확장이다. 여러 작업자와 협업시 포맷을 똑같이 설정할 수 있어서 편리하다. Prettier Playground 서비스를 이용하면 실시간으로 어떤 포맷이 적용되는지 확인할 수 있다.

로컬에 저장된 prettier 설정이 가장 먼저 우선순위가 되고 그 다음이 전역에 저장된 prettier이 우선순위가 된다. 즉, 로컬 → 글로벌 → VS Code 설정 순으로 적용된다고 보면 된다.

만약 로컬 저장소에 설정하려면 명령창에 아래와 같이 입력하여 로컬에 파일을 복사해서 사용한다.

cp ~/.prettierrc . 

Formatting Toggle

코드 포맷터를 켜고 끌 수 있는 기능을 제공한다. 에디터 하단에 있는 Formatting 버튼으로 조작 가능하다.

React Snippets

React에서 자주 사용되는 코드 조각을 빠르게 사용할 수 있도록 도와주는 확장이다.

React Pure To Class

함수형 컴포넌트를 클래스 컴포넌트로 쉽게 바꿔주는 기능을 한다.

Auto Import

필요한 모듈을 자동으로 불러오는 기능을 한다.

Import Cost

가져온 모듈의 크기를 시각적으로 화면에 표시한다.

Path Autocomplete

불러올 모듈 파일 경로를 자동 완성한다.

Auto Complete Tag

태그 자동 닫기(Auto Close Tag), 태그 자동 이름 변경(Auto Rename Tag) 기능을 사용할 수 있게 한다.

Bracket Pair Colorizer 2

코드 블록 마다 색상을 설정해서 구분 할 수 있도록 한다.

Color Highlight & Manager

Color Highlight은 해시코드로 입력한 컬러의 색상을 미리 보여주는 확장이다. Color Manage는 자바 스크립트에서 컬러를 확인하면서 컬러를 변경할 수 있게 하는 확장이다.

Image preview

이미지 파일을 에디터에서 미리볼 수 있게 한다.

Translator

한 → 영으로 번역해주는 기능을 한다.

Korean Language Pack

에디터를 한글로 사용할 수 있게 한다.