프론트엔드/VScode

vs code 꿀팁

HongHN 2023. 2. 22. 20:21
반응형

1. ctrl + N : 새 파일 열기

2. ctrl + S : 저장위치 설정 or 저장하기

3. ctrl + O : 파일 및 폴더 열기

4. html파일에 ! 입력 --> Tab : html 기본 구조가 만들어짐

5. ctrl + B : 사이드바 열기, 닫기

6. ctrl + P : 빠른 열기(파일이나 기호 탐색)

7. ctrl + Shift + p : 모든 명령 표시(에디터의 모든 명령에 접근)

8. ctrl + F : 검색(찾기)

9. ctrl + H : 찾기 & 바꾸기 창 동시에 열기

10. Alt + Up : (이동하고 싶은 줄에 커서 놓거나 이동이 필요한 부분 드래그 잡고) 줄 위로 이동

11. Alt + Down : (이동하고 싶은 줄에 커서 놓거나 이동이 필요한 부분 드래그 잡고) 줄 아래로 이동

12. Shift + Alt + Down : (복사하고 싶은 줄에 커서 놓거나 이동이 필요한 부분 드래그 잡고) 해당 줄이 아래로 복사됨

13. Tab : 들여쓰기

14. shift + Tap : 내어쓰기

15. ctrl + \ : 창 분할

16: 약어로 랩핑하기 : 추가적으로 태그로 감싸고 싶은 부분드래그 --> ctrl + Shift + p --> wrap 입력 --> Emmit : 약어로 래핑 선택 --> 원하는 태그 입력(꺽새 괄호 없이)

​17. ctrl +shift+` : 터미널 열기.

확장기능(Extention)

1. Korean Language Pack for Visual Studio Code

: VS Code의 메뉴가 한글로 변경됨

- 바로 적용이 안 되는 경우 프로그램을 재부팅 해주면 된다.

2. Beautify

: 자동으로 정렬해줌

- extention에서 설치 후 ctrl + K -> Ctrl + S 눌러서 바로가기 키로 이동한다

- HookyQR.beautify 를 검색창에 입력해서 Beautify Selection이 나오면 더블 클릭해서 원하는 단축키를 등록한다(추천 : ctrl + Alt + L)

- 그 후에 원하는 부분 드래그해서 등록한 등록키를 누르면 정렬이 스스로 된다.

3. Live Server

: html, css, javascript 작성한 내용이 새로고침 없이 계속 실시간으로 반영된다.

반응형