유용한 VSCode 확장 도구들 추천

Auto Rename Tag

• 여는 태그를 수정하면, 자동으로 닫는 태그역시 수정해준다.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 

Auto Rename Tag - Visual Studio Marketplace

Code Spell Checker

• 변수나 함수명을 지을 때 오타가 있으면 표시해준다.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker 

Code Spell Checker - Visual Studio Marketplace

Color Highlight

• 색상을 작성하면, 자동으로 그 색깔을 보여주는 기능을 제공한다.

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight 

Color Highlight - Visual Studio Marketplace

Error Lens

• 에러가 있을 때, 자동으로 에러 메세지를 표시해준다.

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 

Error Lens - Visual Studio Marketplace

ES7+ React/Redux/React-Native snippets

• 자바스크립트 개발에 있어서(특히 프론트엔드) 편리한 스니펫을 제공해준다.

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

ESLint

• VSCode에서 ESLint(자바스크립트 ES 문법 오류 검사기)를 설정할 수 있게 해준다.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 

ESLint - Visual Studio Marketplace

GitLens - Git supercharged

• 코드에서 해당 라인을 수정하여 커밋한 사람이 누구인지 표시해준다.

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 

GitLens — Git supercharged - Visual Studio Marketplace

indent-rainbow

• 들여쓰기가 되었을 때, 계층별로 알아보기 쉽게 색상을 표시해준다.

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow 

indent-rainbow - Visual Studio Marketplace

Live Server

• HTML 파일 수정시 바로 반영되는 라이브 서버를 제공한다.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 

Live Server - Visual Studio Marketplace

Markdown Preview Enhanced

• md 파일의 미리보기를 제공한다.

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced 

Markdown Preview Enhanced - Visual Studio Marketplace

Material Icon Theme

• 파일 확장자에 따른 디렉토리에서 아이콘을 설정해준다.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme 

Material Icon Theme - Visual Studio Marketplace

Prettier - Code formatter

• VSCode의 코드 formatter이다.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

Prettier - Code formatter - Visual Studio Marketplace

Tailwind CSS IntelliSense

• tailwindcss의 클래스 이름 자동 완성을 지원해준다.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 

Tailwind CSS IntelliSense - Visual Studio Marketplace

TODO Highlight

• TODO: 를 주석으로 작성하였을 때 하이라이트해준다.

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight 

TODO Highlight - Visual Studio Marketplace

vscode-styled-components

• styled-components 의 자동완성을 지원해준다.

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 

vscode-styled-components - Visual Studio Marketplace