점 하나로 자동완성 설정

vscode에서 설정 들어가기: 아래 클릭 또는 ctrl + ,

아래 부분을 눌러 settings.json 파일 열기

settings.json 파일 {} 안에 아래를 추가해주면 끝

"emmet.includeLanguages": {
     "javascript": "javascriptreact"
 },
 "emmet.syntaxProfiles": {
     "javascript": "jsx"
 }

이제 App.js에서 .item-name 입력하고 엔터하면 아래처럼 자동완성됨

<div className="item-name"></div>

+) 유용할 단축키 및 예시

---

2025/1월 기준 전체 settings.json파일:

{
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.inlineSuggest.enabled": true,

  "editor.formatOnSave": true,

  "typescript.updateImportsOnFileMove.enabled": "always",

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  },

  "emmet.triggerExpansionOnTab": true,

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "javascript.updateImportsOnFileMove.enabled": "always",

  "eslint.alwaysShowStatus": true,

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "editor.suggestSelection": "first",

  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

  "editor.wordWrapColumn": 100,
  "security.workspace.trust.untrustedFiles": "open",
  "workbench.startupEditor": "none"
}