reactjs - kan inte automatiskt importera react-komponenter från node-moduler

Jag har nyligen börjat arbeta med VS Code. Jag använder Material UI med React och TypeScript. Men jag kan inte importera Material UI-komponenterna med alt(option) + enter-genvägen. Jag använder en Mac och den version av TypeScript som jag använder är 3.0.3. Däremot de React-komponenter som jag skapar explicit, de kan jag importera med den ovan nämnda genvägen. Följande är package.json som jag använder:

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "ahujru",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "3.0.3",
    "@material-ui/icons": "3.0.1",
    "@types/material-ui": "0.21.5",
    "@types/react": "16.4.14",
    "@types/react-dom": "16.0.7",
    "awesome-typescript-loader": "5.2.1",
    "css-loader": "1.0.0",
    "node-sass": "4.9.3",
    "react": "16.5.1",
    "react-dom": "16.5.1",
    "sass": "1.13.4",
    "sass-loader": "7.1.0",
    "source-map-loader": "0.2.4",
    "style-loader": "0.23.0",
    "typeface-roboto": "0.0.54",
    "typescript": "3.0.3",
    "webpack": "4.19.0",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.8"
  }
}

och tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "module": "commonjs",
        "watch": true,
        "sourceMap": true,
        "outDir": "target",
        "target": "es6",
        "jsx": "react",
        "noImplicitAny": true,
        "moduleResolution": "node"
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Jag har redan installerat plugins som npm intellisense, intellij keybindings och auto import men fortfarande verkar ingenting hända. Kan någon vänligen berätta för mig vad jag saknar här.

Svar #1

Jag tror att jag kan reproducera problemet du ser. Baserat på mina tester fungerar auto-importfunktionen som är inbyggd i VS Code endast för symboler som är definierade i filer som redan är laddade som en del av ditt projekt eftersom de matchar, eller är direkt eller indirekt importerade av filer som matchar, include-inställningen i tsconfig.json. (Se denna tråd för viss bakgrund.)

Jag började med dina konfigurationsfiler och en tom källfil men tog bort @types/material-ui eftersom det är för det gamla material-ui-paketet (som du inte har installerat) och bara förvirrar saken. Vid det här laget, om jag anropar kodkomplettering med Ctrl-Space, erbjuds jag inte Material UI-komponenterna (AppBar, Avatar, ...). Men om jag lägger till en import, till exempel import { AppBar } from "@material-ui/core";, tvingar det TypeScript-servern att ladda @material-ui/core, så nu om jag anropar kodkomplettering igen, erbjuds jag resten av Material UI-komponenterna. Om du behöver att automatisk import ska fungera utan en befintlig import, kan du lägga till de lämpliga .d.ts-filerna i include-listan i tsconfig.json, även om du då skulle vilja använda en separat tsconfig.json-fil för batchkompilering så att du inte försöker skriva över JavaScript-filerna i @material-ui/core-paketet.

Jag har inte testat några tredjeparts plug-ins för automatisk import och kan inte uttala mig om deras beteende.

Relaterade artiklar