vscode 프론트엔드 개발에 유용한 익스텐션 모음

Auto Close Tag

HTML 태그를 쓰면 자동으로 닫아준다. <Tag> 입력 -> <Tag></Tag>

Auto Rename Tag

HTML 태그 이름 변경시 닫는 태그 이름도 자동으로 변경

Auto Import

Import 문 자동 완성

ESLint

vscode에 IDE 오류 표시, 저장시 자동 린트 기능 제공

Error Lens

코드 에러 발생 부분 옆에 무슨 에러인지 실시간으로 표시

Git Graph

Source Control 탭에서 상단 View Git Graph 클릭하여 깃 그래프 볼 수 있음

GitLens -- Git supercharged

코드 옆에 누가 언제 커밋했는지 내용 표시 - 내역 확인하기 좋음

Import Cost

import 문 옆에 패키지 용량 표기

Prettier

코드 포맷팅

Tailwind CSS IntelliSense

tailwind className 자동 완성, 린트, hover시 style 설명 등 - tailwind 사용 시 필수

ZipFS

Zip파일 내부의 코드들 읽을 수 있게 해줌 - yarn zero install 사용 시 필수

ES7+ React/Redux/React-Native snippets

snippet 활용해서 자주 쓰는 코드들 (ex: useState 선언문)을 빠르게 입력할 수 있다.

다만 snippet 제목들이 너무 길어서 해당 snippet들에서 코드만 뽑아서 가벼운 약자로 변경하여 사용하고 있다.

ex) usestatesnippet -> ust

Todo Tree

주석에 TODO: FIXME: 작성 해놓은 것들 tree로 가독성 좋게 볼 수 있음

Code Spell Checker

코드 스펠 체크하고 경고 해줌