[React] 크롬 확장 프로그램 및 VSCode 필수 extension

React 개발시 도움이 되는 확장 프로그램

크롬확장프로그램 

-  React Developer Tool : React로 만든 페이지의 경우, React 전용 개발자도구를 사용할 수 있다.

 

공용 VS extension

Extension명	설명
Auto Close Tag	HTML 코드의 태그를 자동으로 닫아줌	자동
Bracket Pair Colorizer	괄호 색을 표시하여, 메소드 범위 파악 용이하게 도와줌	자동
Prettier 또는 Beautify	코드의 가독성을 도와주는 익스텐션, 문자열을 사용할 때 '을 쓸지, "을 쓸지 결정, 또는 세미콜론을 코드뒤에 붙일지, 들여쓰기는 얼마나 할지	Root 폴더에 .prettierrc 파일 생성 필요
ESLint	자바스크립트의 문법을 확인해주는 도구 해당 도구를 사용할 경우, 터미널에서만 보이던 경고가 에디터상에서도 보이게 됨 기본도 좋지만, eslint-config-airbnb, eslint-config-google 등 특정 기업이 사용하는 eslint 설정값을 yarn/npm 으로 다운로드 받아 적용하기도 한다. ES6 또는 ES7 기반의 코드를 일관된 형식으로 코드를 자동으로 변환해주는 확장프로그램	Extension 설명참조 및 프로젝트 초기설정 필요
Material Icon Theme 또는 vscode-icons	VSCode의 아이콘을 이쁘게 바꿔주는 익스텐션(파일 확장자에 따라), 시각적으로 안정감을 선호할 경우 사용	자동?
Path Intellisense	코드 내에서 Path를 입력할 경우, 자동 후보를 제공해줌	자동
Browser Preview 또는 Open in Browser	자잘한 변경 사용시 브라우저 프리뷰로 동시에 확인 가능하도록함
Debugger for Chrome	크롬으로 디버깅 시 매우 유용함
Javascript code snippets	축약어로 ES6 또는 Typescript, HTML 문법 생성 가능	Extension 설명 참조해서 사용 가능
Color Picker	색관련 Value위에 마우스 over시 색 선택 가능하도록 지원

- Prettier와 ESLint의 기본 설정만 적용하고, 개발을 진행하는 것을 추천

React 전용 extension

Extension명	설명
ES7 React/Redux ... snippets	React/Resux/GraphQL/React-Native 관련 축약어로 쉽게 컴포넌트 scaffold 생성 가능	Extension 설명 참조해서 사용 가능