vscode emmet 사용 시 emmet abbreviation 자동완성 문제 해결

vscode에서 React + styled-componets 사용 시 css 코드 작성 시에 emmet abbreviation 자동완성으로 인한 불편함을 겪었었다.

위의 영상에서 확인할 수 있듯이

font-we

입력 후 자동 완성으로 처음 나오는 옵션이 emmet abbreviation에서 추천해주는 자동완성이다.
그렇기 때문에, css가 아닌 html 태그로 자동완성을 해버린다.

별 것 아닌 것 같지만 굉장히 신경쓰이고 불편하다.

해결법

ctrl+shift+p 를 눌러 'Open Workspace Settings (JSON)'에 들어간다.

//setting.json
{
    "emmet.includeLanguages": {
        "ejs": "html",
        "javascript": "javascriptreact"
    },
    "emmet.showExpandedAbbreviation": "never",  // emmet 자동 완성 문제 해결을 위한 추가 설정
    "editor.quickSuggestions": {                // emmet 자동 완성 문제 해결을 위한 추가 설정
        "other": false
    }
}

setting.json에 다음과 같은 코드를 추가해준다.
includeLandguages는 코드 자동완성, 추천에 사용할 언어를 입력하는 부분이다.

해당 포스팅의 문제를 해결하기 위에선 마지막에 두 값을 설정해주어야한다.

그러나, 해당 두 값을 모두 설정할 시 아예 추천 자동 완성이 안 뜨는 것을 확인하여 다음과 같이 설정하였다.

// setting.json
{
    "emmet.includeLanguages": {
        "ejs": "html",
        "javascript": "javascriptreact"
    },
    "emmet.showExpandedAbbreviation": "never",  // emmet 자동 완성 문제 해결을 위한 추가 설정
    // "editor.quickSuggestions": {                // emmet 자동 완성 문제 해결을 위한 추가 설정
    //     "other": false
    // }
}