[VSCode] VS Code 확장프로그램 추천 ( Extension )

1. Dracula Official

코드 테마를 바꿉니다

 

Dracula ( 기본 )

 

 

Dracula soft

 

---

 

2. Material Theme / Material Icon Theme

코드 테마를 바꿉니다

 

아이콘 테마를 바꿉니다

 

High Contrast

High Contrast + Icon

 

Darker High Contrast

Dark High Contrast + Icon

 

---

 

3. Color HighLight

색상 코드를 뚜렷하게 보여줍니다.

 

 

---

 

4. Bracket Pair Colorizer 2

(), {}, [] 괄호에 색상을 입혀, 구분할 수 있게 해줍니다.

 

 

---

 

5. indent-rainbow

들여쓰기를 색깔로 구분해준다

 

 

---

 

6. Rainbow CSV

CSV , (콤마)에 따라 색깔로 구분해준다.

 

 

---

 

7.  Code Runner

코드 테스팅을 간편하게 해준다! ( 라인 별로 실행 가능 )

 

선택된 코드만 실행하기 / 단축키 Ctrl + Alt + N

 

터미널에서 실행하기

설정(Ctrl + ,)에 들어가서 code runner를 검색하고, 터미널로 실행하기를 체크해준다

 

---

 

8. Code Spell Checker

영어 스펠링이 올바른지 체크하고, 추천 단어를 보여준다

 

느낌표를 클릭하면 추천단어를 보여준다

 

---

 

9. Active File In StatusBar

현재 작업하고 있는 절대경로를 하단바에서 알려준다.

 

index.js의 절대 경로를 보여주고 있다~

 

---

 

10. Project Manager

여러개의 프로젝트를 손쉽게 관리하도록 해준다

 

F1을 눌러, PM를 검색해 현재 워크 스페이스(LEARN_TYPESCRIPT)를 PM에 저장(Save) 할수 있다.

 

프로젝트가 저장된 모습 ( Save ),  간편하게 이동

 

---

 

11. Bookmarks

자주 보는 코드에 북마크를 할 수 있다!

 

선택한부분에 우클릭해서 북마크하거나 단축키 사용 / Code runner와 단축키가 겹치므로, 따로 설정해주어야 한다

 

---

 

12. Auto Rename Tag

HTML 태그를 변경할때, 매칭되는 태그를 같이 변경해준다.

 

---

 

13. npm Intellisense

코드에서 Node.js 패키지를 쉽게 가져올 수 있도록, 추천해준다.

 

react, react-dom 등을 추천해주는 모습

 

---

 

13. ES7 React/Redux/GrapQL/React-Native snippets

 

React, GrapthQl등 에서 자주사용하는 형식을, 간편하게 단축키로 사용할 수 있도록 한다.

 

React 단축기를 추천해주는 모습

 

---

 

14. Settings Sync

사용하고있는 vscode 확장프로그램들을 github계정에 연동시켜줍니다! ( Ctrl + Shift + U : 업로드 / Ctrl + Shift + D :  다운로드 )

 

설치시 첫화면 / LOGIN WITH GITHUB로 계정을 연동해준다.

 

로그인 완료 / SKIP버튼을 누르면, 확장프로그램이 github에 저장이된다.

 

 저장이 완료된 모습! 이제 다른 컴퓨터에서도 똑같은 환경을 빠르게 만들수 있다.

 

---

 

15. Power Mode

코드 타이핑할때마다 폭죽터트리기 같은 효과 넣어주기 ㅋㅋ

 

settings.json에 "powermode.enabled": true를 입력해준다