visual studio code(vsc) 환경설정 및 단축키

테트리스 모양(extentions) 눌러서 필요한 것 다운로드하기

 
 
* Code Spell Checker (오타 체크)

* Live Server (결과물 웹페이지 띄어보기)

* Prettier (코드 정렬)

* ES7 React

* Auto Rename Tag (open 바꾸면 closing 자동으로 태그 변경해줘) * Auto Closing Tag (자동으로 닫힘태그 만들어줌)
 
* GitLens - Git supercharged (git 작업시 commit보고 코드 비교 편함) * ctrl + shift + P        >shell command : install .. 설치

* tabnine을 설치했는데 굉장히 편하다..!!!!

 

  참고) prettier 적용 안되는 분들 방법.
VSC html탭 (코드 작성하는 탭) 가서 F1 혹은 cmd+shift+p을 누르고
>Format Document with... >Configure Default Formatter... > Prettier...... 하면 됩니다.

 

 

참고) prettier 처음 설치하고 적용 안되시는 분들!!
1. ctrl + , (3개 동시에) 눌러서 설정들어간다.
2. editor format 이라고 검색한다.
3.Editor: Default Formatter 항목이 none 이라 되있는데 prettier 로 설정한다
4.Editor: Format On Save 체크 박스 체크한다. 위처럼 하시면 적용됩니다!!

 

 

---

 

new file에서 index.html과 style.css 파일 만들기 index.html
-> html 입력 후 html5 선택하면 자동 입력됨
-> link:CSS 선택 -> body에 내용 입력


오른쪽 마우스 -> open with liveserver 클릭 (ctrl+S로 저장 후에  자동 업데이트됨)

 
 

---

단축키

반복되는 단어 한방에 수정 Ctrl + D(한번씩 일일이 눌러줘야함 / 귀찮으면 Ctrl + F2)

클릭하는 곳마다 커서 생성 Alt + Click

코드 위/아래로 움직이기 Alt + ↑ / ↓
 
코드 복사해서 위/아래로 움직이기 Alt + ⇧ + ↑ / ↓

코드 블록 한방에 코멘트 처리하기 Ctrl + /

선택된 영역에 커서 만들기 Alt + ⇧ + i

마우스가 가는 곳 마다 커서 만들기 Alt + ⇧ + Mouse Drag

파일 맨 위-아래로 한번에 이동하기 Ctrl + Home / End

사이드바 숨기기 Ctrl + B

+[Ctrl + Shift + Enter] 커서가 있는 줄부터 그 아래의 줄들을 아래로 내리기

+Alt + ←/→  커서가 이전에 위치한 곳으로 되돌아가는 기능이고 알트 오른쪽은 그 반대 효과

주석 : Ctrl+ /

Shift + Alt + (↑, ↓) : 한줄 복사

Alt + (↑, ↓) : 한줄 이동

Ctrl + x : 한줄 삭제

Ctrl + D : 같은 단어 하나씩 선택 (밑으로 하나씩 선택됨)

Alt + Click : 멀티 커서