React 초보개발자를 위한 VScode 필수 플러그인 4가지

 

소프트웨어 개발을 위해 VScode를 설치하고 나면, 가장 먼저 하는 일은 플러그인을 잘 설치하는 것입니다. 

 

가장 기본적이고, 기초적인 프로그래밍을 위해서 반드시 필요한 플러그인 4가지를 소개합니다. 

 

1. Prettier - Code formatter

 

코드 스타일을 자동으로 정리해주는 오픈소스 코드 포매터입니다. 특정 스타일 가이드 없이 일관된 포맷을 적용할 수 있습니다. 

 

주요 특징으로, 

• 자동 포맷팅: 저장 시 코드 스타일 자동 정리
• 일관성 유지: 팀원 간 코드 스타일 차이를 제거
• 구성 필요없음: 별도의 규칙 설정 없이 기본값으로 사용 가능

다양한 환경 지원: VS Code, WebStorm, CLI, Git Hooks 등과 연동 가능

 

• Prettier 설치 후에는 잊지 말고 설정을 수정해주셔야 합니다. 
  • 윈도우에서 "Ctrl + ,(쉼표)" 맥에서는 "Cmd + ,(쉼표)"를 입력하면, VS code 설정창이 나옵니다. 
  • 여기서 검색으로 "format on save"를 찾으면, 체크박스가 체크가 안되어 있습니다.
  • 체크박스를 표시하면 자동저장 됩니다.  
   

 

 

2. Material Icon Theme

 

다양한 파일 및 폴더 유형에 직관적인 아이콘을 제공합니다.

Material Design 스타일을 적용한 깔끔한 디자인이 구현됩니다. 

• 2,500개 이상의 아이콘 지원: 파일 및 폴더 유형에 맞는 아이콘 제공
• 자동 감지 기능: 파일 확장자 또는 폴더 이름에 따라 적잘한 아이콘 자동 적용
• 사용자 지정 가능: 특정 파일 또는 폴더에 원하는 아이콘 설정 가능
• 경량&빠른 성능: 개발 환경에 부담 없이 사용 가능

 

3. Error Lens

 

코드 내 에러 및 경고를 더욱 가시적으로 표시해줍니다. 

기존 VS Code의 오류 표시보다 더욱 직관적인 시각적 피드백이 제공됩니다. 

실시간 코드 품질 개선을 위한 필수 확장 프로그램입니다. 

• 즉각적인 오류 강조: 코드 라인에서 직접 오류 메시지를 표시
• 배경 강조 기능: 심각한 오류 및 경고에 대해 컬러 배경 효과 적용
• 진한 밑줄 & 아이콘 표시: 오류 및 경고를 쉽게 식별 가능
• Lint 도구와 연동: ESLint, TSLint, Stylelint 등과 합께 사용 가능 

이처럼 바로바로 에러를 보여줘서 초보 개발자에게는 필수입니다만, 너무 많은 오류 메시지는 혼란스러울수도 있습니다.

4. Live Server

 

정적 및 동적 웹 페이지를 실시간으로 미리보기 가능합니다. 

로컬 개발 서버를 실행하여 파일 저장 시 자동 새로고침을 제공합니다. 

HTML, CSS, JavaScript 등의 변경 사항을 즉시 반영하여 프론트엔드 개발 효율성을 극대화 합니다. 

• 실시간 미리보기: 코드 변경 후 브라우저에서 즉시 확인
• 자동 새로고침(Live Reloading): 파일 저장 시 자동으로 브라우저 업데이트
• 로컬 서버 실행: http://127.0.0.1:5500 같은 로컬 주소에서 웹 페이지 제공
• 멀티 브라우저 지원: Chrome, Firefox, Edge 등 다양한 브라우저에서 실행 가능
• CORS 지원: 외부 API 연동이 필요한 프로젝트에서도 활용 가능

 

자 이제 본격적인 React 개발에 들어가 보도록 합시다. 

 

테크앤재테크였습니다.