Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
styled-components 자동완성
#react
1개월 전
1,865
2

현재 React JS마스터 클래스를 듣고 있는데 아무리 해봐도 니꼬쌤처럼 자동완성이 되지 않습니다.
vscode-styled-components v1.7.8버전을 설치했고

  • package.json

"devDependencies": {
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@types/styled-components": "^5.1.34",
    "eslint": "^8.0.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-react": "^7.0.0",
    "styled-components": "^6.1.13",
    "typescript": "^5.6.3"
  }
  • setting.json

    {
      "editor.tokenColorCustomizations": {
        "comments": "#ffc2c2"
      },
      "emmet.triggerExpansionOnTab": true,
      "files.associations": {
        "*.html": "html"
      },
      "javascript.preferences.quoteStyle": "single",
      "typescript.preferences.quoteStyle": "single",
      "prettier.singleQuote": true,
      "editor.tabSize": 2,
      "editor.fontFamily": "FiraCode-Retina",
      "editor.fontSize": 14,
      "liveServer.settings.donotShowInfoMsg": true,
      "liveServer.settings.donotVerifyTags": true,
      "editor.wordWrap": "on",
      "html-css-class-completion.CSSLanguages": ["html", "css", "sass", "scss"],
      "html-css-class-completion.enableEmmetSupport": true,
      "editor.formatOnSave": true,
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "html-css-class-completion.JavaScriptLanguages": [
        "javascript",
        "javascriptreact",
        "typescriptreact"
      ],
    
      "liveSassCompile.settings.formats": [
        {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "/css"
        },
        {
          "format": "compressed",
          "extensionName": ".min.css",
          "savePath": "/dist/css"
        },
        {
          "format": "compressed",
          "extensionName": ".min.css",
          "savePath": "~/../css"
        }
      ],
      "liveSassCompile.settings.generateMap": false,
    
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "terminal.integrated.fontFamily": "Fira Code",
      "workbench.startupEditor": "none",
      "[python]": {
        "editor.formatOnType": true
      },
      "git.openRepositoryInParentFolders": "always",
      "terminal.integrated.defaultProfile.windows": "Git Bash",
    
      "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescriptreact": "css",
        "javascriptreact": "css"
      },
    
      "editor.inlineSuggest.enabled": true,
      "r.rterm.windows": "C:\\Program Files\\R\\R-4.2.3\\bin\\R.exe",
      "json.schemas": [],
      "javascript.updateImportsOnFileMove.enabled": "always",
      "workbench.colorTheme": "Material Theme Ocean",
    
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "html": "html"
      },
      "eslint.codeActionsOnSave.rules": null,
      "editor.quickSuggestions": {
        "strings": true
      },
      "typescript.preferences.importModuleSpecifier": "non-relative",
      "typescript.suggest.completeFunctionCalls": true,
      "[styled-components]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }
    

인데 어떻게 하면 자동완성이 되게 할수 있을까요?

2 comments