vscode · Emmet Snippet에서 html, css, jsx를 손쉽게 빨리 (비망록)

만약 불명한 곳이나, 실수등이 있으면 지적 받을 수 있으면 다행입니다.

할 일

vscode에 기본 제공되는 emmet snippets을 사용하여 빨리 html, css, jsx를 작성하려고합니다.

emmet은 어떤 것인지를 흠뻑 눈을 뜬다

vscode의 Emmet Snippets이란?

vscode는 기본적으로 emmet의 auto-completion을 제공합니다.

html의 auto-completion 예제

ul>li*3>span.hello$

쓰면

<ul>
    <li><span class="hello1"></span></li>
    <li><span class="hello2"></span></li>
    <li><span class="hello3"></span></li>
</ul>

이런 식으로 HTML을 자동으로 완성해준다.

css의 auto-completion 예제

p10

쓰면

padding: 10px;

이런 식으로 css 속성을 자동으로 완성해준다.

Emmet란?

Emmet은 기본 형식의 입력 완성 기능으로 HTML, XML, XSL 등을 빠르게 편집 할 수있는 텍스트 편집기 플러그인
vscode는 이 플러그인을 기본 탑재하고 있다.

Emmet으로 할 수있는 일

html, css, xsl의 auto-completion

Emmet Documents

Cheat Sheets의 일부를 기억하는 것이 편리합니다.

● Cheat Sheets(html, css, xsl)
htps : // / cs. 에메 t. 이오 / 치아 t-shie t /

● Syntax & Documentation
htps : // / cs. 에메 t. 이오 / 아 b 레즈 아치 온 s / syn x /

jsx에서도 사용할 수 있도록 설정

react 등으로 편리

설정 ▶확장 기능 ▶emmet 항목에서 setting.json을 열고 다음 설정 추가

setting.json

{
  "emmet.includeLanguages": {
     "javascript": "javascriptreact"
  }
}