VSCode Extention for HTML

html 및 css 코드를 편하게 작성할 수 있도록 vscode 확장팩을 설치합니다.

Bracket Pair Colorization Toggler

코드블럭을 표현할때 시작과 끝을 쉽게 찾을 수 있도록 색상으로 분리하여 표시를 합니다.

image-20230207192824104

indent-colorizer

들여쓰기를 할때 다양한 칼라로 코드의 정렬 위치를 파악할 수 있습니다.

image-20230207193015782

Auto Rename Tag

HTML은 한 쌍의 테그로 작성이 됩니다. 만일 시작 테그를 변경하면, 대칭되는 종료 테그도 자동으로 변경을 해주게 됩니다.

image-20230207193207200

auto Close Tag

자동으로 테그를 닫아 줍니다.

image-20230207195832862

htmltagwrap

만일 엘리먼트를 감쌀때 여러분은 어떻게 하는가? 수동으로 일일히 태그를 적어주어 포함시키는데, 이제는 블록을 감쌀때 더이상 이리저리 마우스 키보드 조작 할 필요없이 단축키 하나만으로 감쌀 수 있다.

  • 감싸고자 하는 블록에 놓고 alt + w

image-20230207200000876

Highlight Matching Tag

여러 태그가 중첩되어 있을 때 해당 태그의 끝이 어디인지 찾기 힘들 때가 있다. 그럴 때 쌍이 되는 태그를 표시해 주는 플러그인이다. vs code 자체에도 태그를 누르면 하이라이트가 되는 기능이 포함되어 있지만 해당 태그의 이름(div, p, input 등)을 눌러야지 표시가 된다. 하지만 이 익스텐션은 태그 내 아무곳이나 눌러도 태그를 하이라이트 표시해서 블록을 쉽게 알수 있게 한다.

image-20230207200154912

CSS Peak

HTML 문서에서 사용되는 css를 쉽게 찾아 줄수 있는 확장 패키지 입니다. css 클래스를 crtl + 클릭 형태로 바로 갈 수 있습니다.

image-20230207193408010

HTML to CSS autocompletion

HTML문서에서 먼저 CSS 클래스를 사용하고, CSS 문서를 사용할때 자동으로 클래스명을 완성해 줍니다. CSS Peak과 반대로 css가 사용된 html의 위치를 찾아 줍니다.

image-20230207193732764

HTML CSS Support

CSS 스타일된 클래스를 HTML에서 쉽게 바로 쓸수 있도록 자동완성을 지원합니다.

image-20230207194028525

Live Server

HTML 문서를 로컬 웹서버로 실행을 할 수 있으며, 수정중에도 새로고침 없이 바로 수정된 내용을 확인할 수 있습니다.

image-20230207194253796

Prettier-code formatter

코드를 보기 좋게 정렬해 주는 확장 기능입니다.

image-20230207194439355

vscode 환경설정에서 format on save 을 검색합니다. 이부분을 체크 합니다.

image-20230207194709725

선택 : prettier single quote 를 체크합니다. 더블 따옴표를 단일 따옴포를 변경합니다.image-20230207195150802

default fomatter 에서 prettier 로 설정을 합니다.

image-20230207195334793

Prettier php 플러그인 설치

Lorem

image-20230207194901487

image preview

  • 코드라인 번호 왼쪽에 이미지가 나타난다.
  • 이미지 url에 마우스를 올려놓으면 프리뷰 이미지를 볼수 있다.

image-20230207200519566

color Highlight

image-20230207201157351

Format HTML in PHP

image-20230207201327764