VSCODE 단축키, emmet

VSC(Visual Studion Code): 마이크로소프트가 만든 텍스트 에디터

 

 

 

<확장도구>

project-running URL and Port = live server(확장도구) command palette에 live server검색하면 open with live server - 단축키 외우기. 저장만하면 바로 새로고침 필요없이 결과가 브라우저에 나타남.

Auto Rename Tag: 앞의 여는 태그를 바꾸면 뒤 닫힌 태그를 자동으로 바꿔줌

Bracket Pair Colorizer: 괄호마다 색깔 다르게

Material Theme: dark high contrast

CSS Peek: ctrl누른 상태로 클릭하면 정의된 css문서로 연결해줌

HTML CSS Support: css에서 정의된 클래스를 html에서 자동완성할 수 있게 해줌.

HTML to CSS autocompletion: HTML에서 정의된 class이름을 css에서 자동으로 완성할 수 있게 해줌

Material Icon Theme: 파일목록의 icon이 생동감있게 변화

open in browser

Indent Rainbow: 들여쓰기 된 부분을 레인보우컬러로 하이라이트 표시. 코드 읽을 때 도와줌

 

 

 

<단축키>

ctrl + shitr + p > open settings(JSON) > settings.json

TOP7. ctrl+d: multi selection. 자주 반복되어 사용되는 코드. 반복되는 한 코드를 드래그한 후, 단축키 누르면, 모든 반복된 코드를 자동으로 선택.

TOP6. alt+click: insert cursor. 누르는 곳마다 커서를 생기게 해줌. 편집 끝나면 esc

TOP5. alt+↑/↓: 선택된 코드를 위로, 아래로 움직여 준다.

TOP4. alt + shift + ↑/↓: 복사를 해서 위, 아래로 움직인다.

TOP3. ctrl+/: 주석처리

TOP2. alt + shift + i: current selection. 마우스로 드래그된 영역에 커서가 줄별로 좌르륵 생긴다.

TOP1. alt + shift + drag mouse: column (box) selection 마우스가 가는 곳마다 커서가 생긴다.

ctrl+ home / end: 코드 맨 위/아래로 한번에 올라가기

ctrl + b: toggle sidebar. 사이드바 숨기기

code(file)-preferences-keyboard shortcuts(ctrl+k+s)

ctrl+shift+p, f1: command palette. 비주얼 스튜디오 코드에서 실행 가능한 모든 명령어를 마우스없이 키보드하나로

ctrl+p: quick open. 파일검색+enter - 해당 파일로 이동

ctrl+,: user settings.

ctrl+': Toggle Terminal

home/end: beginning/end of line. 문장에서 앞부분,끝부분으로 이동

ctrl+shift+home/end: 드래그가 선택부분에서 문장 가장 앞부분,끝부분까지 된다.

ctrl+←/→: move word. 단어별로 이동

ctrl+shift+←/→: select word.

ctrl+c: copy line. 라인 전체복사

ctrl+x: cut line. 라인 잘라내기

ctrl+enter: insert line below 다음 줄로 가기

ctrl+u: undo last cursor. 이전 커서로 이동

Ctrl + Shift + K: 한줄삭제

ctrl+p 파일찾기(파일명으로)

돋보기 모양(내용으로 파일찾기)

alt+ctrl+s: 모두 저장

ctrl+w: 편집기 닫기

ctrl+h: 바꾸기

ctrl+pageUp: 이전 편집기 열기(좌측 창으로 전환)

ctrl+pageDown: 다음 편집기 열기(우측 창으로 전환)

ctrl+\:편집기 분할(백슬래쉬)

 

 

<emmet>

meta:vp + tap

html:5 + tab

! + tab

! + enter

div + tab

div.classname + tab

div#idname + tab

.classname + tab - class가진 div태그

#idname + tab - id가진 div태그

div>ul>li + tab - 부모자식관계

div>ol+ul - 형제관계

ul>li*5

div>ul>li^ol - ^는 li의 부모인 ul옆에 형제노드로 ol을 만들어줌

그룹화하기 div>(header>ul>li*2>a)+footer>p + tab

텍스트입력 p{hello} + tab h1{안녕하세요!}*7+tab

자동번호 넣기 p.class${item $}*5 + tab

더미용 텍스트 생성 p>lorem + tab, p>lorem4(4개의 단어)

lorem100+tab 더미텍스트 만드는 emmit

div.container>div.item.item${$}*10 + tab

 

 

 

<설정>

word wrap : 줄바꿈