Notice
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- webstorm
- visual studio code cli
- 프리티어
- react native #gradle
- eslint-import-resolver-typescript
- 니돈내먹
- currentTimeMillis
- GitLab Mirroring
- '티스토리 초대장/ 티스토리초대'
- Emmet
- gitlab 연동
- 초대장
- 유니옥션
- 실행시간 측정
- Path Alias
- visual studio code
- 음료같은녹즙
- GitHub 미러링
- GitLab미러링
- 티스토리 초대장
- code 설치
- React Native
- GitHub Mirroring
- code .
- code 세팅
- 프레시업 #풀무원 #하루한병 #건강만들기 #풀무원 녹즙
- settings sync
- 네이버 클라우드 플랫폼
- 티스토리초대
- 티스토리 초대장/ 티스토리초대
- Today
- 1
- Total
- 64,828
신나게 개발하기
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>
위처럼 만들고 싶다면
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 키를 눌러줘야 자동완성이 된다.
'프로그래밍 > React' 카테고리의 다른 글
Emmet 을 intelli J, webstorm에서 사용하기 (0) | 2021.12.28 |
---|
0 Comments