Visual Studio Code - 확장 프로그램(extension) 추천

vsc로 웹 개발 코딩할 때 도움되는 익스텐션 추천

 

1. Live Server

• 크롬에 html 파일 경로를 치면 웹 페이지로 볼 수 있는데, 이는 파일에 변경사항이 있을 때마다 새로고침해줘야 한
• Live Server를 install하면 vsc 우측 하단에 Go Live 버튼이 뜬다
• Go Live 버튼을 누르면 새로고침하지 않아도 파일을 저장하자마자 웹에서도 변경사항이 반영된다

 

2. Live Preview

• 돋보기를 누르면 실시간으로 vsc에서 미리보기할 수 있다

 

3. Material Theme

• 다양한 vsc 테마 제공
• Set Color Theme 버튼을 누르면 다른 테마로 변경할 수 있다

 

4. Material Icon Theme

• vsc에서 뜨는 파일 아이콘 테마
• html, css, js...등 파일명 우측에 뜨는 파일 아이콘을 변경해준다

 

5. auto close tag

• 여는 태그를 작성하면 닫는 태그를 자동 생성한다

 

6. Auto Rename Tag

• html에서 <p></p>를 <span></span>으로 수정하려면 여는 태그와 닫는 태그를 모두 수정해줘야 한다
• 해당 익스텐션을 install하면 여는 태그의 이름을 수정하면 닫는 태그도 함께 수정해준다

 

7. HTML to CSS autocompletion

• css에서 html에서 작성한 클래스를 작성할 때, 자동완성을 지원해준다
• 원래 css에서는 css에서 이미 작성한 클래스명, 아이디명..등만 자동완성으로 띄우지만, 해당 익스텐션에서는 html에서 작성한 클래스명..등도 자동완성으로 띄어준다

 

8. HTML CSS Support

• HTML to CSS autocompletion 익스텐션과 한 세트인 익스텐션이다
• 해당 익스텐션은 반대로 html에서 클래스명..등을 작성할 때 css에서 작성한 것에 대해 자동완성을 띄어준다

 

9. indent-rainbow

• depth에 따라 tab의 색을 바꿔주는 익스텐션

 

10. Color Highlgiht

• css에서 색상을 지정했을 때, 좀 더 직관적으로 보여준다

 

11. Image preview

• 원래는 이미지 경로에 Ctrl+마우스 우클릭하면 해당 이미지로 들어가진다
• 해당 익스텐션은 이미지 경로에 Ctrl+마우스 올려놓기만 하면 해당 이미지를 미리보기로 띄어준다
• svg preview 익스텐션도 있다

 

12. Prettier

Prettier에 대해서는 설정할 게 많아서 Eslint랑 같이 나중에 더 자세히 포스팅하는 걸로...