여기저기 줍줍한 익스텐션 : VSC편

이번엔 제가 사용하고 있는 익스텐션을 소개할까 해요!

​

VSC(Visual Studio code)의 확장프로그램을 소개합니다!

이름이 같은 익스텐션도 있으니 꼭 개발자 이름을 확인하여 설치해야해요!

​

​

VSC

Community Material Theme

​

VSC 테마를 위한 익스텐션인데요!

가독성을 위해 많은 분들이 사용하고 있어요!

설정법은 이미 인터넷에 많이 나와있으므로, 생략할게요!

---

Sublime Material Theme

​

제가 현재 사용하고 있는 테마인데요!

Dark와 Light 모드 중 Dark를 사용하고 있어요!

---

Material Icon Theme

말 그대로 아이콘 테마인데요! 아래의 사진처럼 다양한 아이콘을 얻을 수 있답니다.

이 밖에 폴더 아이콘도 있으니 천천히 둘러보세요 :-)

---

Prettier - Code formatter

코드 포맷터인데요! 사용하기 위해선 설정을 따로 해주어야해요

천천히 인터넷 자료들을 살펴보면서 설정하세요!

아래와 같이 코드를 정돈해 준답니다!

저처럼 탭의 너비를 늘리고 싶다면, 설정에서 Tab width를 4로 변경해보세요 :-)

---

Beautify

Prettier과 같이 코드 포맷터입니다! :-)

---

Korean Language Pack for Visual Studio Code

영알못, 영포자인 저와 같은 분들 계시지요?

VSC를 한글패치 해주는 익스텐션이예요 :-)

설치해두면 너무너무 유용하답니다!

---

Live Server

내가 문서의 내용을 추가하거나 수정하면 그대로 Localhost에 반영해주는

아~~~~~~~~~~주 편리한 녀석이랍니다!

익스텐션을 설치하고 맨 하단의 버튼을 눌러주면?

아래와 같이 localhost창이 뜨게 됩니다.

내가 문서를 수정할때마다 자동적으로 업데이트가 된답니다! 완전 편리하죠 :-)

---

Auto Rename Tag

코딩할 때 편리한 도구예요! 필수 필수!

한쌍의 태그의 이름을 동시에 고칠 수 있답니다!

---

CSS Peek

ctrl+빨간박스 클릭 을 하면 선택자가 있는 css로 연결됩니다!

코드가 길어질 때 유용한 익스텐션이지요!

---

Braket Pair Colorizer

JS 파일을 다룰 때 유용한 익스텐션인데요!

브라켓의 색상을 변경하여, 범위를 쉽게 확인할 수 있도록 해줍니다!

이렇게 코드를 구분하는게 쉬워진답니다 :-)

---

indent-rainbow

앞서 보여드린 js파일로 보여드릴게요!

차이점을 눈치채셨나요?

탭의 너비만큼 색깔이 칠해졌지요?!

이 익스텐션을 사용하면, 이렇게 코드 가독성을 높여준답니다

---

Reactjs code snippets

리액트를 편리하게 사용하게 해주는 단축키 모음입니다!

---

ESlint

JS를 사용한다면 필수죠! 문법과 코드 스타일을 검사해 주는 도구랍니다.

---

GitLens

VSC에서 깃헙으로 편리하게 커밋하게 도와주는 도구입니다!