웹 퍼블리셔를 위한 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 + [/] = 열려있는 다른 탭 좌/우로 이동