VSCode 단축키 및 확장프로그램

typescript 는 기본적으로 컴파일을 통해서 javacript 파일을 만든 다음에 Node.js 로 실행하는 방법이 있다.

npx tsc 로 컴파일. node src/1.js 하면 실행. 이러한 방법은 귀찮을 수 있으므로 vscode 익스텐션을 이용하는 방법이 있다.
왼쪽 메뉴 중 네모네모를 클릭하여 code runner 라는 것을 설치.
code runner 를 통해서 typescript 를 컴파일 하기 위해서는 ts-node 라는 것을 설치해야 한다. npm install ts-node
그리고 ts-node 를 사용하도록 설정을 해주어야 하는데 CMD + , 를 누르면 설정파일이 나온다. executorMap 이라고 입력. 가장 위의 것 클릭.
"typescript": "node_modules/.bin/ts-node", 를 code-runner.executorMap 에 추가.
그러면 실행하고 싶은 부분을 선택한 다음에 CTRL + OPTION + N 을 누르면 실행이 된다.

Auto Import : CMD + .
Multi Select : 원하는 단어 선택 후 CMD + d 를 누르면 멀티 선택이 된다. 이때 수정하면 한꺼번에 수정할 수 있다. esc 누르면 취소된다.
Multi Cursor : CMD + OPTION + 화살표 를 누르면 세로 선택 가능한 멀티 커서를 만들 수 있다. esc 누르면 취소된다.


단축키 리스트 보기: CMD + K + S

단계적으로 선택영역 지정: CTRL + SHIFT + 우 or 좌 화살표
위아래로 지정한 것 움직이기: 지정하고나서 OPTION + 위 or 아래 화살표
블록의 마지막으로 이동: CMD + SHIFT + \
리팩토링 이름바꾸기: F2
함수를 사용하는 부분에서 함수의 정의로 이동: F12
함수 정의에서 함수를 사용하는 부분들을 보려면: OPTION + SHIFT + F12

작업영역 간 이동: CMD + 0 (왼쪽의파일탐색기) , CMD + 1 (편집기 영역), CMD + 2 (다음 편집기 영역, 없으면 추가) , CMD + \ (새 편집기 영역에 현재 파일 열기)
편집기 상단 파일 네비 부분 선택: CMD + SHIFT + .

파일명으로 찾기: CMD + P
심볼(클래스명,함수명,변수명...)로 찾기: CMD + B
파일 내에서 심볼로 찾기: CMD + SHIFT + O

VSCode 확장 프로그램

jest runner (각 jest 테스트 코드 위에 run/debug 메뉴 나옴. it.only 기능과 유사)

React Native - Full Pack (리액트 네이티브 디버깅 breaking point 찍고 실행 중 해당 지점에서 멈추는 등)

Polacode (Polaroid for your code, 코드 스냅샷)
gitLens (File history, Line history, blame 기능)
Bookmarks (CMD + OPTION + K 하면 북마크가 생긴다, CMD + OPTION + L 하면 다음 북마크 , CMD + OPTION + J 이전 북마크 이동)
CMD + SHIFT + P 해서 명령어 중에 'path' 검색하여 PATH 에 'code' 명령 설치 하면 맥의 터미널에서 code . 하면 VSCode 열림.

 

색 테마: Night Owl

파일 아이콘 테마: Material Icon Theme

문법 검사: ESLint, TSLint

간단 로컬 서버: Live Server

코드 포맷터: Prettier

프로젝트 관리: Project Manager

자동 Tag Close: Auto Close Tag

Jetbrains IDE 키맵: JetBrains IDE Keymap