웹 개발 시 유용한 VSCode Extension

VSCode는 가벼운 에디터지만 필수적인 기능만 제공하고 있습니다.

대신 Marketplace를 통해 추가 기능을 제공하고 있죠.

Extension 기능을 적절히 활용하면 생산량 증가를 꾀할 수 있습니다.


VSCode 설치 후 고정적으로 이용하는 Extension을 추천해드릴 겸 목록을 공유합니다.


Active File In StatusBar (이동)



현재 편집 중인 파일의 경로를 하단 상태 막대에 표시합니다. 이 경로를 클릭하면 바로 클립보드에 복사할 수도 있죠.

터미널이나 탐색기를 여러번 이용해야 하는 경우 그 빛을 발합니다.



Bracket Pair Colorizer (이동)


프로그램의 덩치가 커지면 여러 단계의 괄호를 이용해야 합니다. JavaScript 코드는 특히 더 심하죠.

괄호의 단계별로 다른 색을 적용해주는 확장 기능입니다.



CodeMetrics (이동)



현재 코드의 복잡도를 실시간으로 평가해주는 확장 기능입니다.

이 기능에서 좋게 평가된 코드가 절대적으로 좋은 코드임을 보장하는 것은 아니지만,

경고가 표시되면 불필요하게 복잡하게 작성하진 않았는지 생각해 볼 수 있습니다.



Color Highlight (이동)



코드에 있는 색상 코드에 실제 해당 색상을 표시해줍니다.

매번 색상 코드를 검색하거나, Photoshop에 입력하지 않아도 됩니다.



Git History (이동)



현재 작업 중인 Git Repository의 Git Log를 시각적으로 표시해줍니다.

속도는 느린 편이지만 SourceTree와 같은 Application을 실행하지 않고도 간편히 Log를 확인할 수 있습니다.



IntelliSense for CSS class names in HTML (이동)



작업 중인 디렉토리의 CSS 파일을 미리 로드해서 CSS Class를 자동 완성해주는 확장기능입니다.

매번 CSS 파일을 열어보지 않아도 될 뿐만 아니라, 사소한 오타 때문에 시간을 버리는 일을 방지해줍니다.



TODO Highlight (이동)



언제나 완벽한 코드를 배포하는 것은 아닙니다. 나중에 고쳐야 할 버그를 주석에 남겨놓기도 하죠.

이 확장 기능은 해야할 작업과 고쳐야 할 버그를 주석에 남겨두면 눈에 띄도록 강조해줍니다.



vscode-icons (이동)



말이 필요 없는 확장 기능입니다.

파일 목록에서 바로 파일의 종류를 확인할 수 있도록 도와줍니다.