이번 포스트에서는 VSCode에서 유용하게 사용할 수 있는 몇 가지 extensions를 소개하겠습니다.
1. Live Server
웹 개발을 하면서 HTML, CSS, JS 파일을 수정할 때마다 브라우저를 새로고침해야 하는 번거로움이 있습니다. Live Server는 이를 해결하기 위한 확장 기능으로, 파일을 저장할 때마다 자동으로 브라우저를 새로고침해줍니다.
2. Prettier
코드 포맷팅은 일관된 코드 스타일을 유지하고 가독성을 높이기 위해 중요합니다. Prettier는 다양한 프로그래밍 언어에 대해 일관된 코드 포맷팅을 제공하는 확장 기능입니다.
3. ESLint
ESLint는 자바스크립트 코드에서 일반적인 오류를 검사하고, 코드 스타일 가이드를 준수하는지 검사하는 확장 기능입니다. 코드의 품질을 높이고 유지 보수성을 높이기 위해 ESLint를 사용하는 것이 좋습니다.
4. GitLens
GitLens는 Git 저장소의 커밋 기록을 시각화하고, 각 커밋에 대한 정보를 제공하는 확장 기능입니다. 코드 변경 내역을 빠르게 확인할 수 있어, 협업하면서 코드를 관리할 때 유용합니다.
5. Material Icon Theme
VSCode는 파일의 확장자에 따라 아이콘을 제공합니다. 하지만 이 아이콘은 파일의 종류를 구분하기에는 충분하지 않을 때가 있습니다. Material Icon Theme은 다양한 아이콘을 제공하여 파일의 종류를 더 쉽게 구분할 수 있게 해줍니다.
6. Bracket Pair Colorizer
소스 코드에서 괄호의 쌍이 맞아야 하는 경우가 많습니다. 이때 Bracket Pair Colorizer는 괄호의 쌍을 쉽게 확인할 수 있도록 쌍을 색상으로 강조해주는 확장 기능입니다.
7. Remote Development
Remote Development는 VSCode를 사용하여 원격 서버나 도커 컨테이너, WSL 등의 환경에서 개발할 수 있게 해주는 확장 기능입니다. 로컬에서 개발하지 않아도 되므로 환경 설정 등의 번거로움을 줄여주며, 원격 개발 환경에서도 VSCode의 모든 기능을 사용할 수 있습니다.
8. Better Comments
주석은 코드의 이해를 돕기 위해 작성되지만, 일반적인 주석은 그저 글씨로 보여지기 때문에 가독성이 떨어지는 경우가 많습니다. Better Comments는 주석의 가독성을 높이기 위한 다양한 스타일을 제공하는 확장 기능입니다.
9. Auto Close Tag
HTML이나 XML 같은 마크업 언어에서 태그를 작성할 때, 시작 태그와 종료 태그를 일일히 작성하는 것은 번거로운 작업입니다. Auto Close Tag는 시작 태그를 작성할 때 자동으로 종료 태그를 추가해주는 확장 기능입니다.
10. Code Runner
특정 파일에서 코드를 실행하고 결과를 확인하는 것은 프로그래밍 공부를 할 때 유용합니다. Code Runner는 VSCode에서 다양한 언어로 작성된 코드를 바로 실행할 수 있도록 지원하는 확장 기능입니다.
11. Live Share
Live Share는 원격에서 실시간으로 코드를 공유하고, 페어 프로그래밍을 할 수 있도록 지원하는 확장 기능입니다. 같은 코드를 함께 작성하면서 피드백을 주고받아 개발 생산성을 높일 수 있습니다.
12. Code Spell Checker
코드를 작성할 때 철자 오류가 발생할 수 있습니다. Code Spell Checker는 영어 철자 검사를 지원하는 확장 기능으로, 코드를 작성하는 도중 오타를 찾아주고 수정할 수 있습니다.
13. IntelliSense for CSS, SCSS, Less
CSS, SCSS, Less 같은 스타일 시트 언어에서 클래스, ID, 속성 등을 자동 완성해주는 IntelliSense 기능을 제공하는 확장 기능입니다.
14. REST Client
REST API를 테스트하거나 디버깅할 때 유용한 REST Client는 VSCode에서 HTTP 요청을 보내고 응답을 받을 수 있는 확장 기능입니다.
15. Indent Rainbow
들여쓰기를 시각적으로 확인할 수 있도록 색상을 입혀주는 Indent Rainbow는 코드 가독성을 높이는데 도움을 주는 확장 기능입니다.
