코딩시간을 절반으로 줄여주는 VSCode 9개 기능

https://www.youtube.com/watch?v=mh-0twurNRE 

 

 

 

 

1. peek

: 외부 함수를 사용하는 코드에 마우스를 대고 Alt + F12 하면 해당 코드의 원본 파일로의

  실제 코드 위치가 나옴

 

 

2. Refactoring

: 코드를 함수로 감싸는 등의 행위를 할 수 있음

: 대상 코드를 마우스로 하이라이트로 감싸고 Ctrl + Shift + R을 누르면 옵션이 나옴

: 변수로 내보내거나 함수로 감싸기 등등 가능

: 다른 파일로 빼는 것도 가능

: 하이라이트 했을 때 전구 표시가 떴을때 그거 눌러서 해도 됨

 

 

3. Rename Symbol

: 변수를 선택하고 우클릭 후 F2 / RenameSymbol 

: 참조가 있는 코드를 모두 바꿔줌

 

 

4. Snippets (자동완성)

: Snippets라는 확장도구 설치

: 언어 / 프레임워크 별로 있음

: Tabnine AI 확장도구를 사용하면 알아서 입력해줌

 

 

5. Debugger

: 코드 화면에서 Break Point (빨간점)을 찍고 Run Debug를 하면 해당 코드에서 멈추고

  데이터를 알려줌

: 콘솔에서 변수명을 검색하면 해당 변수의 값을 알 수 있음

 

 

6. Multi-cursor

: Alt를 누른채로 커서를 찍은 다으면 여러 부분에 쓸 수 있음

 

 

7. emmet

: VSCode의 기본 기능으로 업데이트 됨

: emmet 명령어 + tab을 누르면 코드가 자동 완성됨 

 

 

8. Shortcuts

- 코드 하이라이트 

: Ctrl + L

 

- 코드 내리기

: 하이라이트 된 상태에서 Alt + ↓

 

- 행 복사

: Alt + Shift + ↓

 

- 코드 내 커서 이동

: Ctrl + →

 

- 프로젝트 내 다른 파일로 이동

: ctrl + p 후 파일 검색

 

- 터미널 키기

: Ctrl + `

 

- 터미널 없이 npm 명령어 바로 실행 (package.json에 정의된)

: 좌측 파일 목록 > npm scripts 

 

 

9. Power Mode

: 확장도구에서 Power Mode를 설치 후 코딩