1. Peek
<사용방법 : F12>
> 다른 파일에서 함수를 불러 쓸 때 그 함수에 대해 알고싶을 때 사용할 수 있다.
> 함수가 있는 파일의 위치로 워프하게 된다.<사용방법 : Alt + F12>
> 현재 작업하고 있는 위치에서 함수를 확인하거나 작업을 하고 싶을 때 사용
> 현재 파일에서 함수의 정보를 볼 수 있고 수정할 수 있다.<HTML , CSS 파일에서도 가능>
> 플러그 설치 : CSS Peak, HTML CSS Support 설치
> 위와 동일한 방법으로 사용 가능하다.2. Refactoring
<사용방법 : Ctrl + Shift + R>
1. 로직을 함수로 감싸고 싶을 때 사용할 수 있다.
> 해당 로직을 드래그 후 Ctrl + Shift + R 을 누른 후 함수로 감싸는 옵션을 선택하면 가능하다.
> 스코프 밖에 만드는 것도 가능하다.2. 변수로 만들기 도 가능하다.
3. 로직을 다른 파일로 뺄 수 있다.
> Move to new file 옵션 선택3. Rename Symbol
/* 두가지 방법 중 아무거나 사용해도 무방하다 */<사용방법1 : 변수 선택후 우클릭 + rename symbol을 선택>
<사용방법2 : 변수 드래그 후 F2>
> 여러 파일의 변수를 모두 바꾸고 싶다 할때 사용하면 좋다.
(선택된 변수와 관련된 변수를 찾아 rename가능하다, 다른 파일에 있는 것도 가능)
4. Shippets
<사용방법 : 해당 프로젝트 언어에 맞는 Snippets 플레그를 설치하면 된다.>
> VS Code를 사용하는 이유 중 하나가 자동 완성이다. 자신이 사용하는 언어에 대한 자동완성을 도울수 있는 기능이다.
> Ex) Vue Snippets 플레그 설치5. Multi-Cursor
<사용방법 : Alt + 원하는 코드에 마우스 왼쪽 클릭>
여러개의 코드에 같은 소스를 작성해야 하는데 한번에 하기 위해서 사용하는 방법이다.6. Emmet
<사용방법 : emmet 명령어 + tab
Html 코드를 작성할 때 <>를 입력하지 않고 div를 입력후 tap을 치면 자동으로 div태그를 만들수 있다.
-> <div></div> 생성emmet 명령어 예제
1. div태그안에 p태그 3개를 넣고 싶다
-> div>p*3 입력후 tap2. div태그에 class name을 test로 넣고 div태그안에 p태그 3개와 클래스명을 test1으로 넣고 싶다
-> div.test>p.test1*3 입력 후 tap
다른 명령어는 직접 검색 해보도록 하자
7. Shortcuts
<사용방법>
1. 한줄의 코드 드래그 : Ctrl + L
2. 한줄코드를 밑으로 내리고 싶다 : 1번 실행 후 Alt + 방향키
3. 코드를 복사해서 밑에줄에 넣고 싶다 : Shift + Alt + 아래방향 키
4. 코드에서 방향키로 빨리 워프하고 싶다 : Ctrl + 방향키 (단어별로 워프가능)
5. 프로젝트에서 다른 파일로 이동하고 싶다 : Ctrl + P 입력후 파일 검색
6. 터미널을 키고 싶다 : Ctrl + ` (여기서 `는 숫자 1 옆에 있는 백탭키 이다.)
7. 나는 신나게 코드를 입력하고 싶다 : power mode 플레그 설치하면 멋지게 코드를 작성할 수 있다.나는 코딩을 할 때 마우스를 쓰지 않고 개발하고 싶다 할때 유용하다.위의 설명에서 부가적인 부분은 직접 검색해서 사용해 보자.
참고 링크 : 재밌고 자세하게 알려 주는 유튜버
풀스택 개발 이야기
잘 봤습니다. 좋은 글 감사합니다.