VS Code 단축키 모음+플러그인 모음 (꿀팁)

안녕하세요..!!

오늘은 VisualStudioCode

VS Code 단축키 모음 및

플러그인 모음입니다.

코딩할 때 VS Code 쓰는데

와...이런 신세계가 

있나 싶어서 

정리를 해놔야겠다는 생각이 들었습니다.

맥북 유저여서 맥북 기준으로 단축키 적겠습니다.

 

** 윈도우는 cmd 를 ctrl로,

optiond을 alt로

생각하시면 되겠습니다.

---

단축키 모음

1. cmd + /    -->   한번에 주석처리

2. cmd + d --> 같은 단어 드래그

- 예를들면 <div> </div> 있으면 div 한 번에 드래그 되어서 수정 가능.

3. option + click --> 동시 다발적으로 클릭 가능, 여러 줄 클릭 가능.

4. option + ↑↓ --> 드래그 되어 있는 줄의 코드를 위 아래로 옮김.(여러 줄 가능)

5. option + shift + ↑↓  --> 드래그 되어 있는 줄을 위,아래로 복사 

6. option + shift + i --> 드래그한 모든 줄을 cursor 클릭 처리함.

7. option + shift + drag --> cursor가 있는 곳으로 모두 드래그함.

8. cmd + ↑↓ --> 코드 맨 위로, 코드 맨 아래로!

9. cmd + b --> 사이드바 가리고 싶을 때! 

10. cmd + shift + p --> Command Pallet 

- VS Code 내에서 실행 가능한 파일을 찾아서 실행 시킴.

 

플러그인 모음

음 이건 ... 이용하는 언어에 따라 extension을 맞춰서 다운로드 하면 됩니다.

그 외에 좋은 플러그인을 소개하자면

 

1. Beauty - 자동 줄맞춤 플러그인 

- 단축키 : cmd + shift + b = 자동 줄 맞춤

key={dish.id} Food="Food" name={dish.name} picture={dish.image} rating={dish.rating}

key={dish.id}
Food="Food"
name={dish.name}
picture={dish.image}
rating={dish.rating}

위의 코드가 아래의 코드처럼 정렬 시킬 수 있습니다. 

개꿀... 사실 이 기능이 너무 맘에 들어서, 지금 글 적고 있는 거임..ㅎㅎ

 

2. Material Theme - 인터페이스 색상

- 가장 중요한 플러그인이라고 생각한다. 개인의 취향에 맞게

이쁜 인터페이스 색상을 골라서 사용하도록 하자!!

* 참고로 나는 darker 색상이다..!!

3. Material ICON Theme - 아이콘 커스터마이징

- 아이콘이 기존의 아이콘이 아닌 더 이쁜? 아이콘으로 설정할 수 있다.

 

4. Bracket Pair Colorizer

- () {} 이런 것들을 색상별로 구분해줌.

 

5. indent-rainbow

- 들여쓰기에 색상을 넣어줘서 구분이 쉽게 해줌.

 

6. AutoRenameTag

- <h1> </h1> 이렇게 있으면 앞에 h1만 바꾸면

자동으로 뒤에 것도 바꿔준다.

 

7. Markdown-All-in-One 

- 깃허브 readme.md 파일 작성시 마크다운 미리보기 등 다양한 기능 지원!

꿀팁 모음

위에 다 작성한 것들이 꿀팁!!

vs code는 정말 섹시하고 사용자를 위한 다양한 편의성을 제공한다.

다양한 extension 다운로드 및 단축키 설정으로 본인의 취향에 맞게 

Customizing 하여 더욱 더 즐겁게 코딩을 하도록 하자 !!