VSC extension 추천

민경찬·2023년 6월 14일

서론

필자가 이곳 저곳 둘러보며 알게된 익스텐션을 소개해보려고 한다.

이 세 가지 타이틀로 알아보자.

TabOut
(), "", {} 등등 괄호나 따옴표를 탭키를 눌러 커서를 밖으로 빼준다. Visual Studio에 익숙한 사용자라면 반드시 필요한 익스텐션이다.

~~난 이거 없으면 개발 못함~~
Path Intellisense
문자열에 '/'를 입력하게 되면 해당하는 경로를 자동 완성 시켜준다. 매번 굳이 Path를 직접 입력하지 않아도 알아서 찾아주는 좋은 코드 동반자이다.
Live Server
HTML이나 CSS, JS 파일 등을 저장 버튼을 누르고 브라우저로 가서 새로고침까지 누르기가 매번 귀찮았다. 하지만 이젠 저장 버튼만 눌러도 브라우저에서 자동으로 새로고침하여 보여준다. 특히 CSS를 적용할 때 매우 편한 익스텐션이다.
Auto Rename Tag
태그 이름을 바꿀 때 닫는 태그나 여는 태그의 이름까지도 자동으로 바꿔준다. 매우 편하다.
ftp-simple
원격 서버에서 코딩할 때 매우 좋은 익스텐션.

Javascript Auto Backticks
따옴표를 쓰다가 템플릿 리터럴이 필요한 순간이 꼭 있다. 그럴 때 '${' 까지만 입력해도 따옴표들이 알아서 백틱으로 변경되는 익스텐션. 나름 신세계였다.
Material icon Theme
기존 아이콘들이 맘에 안 들거나 하지는 않다. 그러나 남들 다 쓰기 때문에 이 익스텐션으로 익숙해지면 의사소통할 때 편할 수 있음. 아마도..?
Bracket Pari Color DLW
코드를 작성하다보면 괄호가 많아진다. 그럴 때 괄호의 짝을 찾아 색을 다르게 표현해주는 익스텐션이다. 매우 유용하다.
es6-string-html
styled-component를 쓰거나 inline sql을 작성하거나, 코드에서 tag를 작성할 때 보통 백틱 기호 안에다가 문자열 형식으로 많이 적는다. 그러나 그런 문자열들은 컬러링이 되지 않아 오타가 발생하는 경우가 많은데 이 익스텐션을 사용하면 html, css, sql 백틱 기호안에 내용들을 원하는 형식으로 컬러링 시켜줄 수 있다. 오타 발생을 줄여주어 매우 편하다.
CSS Peek
tag의 id나 class에 붙어있는 css코드를 찾아서 보여준다.