[패스트 캠퍼스 FE] VS Code 단축키 및 확장 프로그램

시작에 앞서..

이강의는 패스트캠퍼스의
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트
라는 강의를 들으면서 정리한 글이다.

앞부분이 전반적인 HTML/CSS/JS를 정리한 강의라서,
프론트엔드를 처음 접하는 분들은 참고하시면 많은 도움이 될 것 같다. (나도!)
그럼 시작해보겠다~~🚀🚀🚀🚀🚀 (by 맥북 사서 기분 좋은 사람)

---

단축키 모음 (윈도우)

맥같은 경우는 ctr -> cmd (커맨드) 로 바꾸면 된다.
(글 쓰고 이틀만에 맥으로 갈아탈 줄은 몰랐지...)

• ctr + shift + p : 모든 명령어 보기
• ctr + o : 파일 열기
  • ctr + k & ctr + o : 폴더 열기
• ctr + s : 현재 파일 저장
  • **ctr + k , s** : 모두 저장
• **ctr + b** : 사이드바 열고 닫기
• ctr + p : 이름으로 파일 검색
• ctr + f : 찾기
  • **ctr + h** : 해당하는 파일 바꾸기 (모두 바꾸기도 가능)
• **alt + up** : 해당 Line 위로 이동
  • alt + shift + down : 해당 Line 아래에 붙여넣기
• tap : 들여쓰기 (indent) (왠만하면 공백은 2로 설정)
  • **shift + tap** : 내어쓰기 (outdent)
• ctr + pageup/pagedown : 이전/다음 편집기 열기
• ctr + backslash : 창 분할
• **tap** : 중간 까지 누르고 tap 누르면 자동완성 됨

파일 생성과 삭제

• vs code 는 항상 폴더 단위로 오픈
• html 파일 생성 후, ! + enter 를 누르면 프로젝트 기본 구조 자동완성

🍯 개꿀 확장 프로그램 모음

---

정리된 파일 만들기

• beautify 확장 기능

  지저분한 코드 정리 해줌 ... 개꿀!!!

  1. 마켓플레이스에서 검색 후 설치
  2. 파일 → 기본설정 → 바로가기 키로 이동
  3. HookyQR.beautify 검색 후 Beatify selection 에서 키 변경
     • mac os 의 경우 : alt + cmd + l
     • window 의 경우 : alt + ctr + l

태그 이름 한번에 변경

• Auto Rename Tag

설치하면 태그 변경 한번에 해줌... 개꿀.....;;

브라우저에 출력(Live Server)

• Live Server

사용자의 로컬 환경의 임시 서버에 결과물을 출력함
우클릭 후 open in Live Server