[VS code] emmet 설정하고 사용하기

유용한 emmet 단축키

• : 하위 태그 추가 div>p>a
  • : 형제 태그 추가 div>ul+ol>li*2
  • : 갯수 곱하기
• ^ : 상위 태그 추가 div>ul>li^ol
• () : 그룹화 div>(header>ul>li*2>a+footer>p
• {} : 테그 안에 텍스트 추가 p{hello}
• {$} : 태그 안에 숫자 추가 p.class${item $}*5
• lorem : dummy 태그 자동생성 p>lorem4

---

VS code studio에서 emmet>tab 사용이 안될때

설정에 들어가서 “emmet”을 검색

아래 두가지에 체크박스를 확인한다.

모두다 체크하고 html 문서로 돌아가면 정상 작동한다!

---

그래도 안되면...

setting.json 파일에 아래를 추가하고 저장한다.

"emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "razor": "html",
        "plaintext": "pug"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.syntaxProfiles": {
    
    }