Emmet 을 intelli J, webstorm에서 사용하기

FE개발자의 라이브 코딩을 보면서, 그동안 미련하게 작성했구나를 느껴서 Emmet을 알아보게 되었다. 

Emmet이란?

HTML 자동 완성 기능으로 작성 속도를 향상 시켜주는 플러그인

Emmet 설정 방법

1. HTML

Prefernecs → Editor → Emmet → HTML 에서 Enable XML/HTML Emmet 체크

2. JSX (React , Vue 등등)

Prefernecs → Editor → Emmet → JSX 에서 Enable JSX Emmet 체크

3. 어디서든 쓰고 싶으면

Plugins → Emmet Everywhere install

기본 사용법

1. 자식요소 : >

<div>
    <ul>
        <li></li>
    </ul>
</div>

위처럼 만들고 싶다면

⚙️ div>ul>li

2. 동일요소 반복 : *

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

⚙️ div>ul>li*3

3. 형제요소 : +

<div>
    <p></p>
    <ul>
        <li></li>
    </ul>
</div>

⚙️ div>p+ul>li

4. 단계 올리기 : ^

<div>
    <p></p>
    <ul></ul>
    <li></li>
</div>

⚙️ div>p+ul>^li

이외 다른 문법은 공식 문서를 보면 자세히 안내 되어 있다.

https://docs.emmet.io/abbreviations/syntax/

응용 사용법 React

<div id="comp_lineup_tab">
      <h3 id="blind">라인업</h3>
      <Lineup></Lineup>
</div>

⚙️ div#comp_lineup_tab>h3#blind{라인업}+Lineup

Intelli J에서 아래와 같이 아무리 쳐도 안되는 경우

처음에 아무리 Emmet 기본 문법대로 쳐도, 세팅을 Enable을 해도 작동이 안되었는데, 사용을 위해선 Enter가 아닌 Tab 키를 눌러줘야 자동완성이 된다.