코딩시간 줄여주는 VSCode 기능 _ 코딩애플

라용·2022년 8월 13일
0

VSCode 를 더 효율적으로 사용할 수 있는 팁을 알려주는 유튜브 코딩애플 영상입니다.

1. Peek

F12 를 누르면 해당 함수 js 파일로 이동합니다. alt + F12 를 누르면 이동하지 않고 해당 창에 그 부분만 열어 볼 수 있다. html 에서도 적용 가능합니다. 익스텐션중에 CSS PeakHTML CSS support 를 설치하면 html 요소의 css 를 불러와서 수정할 수 있습니다.

2. Refactoring

특정 코드를 함수로 지정하고 싶을 때 드래그하고 ctrl + shift + R 을 누르면 몇가지 옵션을 통해 함수를 만들 수 있습니다. function forEach 등 다양합니다. 긴 줄의 코드의 경우, 별도 파일을 만들어 빼주기도 합니다.

3. Rename Symbol

변수명, 함수명을 일괄적으로 바꿔야 할 때, 변수를 선택하고 우클릭해서 기호 이름 바꾸기(Rename Symbol)을 누르거나, F2 를 눌러서 수정해주면 참조 파일까지 모두 바뀝니다.

4. Snippets

언어별, 프로젝트별로 자동 완성 기능을 강화할 수 있습니다. react 프로젝트를 한다면 익스텐션엔서 react snippets 를 검색해서 설치합니다. Imrr 를 치고 탭을 누르면 라우터 설치할 때 임포트 하는 것들이 만들어지고, imrsuseState 도 쉽게 임포트 할 수 있다. 뷰 프로젝트를 할 때 기본적으로 채워야 하는 템플릿 코드는 < 열고 선택하고 엔터키만 치면 됩니다. Tabnine AI 를 설치하면 조금만 입력해도 자동 완성해줍니다.(유료)

5. Debugger

어려운 코드를 짤 때 코드의 동작원리를 생각하기 어려울 때 디버깅 툴을 쓰면 도움이 됩니다. 변수가 어떻게 돌아가는지 궁금할 때 왼쪽의 빨간점을 찍어주고 좌측 디버깅 툴을 실행시켜주면 해당 코드의 상황을 확인 할 수 있습니다. (추가 확인 필요)

6. multi-cursor

alt + click 하면 여러곳에 커서를 찍어주고 동시에 입력 및 수정할 수 있습니다.

7. emmet

div>p*3 하면 div 태그 안에 p 태그를 3개 생성합니다. class 명도 붙일 수 있습니다. div.container 하면 클래스 이름이 부여된 div 태그를 생성합니다. css 에서도 dn 이라고 치면 display: none; 이 나오고 mt10margin-top : 10px; 입니다.

8. Shortcuts

코드를 하이라이트하고 싶다면 ctrl + L 을 누릅니다. 해당 코드를 이동하고 싶다면 alt + 방향키 로 조절합니다. 해당 코드를 복사하고 싶다면 shift + alt + 방향키 를 눌러봅니다. 커서를 한번에 앞, 뒤로 이동하고 싶다면 ctrl + 좌우방향키 를 사용합니다. 다른 파일을 열고 싶다면 ctrl + P 눌러서 검색합니다. 터미널을 키고 싶다면 ctrl + 백틱 를 누릅니다.

profile
Today I Learned

0개의 댓글