Visual Studio Code Extension이란? #

소스 코드 편집기인 비주얼 스튜디오 코드에서 개발 편의를 위해 기능을 확장해 새로운 기능을 추가하는 역할을 한다.

프론트엔드 개발을 위한 필수 확장프로그램 #

코드 관련 #

Prettier #

Prettier란 정해진 규칙에 따라 소스 코드 스타일을 정리해주는 도구이다. 여러 규칙을 사용자가 커스텀 할 수 있습니다. 비슷한 확장프로그램으론 Beautify가 있다. Prettier는 코드를 강제적으로 변경시키는 느낌이 있고, Beautify는 좀 더 자유롭게 유지하고 변경시키는 느낌이 있다.

• Pritter 확장프로그램 설치

• .prettier 파일 설정
  • VSCode Prettier 설정은 아래 순서로 적용된다.
    settings.json < .editorconfig < .prettierrc
  • 설정 옵션

Auto Rename Tag #

Auto Rename Tag란 html 태그 명을 변경하면 닫힌 태그를 자동으로 변경해주는 도구다.

• Auto Rename Tag 확장프로그램 설치

• 사용법

Lorem ipsum #

Lorem ipsum란 
로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

• Lorem ipsum 확장프로그램 설치

• 사용법
  • 파일찾기 단축키 후 ctrl + p lorem 검색

서버관련 #

Live Server #

Live Server란 html, CSS와 같은 웹 페이지를 만들 때 내가 소스 코드를 수정함에 실시간으로 변경 사항을 확인할 수 있는 도구다.

• Live Server 확장프로그램 설치

• 사용법

테마관련 #

Material Icon Theme #

Material Icon Theme란 VSCode에서 파일 아이콘을 깔끔하고 보기 좋게 변경해주는 도구다.

• Material Icon Theme 확장프로그램 설치

Reference #

• VSCode Marketplace