Front-End/React

[React error] - react에서 emmet을 작동시키고 싶을때/+ setting json 파일 찾는법

CODE_PLAN 2022. 11. 18. 14:06

https://orbit-orbit.tistory.com/m/28

 

[React] VS Code 사용 시 React에서 Emmet 사용하기

Emmet에 익숙해진 상태에서 React를 사용하면 참 별거 아닌데도 불편함이 느껴진다. 다시 Emmet을 활성화 시키는 방법을 찾아 나중을 위해 기록. 1. Mac의 경우 Command + , Window의 경우 Ctrl + , 를 통해 Sett

orbit-orbit.tistory.com

참조해서

 

 

 

동그라미 해놓은 편집창에 들어가서  큰괄호 안에 , 넣고 

 

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

 을 작성하고 저장하면 react 에서도 이제 emmet이 사용가능 해집니다.

그리고 setting json 을 찾기 힘들면 다른 방법으로는 ctrl + shift + p 창에 들어가서 workspace를 검색해서도 찾을수 있습니다.


사용법)

emmet abbreviations 가 나왔을때 tab을 누르면 적용되며
emmet abbreviations 나오지 않을 때, ctrl + space 를 누르면 됩니다.

 

주의사항) 

setting.json 파일을 검색해보면 2개가 있는데 

 

 // 기존 세팅
    "emmet.triggerExpansionOnTab": true, // tab
    "emmet.includeLanguages": {            
        "javascript": "javascriptreact",
        "*html": "html",
        }

이런식으로 작성되어 있는곳에 해야하며, trigger 안에 작성해야 적용되는것 같습니다. (해당코드 바깥에 적용하니 적용안됨)