[Portfolio] VSCode 필수설치 확장프로그램

July 2, 2023

반응형 웹 포트폴리오 사이트를 만들기 위해
가장 먼저 준비해야 할 것이 바로 VSCode입니다.
brachets와 쌍두마차인 것 같은데, 이건 이제 Adobe에서 지원종료를 했고…
VSCode는 개발자들도 많이 쓰기 때문에
VSCode를 사용해봤습니다.

프론트엔드 웹 개발자는 아니지만 이 기회에 한 번 공부하게 되면서
가장 먼저 설치해야 할 확장 프로그램들을 정리해보려고 합니다.

Korean Language Pack for Visual Studio Code

한글팩인데 아마 이거 안깔아주면 맥에선 한글이 계속 씹히는 오류가 날 거다.
맥에선 그리고 또 따로 맥 설정으로 들어가서 한글 자동 맞춤법 교정 체크를 풀면
정상적으로 한글이 작성될 거다.

바로바로 서버에 반영된 상태를 확인할 수 있는 확장 프로그램!
이거 신기하더라..마치 이클립스에서 톰캣 설치해서 localhost:8080으로 연결되는 그런 느낌…?
여기선 http://127.0.0.1:5500/ 으로 연결되더라…!

컬러 팔레트가 나와서 바로 선택 할 수 있도록 도와주는 프로그램이다.

들여쓰기 자동으로 해주는 확장 프로그램이다.
아주 편리하다.
그나저나 퍼블리셔 분들은 정말로 들여쓰기(tab)를 2칸으로 맞춰서 하는지 궁금했다.

html에서 태그로 감싸고 싶은 부분을 드래그 한 후에
Alt + W or Option + W 를 누르면 어떤 태그로 감쌀 지 쓰기만 하면
한 번의 입력으로 간단하게 태그로 감쌀 수 있다. 아주 편함!

HTML과 CSS 창 두 개를 동시에 켜놓고 작업을 할텐데,
그럴 때 class명이나 이런 것들을 서로 연동시켜서 바로바로 선택할 수 있게 도와주는 프로그램.

HTML to CSS autocompletion과 같은 기능!

태그로 감쌀 때 한 번만 작성하면 뒤에 태그까지 같이 작성되는 아주 편리한 프로그램이당!

이렇게 8개의 확장 프로그램을 설치하면 된다!

참고) 인프런 코딩웍스 반응형 웹사이트 포트폴리오(Architecture Agency) 강의