VSCode 를 더 효율적으로 사용할 수 있는 팁을 알려주는 유튜브 코딩애플 영상입니다.
F12
를 누르면 해당 함수 js
파일로 이동합니다. alt + F12
를 누르면 이동하지 않고 해당 창에 그 부분만 열어 볼 수 있다. html
에서도 적용 가능합니다. 익스텐션중에 CSS Peak
와 HTML CSS support
를 설치하면 html
요소의 css
를 불러와서 수정할 수 있습니다.
특정 코드를 함수로 지정하고 싶을 때 드래그하고 ctrl + shift + R
을 누르면 몇가지 옵션을 통해 함수를 만들 수 있습니다. function
forEach
등 다양합니다. 긴 줄의 코드의 경우, 별도 파일을 만들어 빼주기도 합니다.
변수명, 함수명을 일괄적으로 바꿔야 할 때, 변수를 선택하고 우클릭해서 기호 이름 바꾸기(Rename Symbol)을 누르거나, F2
를 눌러서 수정해주면 참조 파일까지 모두 바뀝니다.
언어별, 프로젝트별로 자동 완성 기능을 강화할 수 있습니다. react
프로젝트를 한다면 익스텐션엔서 react snippets
를 검색해서 설치합니다. Imrr
를 치고 탭을 누르면 라우터 설치할 때 임포트 하는 것들이 만들어지고, imrs
은 useState
도 쉽게 임포트 할 수 있다. 뷰 프로젝트를 할 때 기본적으로 채워야 하는 템플릿 코드는 <
열고 선택하고 엔터키만 치면 됩니다. Tabnine AI
를 설치하면 조금만 입력해도 자동 완성해줍니다.(유료)
어려운 코드를 짤 때 코드의 동작원리를 생각하기 어려울 때 디버깅 툴을 쓰면 도움이 됩니다. 변수가 어떻게 돌아가는지 궁금할 때 왼쪽의 빨간점을 찍어주고 좌측 디버깅 툴을 실행시켜주면 해당 코드의 상황을 확인 할 수 있습니다. (추가 확인 필요)
alt + click
하면 여러곳에 커서를 찍어주고 동시에 입력 및 수정할 수 있습니다.
div>p*3
하면 div
태그 안에 p
태그를 3개 생성합니다. class
명도 붙일 수 있습니다. div.container
하면 클래스 이름이 부여된 div
태그를 생성합니다. css
에서도 dn
이라고 치면 display: none;
이 나오고 mt10
은 margin-top : 10px;
입니다.
코드를 하이라이트하고 싶다면 ctrl + L
을 누릅니다. 해당 코드를 이동하고 싶다면 alt + 방향키
로 조절합니다. 해당 코드를 복사하고 싶다면 shift + alt + 방향키
를 눌러봅니다. 커서를 한번에 앞, 뒤로 이동하고 싶다면 ctrl + 좌우방향키
를 사용합니다. 다른 파일을 열고 싶다면 ctrl + P
눌러서 검색합니다. 터미널을 키고 싶다면 ctrl + 백틱
를 누릅니다.