개발 환경 세팅 - Visual Studio Extension

 

개인적으로 쓰면서 좋았던 Extension 을 정리해봅니다.

 

1. Prettier

-> javascript 코드 정리를 해 줍니다.

 

2. indent-rainbow

-> 들여쓰기를 무지개 색깔로 보여줍니다.

 

3. CSS peek

-> html 파일에 css를 사용한 class의 해당 css 파일의 위치로 이동해줍니다.

 

4. HTML CSS Support 

-> CSS 파일 속성 자동완성 기능 제공, html에서 CSS 파일의 class 자동 완성 기능 제공

 

5. Live Server

-> html 소스등의 내용을 실시간으로 서버로 띄워 화면에 표시해준다. html 소스 수정 시 실시간 반영이 됩니다.

 

6. Emmet

-> html 을 일일이 칠 필요없이 약어등을 사용하여 바로 생성하여 사용할 수 있습니다.

 

7. Auto Remane Tag & Auto Close Tag

-> 태그 수정할 때 자동으로 같이 수정해줍니다. & 자동으로 태그를 닫아줍니다.

 

8. EsLint

-> 자바 스크립트 문법 및 코드 스타일 검사 도구입니다.

 

9. Image Preview 

-> 마우스 오버하면 이미지를 미리 볼 수 있습니다.

 

10. Rainbow Brakets

-> 괄호를 무지개 색깔로 보여줍니다.

 

11. Path Intellisense

-> 일부 파일경로 입력하면 자동으로 해당 경로를 띄어줍니다.

 

12. GitLens

-> 파일 히스토리, 커밋 이력은 물론 커서가 위치한 라인의 커밋 이력도 볼 수 있고, 파일의 변화 내역도 확인할 수 있는 아주 편리한 도구입니다.

 

13. Active File In StatusBar

-> 현재 활성 파일의 경로를 하단 상태 막대에 표시합니다. 이 경로를 클릭하면 클립보드에 복사하여 사용 할수 있습니다.

 

14. Settings Sync

-> Github Gist를 사용하여 VScode의 설정(확장플러그인 포함)을 동기화 시켜주는 도구 입니다.

 

15. Color Highlight

-> RGB 색상코드표를 테두리에 표시해줍니다.

 

16. Material Theme & Material Icons

-> vs code 테마와 아이콘입니다.