# VS Code 확장

JavaScript 개발을 돕는 에디터 확장 및 React 개발에 도움이 되는 브라우저 확장을 설치해봅니다.

# Prettier - Code formatter

Prettier - Code formatter (opens new window)는 설정된 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구 입니다.

# 설정

Prettier를 사용해 코드를 자동으로 스타일 하려면 약간의 설정이 필요합니다.

Settings(win: ctrl+, / mac: ⌘+,) 패널을 열어 'format javascript' 검색 후 사용하지 않도록 설정합니다. (체크 해제)

'format on save' 검색 후 사용 하도록 설정합니다. (체크)

'prettier' 검색 후 사용할 Prettier 규칙 (opens new window)을 설정합니다. (체크 또는 해제)

Prettier Playground (opens new window) 서비스를 이용하면 실시간으로 규칙 적용을 확인할 수 있습니다.

# Formatting Toggle

Formatting Toggle (opens new window)을 설치하면 클릭 한 번으로 포멧터(Prettier, Beautify 등)을 켜고 끌 수 있는 확장을 설치합니다.

# React Snippets

React 앱 개발에서 자주 사용되는 코드 조각을 빠르게 작성하도록 도와주는 ES7 React snippets (opens new window) 확장입니다.

# React Pure To Class

React 함수형 컴포넌트를 클래스 컴포넌트로 손쉽게 변경하려면 React Pure To Class (opens new window) 확장을 설치합니다.

# Auto Import

필요한 모듈을 자동으로 불러 들이는 Auto Import (opens new window) 확장을 설치하면 개발이 편리해집니다.

# Import Cost

가져온 모듈의 크기를 시각적으로 화면에 표시하려면 Import Cost (opens new window) 확장을 설치합니다.

# Path Autocomplete

불러올 모듈 파일 경로를 자동 완성하는 Path Autocomplete (opens new window) 확장을 설치하면 개발이 편리해집니다.

# Auto Complete Tag

태그 자동 닫기(Auto Close Tag), 태그 자동 이름 변경(Auto Rename Tag) 기능을 사용하고 한다면 Auto Complete Tag (opens new window) 확장을 설치합니다.

# Bracket Pair Colorizer 2

코드 블록 마다 색상을 부여해 구분을 손쉽게 하고 싶다면 Bracket Pair Colorizer 2 (opens new window) 확장을 설치합니다.

# Color Highlight & Manager

컬러 정보를 가진 텍스트의 색상을 미리보기 하고 싶다면 Color Highlight (opens new window) 확장을 설치합니다. 그리고 Color Manager (opens new window)를 설치하면 JavaScript 파일에서도 컬러 관리를 유용하게 할 수 있습니다.

# Image preview

이미지 파일을 에디터에서 미리보기 하고 싶다면 Image preview (opens new window) 확장을 설치합니다.

# Translator

클래스, 변수 및 함수 이름을 작성할 때 한글 → 영어 번역 기능을 사용하고 싶다면 Translator (opens new window) 확장을 설치합니다.

# Korean Language Pack

에디터 UI를 한글로 사용하고 싶다면 Korean Language Pack (opens new window) 확장을 설치합니다.

이 외에도 VSCode Marketplace (opens new window)에서 마음에 드는 확장을 찾아 설치해보세요.

# React Devtools

React 애플리케이션 개발을 돕는 Devtools (opens new window) 도구는 Chrome, Firefox 브라우저에 확장해 사용할 수 있습니다.