프로그래밍/React

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

Yi Junho 2021. 12. 28. 23:59
반응형

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>

위처럼 만들고 싶다면

2. 동일요소 반복 : *

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

3. 형제요소 : +

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

4. 단계 올리기 : ^

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

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

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

응용 사용법 React

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

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

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

반응형