YunDaeHyeon
← Lab

React 개발을 할 때 유용한 VSCode 확장 프로그램 모음

스터디2024.08.07
  • JavaScript
  • React
  • GraphQL

⭐️ React 개발을 할 때 유용한 VSCode 확장 프로그램 모음

1. JavaScript (ES6) Code Snippets

: 자바스크립트 코드 스니펫을 제공하는 확장 프로그램. 반복되는 코드를 간편하게 작성할 수 있으며, 사용자 정의 스니펫을 지원합니다.

2. ES7 React / Redux / GraphQL / React-Native snippets

: 키워드를 사용하여 빠르게 코드를 작성할 수 있는 확장입니다. (React 개발자라면 필수!)

3. ESLint

: 코드를 자동으로 형식화하고 오류를 경고메세지로 출력합니다. 협업 시 일관된 서식을 유지할 수 있어 유용한 확장입니다.

4. Bracket Pair Colorzier

: 코드에서 대괄호를 색상으로 구분하여 쉽게 찾을 수 있게 도와주는 확장입니다.

5. Live Server

: 로컬 호스트 서버를 시작하고 코드 변경 시 자동으로 새로고침 되는 기능을 제공합니다.

6. Browser Preview

: VS Code내에 브라우저 미리보기를 할 수 있는 확장입니다.

7. Path Intellisense

: 파일 경로를 자동 완성해주는 확장이며, React 프로젝트에서 파일을 불러올 때 빠르게 코드를 작성할 수 있습니다.

8. Reactjs code snippets

: React 개발을 위한 코드 스니펫을 제공하는 확장 프로그램입니다. 위 2번 확장과 유사합니다.

9. Prettier - Code formatter

: 코드 스타일을 자동으로 관리해주는 확장이며, 설정을 통해 커스텀 할 수 있습니다.

10. vscode-styled-components

: styled-components를 사용할 때 자동완성을 도와주는 확장입니다.

번외. React Developer Tools

: 크롬 브라우저에서 사용할 수 있는 확장 프로그램입니다. React 앱의 컴포넌트 계층을 시각적으로 검사하고 관련된 상태와 속성을 확인할 수 있습니다. 개발 중 React 앱을 디버깅하거나 성능 최적화에 매우 도움이 됩니다.