😎 VsCode 확장 프로그램 추천

UI 개발, React, Vue 개발을 주로 하는데 세팅할때 마다 찾는게 귀찮아서,
VsCode에서 자주 사용하는 확장 프로그램을 정리했습니다.

🎯 Basic

1. Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
사용자의 편의에 맞게 구성된 확장, 자동 tab 기능
자동 통일화 등등 사용자가 설정세팅에서 편의에 맞게 설정가능
설정을 별도로 하지않은경우 기본설정으로됨

2. Korean Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko
한국어 적용

3. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
폴더 아이콘 디자인 아이콘 적용

4. Mithril Emmet

https://docs.emmet.io/cheatsheet-a5.pdf
젠코딩

5. HTML CSS Support

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Zen Coding 지원
css 및 scss 파일을 위한 작업 공간 검색, 원격 css 파일 지원
vscode-css-languageservice

6. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
토글 태그를 자동으로 수정해준다 

7. HTML to CSS autocompletion

html 문서에서 생성한 클래스명을 css에서 자동 완성 

8. CSS Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek\
해당하는 클래스를 활성화해서 변경 가능

9. Color Picker

css 컬러를 미리보기 가능하게 해준다.
📌 macOS Color Picker : 윈도우에서 깔았는데 잘나옴 안되면 다른 color picker을 설치 해야함

---

🎯 테마

1. Material Syntax - Dark

전체적인 테마 블랙 & 파스텔 

2. indent-rainbow

작업중인 태그들의 각각의 tab 영역을 컬러로 표시해줌

---

🎯 Git

1. Git Graph

소스트리 대용으로 사용 

2. GitLens — Git supercharged

변경된 부분을 비교 가능

3. Git History

git 히스토리 확인가능

---

🎯 React, vue

1. Vue

소스트리 대용으로 사용 

2. Vetur

vue 파일의 코드 하이라이팅을 위해서 사용합니다.

3. Vue Peek

변경된 부분을 비교 가능

4. Vue VSCode Snippets

vue 파일 초기 구성 생성
Vetur 코드 자동생성을 지원하지만 안될때 있음

5. Reactjs code snippets

react 페이지 세팅 단축기 사용 가능
단축키	설명

rcc : 클래스 컴포넌트 생성
rrc : 클래스 컴포넌트와 react-redux 리덕스를 연결해서 생성
rccp : 클래스 컴포넌트와 prop type들을 클래스 뒤에 생성
rcjc : import와 export없이 클래스컴포넌트 생성
rcfc : 클래스 컴포넌트와 모든 라이프사이클 메서드를 포함해서 생성
rwwd : import없이 클래스 컴포넌트 생성
rsc : 화살표함수형 컴포넌트 생성
rsf : 함수형 컴포넌트를 생성
rsc : 화살표함수형에 props를 내려서 생성

---

🎯 ETC

1. Auto-Open Markdown Preview

README.md 미리 보기 가능 

📌 딱히 필요없을것 같음

gitignore, Git Project Manager, Beautify css/sass/scss/less, Community Material Theme, Material Theme, Material Theme Icons