Tools/VScode

알아두면 쓰기 좋은 기능들

2022. 10. 5. 09:30
목차
  1.  
  2. Peek
  3. Refactoring
  4. Rename Symbol
  5. Snippets
  6. emmet
  7. Shortcuts
728x90
반응형

 

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명령어를 선택 할수도 있다

 

참고영상

728x90
반응형
  1.  
  2. Peek
  3. Refactoring
  4. Rename Symbol
  5. Snippets
  6. emmet
  7. Shortcuts
JangKroed
JangKroed
JangKroed
JangKroed
JangKroed
전체
오늘
어제
  • FindAllPost() (139)
    • 항해99 (40)
      • TIL (19)
      • WIL (13)
      • 공부 (7)
    • 개발일지 (70)
      • 스파르타 게임개발 종합반 (1)
      • Error (5)
      • TIL (64)
    • Language (16)
      • Javascript (7)
      • Node.js (5)
      • TypeScript (0)
      • Nest.js (0)
      • Unity (4)
    • DataBase (3)
      • MySQL (2)
      • MongoDB (1)
    • DevOps (4)
      • AWS (4)
      • Docker (0)
    • Tools (5)
      • VScode (1)
      • Git (1)
      • libraries (3)
    • 끄적끄적 (1)
      • 메모 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

깃허브

공지사항

인기 글

태그

최근 댓글

최근 글

반응형
250x250
hELLO · Designed By 정상우.
JangKroed
알아두면 쓰기 좋은 기능들
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.