← 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 앱을 디버깅하거나 성능 최적화에 매우 도움이 됩니다.