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

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

할 일


  • 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"
      }
    }
    

    좋은 웹페이지 즐겨찾기