> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/getting-started/extension.md).

# 개발 도구 확장

## Prettier - Code formatter

코드의 포맷을 설정할 수 있는 확장이다. 여러 작업자와 협업시 포맷을 똑같이 설정할 수 있어서 편리하다. [Prettier Playground](https://prettier.io/playground/) 서비스를 이용하면 실시간으로 어떤 포맷이 적용되는지 확인할 수 있다.&#x20;

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

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

```javascript
cp ~/.prettierrc . 
```

{% endhint %}

## Formatting Toggle

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

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MSao_DvlvUfXeXk_awm%2F-MSaunrD5XOYHCWhBOks%2Fimage.png?alt=media\&token=7690e485-e23a-4c12-9f01-dd99cfafd10b)

## React Snippets

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

## React Pure To Class

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

## Auto Import

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

## Import Cost

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

## Path Autocomplete

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

## Auto Complete Tag

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

## Bracket Pair Colorizer 2

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

## Color Highlight & Manager

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

## Image preview

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

## Translator

한 → 영으로 번역해주는 기능을 한다.&#x20;

## Korean Language Pack&#x20;

에디터를 한글로 사용할 수 있게 한다.&#x20;