Peek
쓰여진 함수명을 누르고 F12를 누르면 그 함수가 만들어진 페이지로 점프한다.
Alt + F12를 누르면 그자리에 팝업으로 나오고 수정이 가능
HTML과 CSS도 가능한데 Extension중 CSS Peak와 HTML CSS Support를 설치하면
CSS에 class에 똑같은 기능을 쓸 수 있다.
Refactoring
코드를 함수안에 새로 만들어 넣고 싶은경우 Ctrl + Shift + R을 누르면
선택목록이 나오는데 그중 함수를 선택하면 이름만 선택하고 함수로 만들 수 있다.
다른 파일로 만들어서 옮기기도 가능.(파일생성까지 가능)
Rename Symbol
함수나 변수명을 한번에 변경할때 Ctrl + H로 바꿀 수도 있지만
F2를 누르고 원하는 이름으로 바꾸어주면 그와관련된 이름들을 한번에 바꿔준다.
Snippets
언어별, 프로젝트별로 자동완성 기능들을 쓸수 있는데
주로쓰는 언어의 이름과 Snippets를 Extension에 검색하여 다운받은뒤
(ex. Node Snippets, React Snippets) 사용법을 보고 상황에 맞게 쓸 수 있다.
단축키개념은 아니지만 간단한 단어만 입력하면 틀을 만들어 주어 좋은듯 !
emmet
div안에 p태그를 3개 만들고 싶을때 일일이 타이핑 하지않고
div>p*3 를 써준뒤 TAP키를 누르면 완성된다.
div의 class명이 container이고 그안의 p가 class명이 title인 것도 할수 있는데
div.container>p.title*5 후 TAP을 누르면 마찬가지로 생성이 된다.
CSS 에서도 활용할수 있는데
display : none; 은 dn을 쓰고 TAP을 누르면 완성되고
margin : 10px; 은 m10 이라 쓰면 된다
Shortcuts
코드 하이라이트 - ctrl + L
그 코드를 옮기고 싶으면 - alt + 방향키
밑으로 복사,붙여넣기 - shift + alt + 방향키
문장 단위로 커서를 움직이고 싶으면 - ctrl + 방향키
다른 파일로 이동 - ctrl + p 후에 파일명 입력
터미널 - ctrl + `(백틱)
터미널에서 npm start입력도 있지만
왼쪽밑에 NPM SCRIPTS 속 npm명령어를 선택 할수도 있다
