VSCode Add All Missing imports Not Working - visual-studio-code

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