VSCode Add All Missing imports Not Working

Question

For example i make a new create-react-app and i remove App import from index.js. ESLint shows the problem and i can fix it by clicking on App and pressing "Ctrl + Space" or "Ctrl + ." and import App with a click, but i want files to be imported on save.

Source Action > Add all missing imports doesn't work, but interestingly organize imports does.

I don't know what could be the problem. I want to use organize imports and add missing imports on save together.

My Settings.json

+ One thing i realized that vs code can't tell what files are missing at all, because when i removed the auto import extension both ctrl + space and ctrl + . stopped working.

{
    "workbench.iconTheme": "vscode-icons",
    "liveServer.settings.donotShowInfoMsg": true,
    "window.zoomLevel": 1,
    "git.enableSmartCommit": true,
    "eslint.format.enable": true,
    "editor.formatOnSave": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    // "files.autoSave": "afterDelay",
    "diffEditor.renderSideBySide": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "explorer.confirmDragAndDrop": false,
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "prettier.arrowParens": "always",
    "editor.fontLigatures": true,
    "workbench.activityBar.visible": true,
    "workbench.preferredDarkColorTheme": "One Dark Pro",
    "oneDarkPro.bold": true,
    "oneDarkPro.editorTheme": "Onedark Pro",
    "oneDarkPro.vivid": true,
    "workbench.preferredHighContrastColorTheme": "One Dark Pro",
    "workbench.preferredLightColorTheme": "One Dark Pro",
    "workbench.colorTheme": "One Dark Pro",
    "editor.fontFamily": "Fira Code, Fira Code iScript, Consolas, 'Courier New', monospace",
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": true
    },
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "prettier.trailingComma": "es5",
    "autoimport.filesToScan": "**/*.{jsx,js,ts,tsx}",
    "autoimport.doubleQuotes": true,
    "autoimport.showNotifications": true,
    "explorer.compactFolders": false,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.tsdk": "",
    "path-intellisense.mappings": {},
    "relativePath.excludedExtensions": [".js"],
    "typescript.updateImportsOnFileMove.enabled": "always",
    "typescript.preferences.includePackageJsonAutoImports": "on",
    "prettier.useTabs": true,
    "editor.codeActionsOnSave": {
        "source.addMissingImports": true
        // "source.fixAll.eslint": true
        // "source.organizeImports": true
    },
    "editor.snippetSuggestions": "top"
}

Answer 1

Please create a new jsconfig.json file in the root of your app, with:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "checkJs": true,
    "jsx": "react"
  }
}

and then try it with:

import React from 'react'

const Component = () => {
  const [test] = useState(0)

  return <div>{test}</div>
}

export default Component