Zoeken op website

javascript - React Auto-import inconsistentie. Werkt voor TypeScript bij het opslaan van één bestand. Niet in andere gevallen


Module-import voor TypeScript werkt, maar alleen als ik "opslaan" gebruik in VSCode, in plaats van alles opslaan.

Bestandsimport werkt ook voor TypeScript React-bestanden, maar binnen return is automatisch aanvullen geen optie, dus moet ik componenten zelf typen.

Voor .js/.jsx werkt geen van beide. Alleen importeren door buiten de return te typen werkt voor bestanden. Als de import wordt verwijderd, wordt deze niet automatisch vervangen.

Ik kan wel wat hulp gebruiken, want na uren geprobeerd te hebben het werkend te krijgen, weet ik niet eens wat ik hierna moet proberen.

Dit is mijn settings.json:

{
    //Emmet
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "emmet.syntaxProfiles": {
        "javascript": "javascriptreact"
    },
    "emmet.excludeLanguages": ["markdown"],

    //ESLINT
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "eslint.lintTask.enable": true,
    "eslint.run": "onType",
    "workbench.iconTheme": "vscode-icons",
    //Autoimport
    "javascript.suggest.autoImports": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.suggest.autoImports": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "explorer.compactFolders": false,
    "editor.codeActionsOnSave": {
        "source.addMissingImports": true,
        "source.organizeImports": true
    },
    //Prettier
    "prettier.arrowParens": "always",
    "prettier.trailingComma": "es5",
    "prettier.useTabs": true,

    //Activity Bar
    "workbench.activityBar.visible": true,

    "material-ui-snippets.showNotesOnStartup": false,

    "diffEditor.ignoreTrimWhitespace": false,

    "vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
    "breadcrumbs.enabled": true,

    "workbench.statusBar.visible": true,

    "gitlens.advanced.quickPick.closeOnFocusOut": false,
    "files.trimTrailingWhitespace": true,

    "workbench.colorTheme": "GitHub Dark",
    "python.languageServer": "Pylance",
    // "workbench.editorAssociations": {
    //  "*.ipynb": "jupyter.notebook.ipynb"
    // },
    "jupyter.interactiveWindowMode": "perFile",

    "gitlens.advanced.messages": {
        "suppressGitMissingWarning": true
    },

    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.autoClosingBrackets": "always",
    "editor.autoClosingQuotes": "always",
    "editor.formatOnSave": true,
    "editor.linkedEditing": true,
    "editor.fontLigatures": true,
    "editor.fontFamily": "Fira Code, Fira Code iScript, Consolas, 'Courier New', monospace",
    "editor.minimap.enabled": false,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.suggestSelection": "first",
    "editor.renderWhitespace": "none",
    "editor.renderControlCharacters": false,
    "editor.snippetSuggestions": "inline",
    "editor.quickSuggestions": true,
    "editor.wordBasedSuggestions": true,


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

    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.autoSave": "afterDelay"
}

Gerelateerde artikelen