비쥬얼 스튜디오 코드 VSCode 필수 익스텐션! extentions

 

by) 드림코딩

 

자 VSCode를 편하고 간지나게 써보자. 

(한번 설치해 놓으면 편하고 이뻐서 안깔고 못쓰게됨!)

 

1. Material Theme

: 테마를 바꿀 수 있음. 개발자라면 다크모드!

2. Material Icon Theme

: 파일 아이콘들이 이뻐짐 ㅎ

3. Prettier - code formatter

: 코드 줄 정렬 등 자동 포맷팅

• 세팅하기 ( Ctrl + , )
  • → 자바스크립트, 타입스크립트 quote style → single로
  • → 탭 넓이 2로

4. Indent Rainbow

: 들여쓰기 부분 레인보우 컬러로 색으로 표시

→ 포기편함 ㅎ

5. Auto Rename Tag

: HTML의 태그를 수정할 때, 앞 태그를 수정하면 뒤 태그도 자동적으로 바뀜

6. CSS Peek

: 컨트롤을 누른 채, 클래스 명을 클릭하면 해당 클래스의 CSS를 찾아간다!

7. HTML CSS Support

: HTML에서 클래스명을 수정할 때, CSS에 있는 클래스명을 자동 채움할 수 있게 도와줌

8. Live Server

: 코드를 저장하면 바로 적용해 줌! → HTML 화면 볼 때 개 꿀!

• 커맨드 팔렛트에 > live Server: Open with Live Server 입력하고 숏컷키 후 실행

9. ESLint

: 코드칠 때, 틀릴 것 같은 부분에 빨간줄 처줌

10. GitLens

: 깃 사용한다면, 변경 사항 상세 정보 표시해줌

• 누가/언제/어떻게 바꿨는지 ㄷㄷㄷㄷ

11. import Cost

: import 된 라이브러리 크기를 알 수 있음 ㄷㄷㄷ

12. Multiple cursor case preserve

: 같은 단어를 다중 선택하여 수정 할 때, 대소문자를 기억해서 수정해 줌! 개꿀!!

13. CodeSnap

: 코드를 예쁘게 캡쳐해줌

• 세팅을 바꾸면 배경색, 컨트롤 버튼 등 바꿀 수 있음

14.TODO Highlight

: todo와 fixme 주석에 하이라이트 넣어줌! ㅎ 보기편함