[eclipse]emmet 플러그인 설치

emmit은 미리 지정된(주로 css 선택자 기반)예약어들을 이용해서 어마어마하게 빠른 속도록 html 페이지를 작성할 수 있게 도와주는 녀석이다.

Emmet — the essential toolkit for web-developers

Emmet — the essential toolkit for web-developers

이번 포스트에서는 eclipse에 emmet 플러그인을 설치하고 사용하는 방법을 알아보자.

 

Eclipse에서 Emmet 사용

 

플러그인 다운로드

[Help] > [Eclipse Market Place]로 이동해서 emmet을 검색해보자.

Install Now 클릭 후 라이센스 동의 과정을 거쳐 플러그인 설치를 완료한다. Eclipse를 다시 시작하면 설치가 완료된다.

 

설정하기

Eclipse가 재시작하면 [Preferences]-{Emmet]에서 emmet을 적용할 확장자에 jsp를 추가해준다.

 

사용하기

기본 단축키는 ctrl + e를 사용한다.

    <!-- 기본 단축키는 ctrl + e -->
	div.main*5
    
    <!-- 실행 결과 -->
  	<div class="main"></div>
	<div class="main"></div>
	<div class="main"></div>
	<div class="main"></div>
	<div class="main"></div>

 

주의할 점은 태그와 선택자를 사용할 때 예쁘게 쓴다고 공백을 사용하면 안된다. 즉 아래와 같이 공백을 준 상태에서 Tab을 클릭하면 맨 마지막만 파싱해서 <li>로 변경한다.

div > ul > li

<!--결과물-->
div > ul > <li></li>

 

Emmet에서 사용할 수 있는 단축키의 목록은 사이트에 잘 정리되어있는 Cheat Sheet를 참조하자.

https://docs.emmet.io/cheat-sheet/

Cheat Sheet

 

vs-code가 좋은게 아니다. 그냥 다 플러그인이다. ㅎㅎ