Web(웹)개발을 위한 Visual Studio code Extension 추천 모음

Visual Studio Code 프로그램을 자주 설치하고 사용하는데 Extension이 헷갈려서...

 

정말 좋은 Extension들이 있지만 Web개발 시 꼭 필요하다고 느꼈던? 혹은 너무 중요한 것들만 적어보고자 한다. 

 

 

개발내용 확인 시 필요한 Extension

 

1. Live Server * 필수

- 내가 코딩하고 있는 홈페이지를 확인할 수 있는 실시간 서버가 열린다.

 

2. Live Preview * 필수

- VS code 내에서 브라우저를 키지않고 확인이 가능함.

 

위 2가지는 내가 치고있는 코드가 어떻게 적용되는지 확인해야 하므로 필수라고 생각 !

 

아래부터는

 

코드칠 때 편리한 Extension

 

1. Auto Rename Tag

- Tag이름이 자동으로 변경되는 아주 소중한 툴

- 수정할 때나 코드 타이핑할 때 아주 유용

같이 변경되요 !

 

2. Indent Rainbow

- 들여쓰기로 코드 이쁘게 정렬하여 가독성이 Up

 

원래는 이렇게 나오는데

이렇게 들여쓰기가 색으로 보인다

 

3. Prettier 

- Code 포맷화해주는 툴

- 코드가 일관된게 만들어준다고하는데 솔직히 잘 공부안해서 모르는데 하라고 해서 쓰는 중 (협업 때 중요하겠지?)

- 이건 설치방법을 따로 구글링해서 확인하고 하시는 것을 추천 (+ 그냥 밑에 정리했다)

 

1) [ ctrl+ , ] 키를 눌러서 Setting 창 열기

2) 검색창에 save 검색

3) Editor : Format on Save 의 Check Box 체크

4) 검색창에 editor default 검색

5) Editor : Default formatter에서 Prettier - code formatter 선택

 

6) Qoute 검색

7) 아래에서 JavaScript > Peferences : Quotestyle,  Type Script > Peferences : Quotestyle 찾기

8) 'auto'를 'single'로 변경하기 

 

5. HTML CSS Support

HTML에서 CSS를 자동완성 - 일일이 안쳐도 됨

 

6. HTML to Css autocompletion

HTML에서 내가 정의한 클래스 자동완성  - 일일이 안쳐도 됨

 

간지나는 Extension

1. Material Theme

- VS code 내 Theme를 바꿀 수 있음 * 색깔 넣기

- Palenight High Contrast가 개인적으로 눈이 편했음

(적용 예시) 흰색 설정 시 / 나는 안씀

 

2. Material Icon Theme

- VS code 내 file icon들을 한번이라도 더 볼 수 있게 바꿔줌

(기존) 기본적인 아이콘들이

(이 후) 요렇게 좀 더 이쁘게 바뀐다.

 

 

나머지 Extension은 각자가 필요한 것 쓰면 될 것 같다!