vscode 코딩애플

https://youtu.be/mh-0twurNRE

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

 

1,Peek

함수가 원래 어떻게 생겼는지 궁금할 때 파일로 가서 들춰보는게 아니라

F12누르면 그 함수로 워프

alt+F12 하면 중간에서 그 파일이 열림

수정하고 저장하고 할 수도 있다.

 

HTML, CSS도 가능

이렇게 찾을 수 있음

 

지금 약간 버그가 있는지 새로 추가한 클래스명은 잘 안될 수도 있다.

 

이걸 PeeK이라 하는구나?

 

 

2.Refactoring

코드를 함수로 싸매기

하이라이트 한 다음

저렇게 누르면 함수로 싸매기 가 나옴 클릭하면 함수명 입력하라고 나오고 아래에 function 선언이 자동으로 만들어짐

 

scope안에서 위에 ( 함수 안에 만들어져 )

scope밖에서가 module scope ( 함수 바깥에 만들어져 )

 

이거 말고도 유용한 자료가 있다고 하면, 변수를 싸매고 싶다든지

그럼 컨 쉬 R 눌러서

constant 변수로 내보내기 이런 옵션을 선택해 

자유롭게 작명해서 쉽게 담아쓸 수 있다.

 

심지어 다른 파일로 뺼 수도 있어

컨 쉬 알 이 저 전구 누르는거랑 같음

눌러주면 다른 파일로 빠짐

 

3.Rename Symbol

변수명, 함수명을 다르게 바꿔야 될 때 

함수를 쓰고 있는 곳이 굉장히 많을 경우 찾기 힘든 경우

이렇게 컨 + H 로 해도 되는데 더 좋은 방법이 있음

변수 선택하고 Rename Symbol

혹은 F2

 

그럼 renaming할 수 있는데 이게 연관된 변수를 전부 다 알아서 바꿔줍니다.

 

 

3.Snippers

vscode를 쓰는 이유중에 하나가 자동 완성이 잘 된다는 건데

이런식으로

 

근데 언어별, 프로젝트별로 자동완성을 좀 더 심하게 쓸 수 있는데

예를 들어 react 자동완성 기능이 많이 필요할 것 같다

 > EXTENSIONS 메뉴에서 Snippets를 검색해보면 됨

 > react면 react snippets 검색해서 하나 설치해주면 react코드를 짤 때 

imrr하고 탭치면

react로 router설치할 때 맨날 import해오는 것들 빨리 갖다 쓸 수 있음

 

imrs 탭

맨날 import해오는 useState 쉽게

 

뷰프로젝트 뷰파일 채워넣어야 하는 탬플릿 코드도

 

 

요즘엔 AI가 코드를 추천해주는 서비스도

Tabnine AI

fo까지만 쳐도, i++도 지가 쳐줌

 

이런것도

아이씨 이거 유료래 월만원

 

5.Debugger

절차지향적 어려운 수학계산 등 코드가 어떻게 돌아가는지 생각이 어려울 때 디버깅 툴을 쓰면 좀 도움이 됨

 

파이썬코드로 반복문 10번 돌리는, 이 안에 변수가 어떻게 돌아가는지 궁금하다하면

왼쪽에 빨간점을 찍어주면 됨

 

저 자리에서 정지해놓고 코드를 실행해볼 수가 있다.

breakpoint찍고 

이거 누르고 Python File 선택하면 디버깅 창이 실행되고 

변수값 이렇게 알려주고

저 버튼으로 브레이크 포인트마다 다음단계를 눌러가면서 실행을 해볼 수가 있다.

누를때마다 아래 TERMINAL에도 떠

 

혹은 debug console에서 

i치면 i는 3입니다 하고 나옴

 

6.multi-cursor

커서를 찍을 때 alt누르고 찍으면

타이핑을 동시에 할 수가 있다.

 

*엘리 : Ctrl + D 누르면 같은 단어들이 선택됨

 

7.emmet

이게 업데이트해서 생긴 기능이래

 

탭키만 잘 눌러주면 됩니다

 

css스타일 줄 때도 emmet문법 갖다 쓸 수 있다

display: none;도 dn누르고 탭키

오

 

8.Shortcuts

개발자들은 마우스를 쓰지 않습니다.

다 키보드로 빨리 선택 가능

 

- 코드 하이라이트

 

- 하이라이트 코드 내리기

alt + 방향키

 

- 복사해서 위아래로

 

- 워프 이동 --맥의 option키 비슷하네

 

-프로젝트 내 다른 파일로 이동할 때 왼쪽 파일트리(최 좌단 사이드바 첫번째) 누르고 이동하는게 아니라

검색

 

- 터미널 켜고 싶을 때

물결 표시임

 

- 리액트 프로젝트를 하는데 리액트 빌드 명령어나 start명령어 이런것들을 입력하고 싶다?

npm run 바로 입력하는게 아니라

 : 방향키 위버튼 눌러서 전에했던거 찾아보든지

 : 파일트리에 이런 메뉴가 있음