웹 퍼블리셔를 위한 VS CODE 확장 프로그램

 

뒤도 안 돌아보고 백업없이 포맷하는 바람에 적어보는 익스텐션 리스트 🤓

웹 퍼블리셔가 설치해 두면 좋은 확장 프로그램을 모아봤습니다.

 

멋진 익스텐션을 발견할 때마다 수시로 수정할 예정입니다.

 

 

---

 

 

범용 익스텐션

 

Prettier - Code formatter

 

[링크]

추천 1순위!!! 꼭꼭 설치하세요! 주요 문법(HTML, SCSS, JSON 등)을 예쁜 형태로 정리해 줍니다.

 

Beautify

 

[링크]

Prettier와 비슷한 익스텐션입니다. 에디터 내 코드를 예쁘게 정렬할 수 있어요.

 

 

vscode-icons

 

 

[링크]

VS CODE 내에 이런저런 아이콘을 추가해 줍니다. 아이콘이 큼직하기 때문에 무슨 파일인지 한눈에 알 수 있습니다.

 

 

 

indent-rainbow

 

[링크]

인덴트 단계를 색상으로 예쁘게 구분해 줍니다. HTML을 마크업할 때나 SCSS 내에서 depth가 생길 때 요긴합니다.

 

WakaTime

 

[링크]

코딩에 소비한 내 인생이 얼마나 되는지 알고 싶다면? 그럴 때 쓰윽 설치해 보는 익스텐션.

에디터 내에서 작업한 시간을 체크해 줍니다. wakatime.com에 접속하면 자신이 어떤 언어로 얼마나 작업했는지 더 정확한 리포트를 볼 수 있어요. 단, 별도 회원가입이 필요합니다.

 

 

 

Live Server

 

[링크]

 

따로 웹서버 열기 귀찮을 때 요긴한 익스텐션입니다. 실시간으로 확인하면서 작업이 가능하기에 편리합니다.

하단의 Go Live 버튼을 누르거나, Cmd+L & Cmd+O 를 누르면 기본값으로 5500포트를 사용하는 페이지가 열립니다.

하단의 버튼을 다시 누르거나, Cmd+L & Cmd+C 를 눌러 웹 서버를 닫을 수 있습니다.

 

---

 

 

 

마크업용 익스텐션

 

Auto Close Tag

 

[링크]

HTML 작성 시 닫는 태그를 자동으로 완성시켜 줍니다.

 

 

 

Auto Rename Tag

 

[링크]
HTML에서 여는 태그를 수정하는 경우 닫는 태그도 자동으로 바꿔 줍니다.

 

 

 

Lorem ipsum

 

[링크]

Command + P 를 눌러 > Lorem Ipsum을 입력하면 로렘 입숨을 자동으로 생성해 입력해 줍니다.

 

 

 

---

 

스타일링용 익스텐션

 

Color Highlight

 

[링크]

색상 코드에 해당 색상에 맞는 색을 보여줍니다. 무슨 색인지 바로 알 수 있어서 직관적인 파악이 가능합니다.

 

 

stylelint

 

[링크]

CSS 문법을 체크해 줍니다. 졸면서 적었을 때 유용합니다(?)

 

 

---

 

덤으로 적어보는 VS CODE 단축키 (맥용)

Opt + Shift + Up = 줄 또는 단락 복사

Opt + Up/Down = 줄 또는 단락 이동

Cmd + Ctrl/Opt + F = 검색 결과 교체하기

Ctr + Tab = 열려있는 다른 탭 선택하여 이동

Cmd + Shift + [/] = 열려있는 다른 탭 좌/우로 이동