Блог

Например, я создаю новое create-react-app и удаляю импорт приложения из index.js . ESLint показывает проблему, и я могу ее исправить, нажав на приложение и нажав «Ctrl Пробел» или «Ctrl .» и импортировать приложение одним щелчком мыши, но я хочу, чтобы файлы импортировались при сохранении.

Исходное действие> Добавить весь отсутствующий импорт не работает, но интересно организовать импорт работает.

Я не знаю, в чем может быть проблема. Я хочу использовать организовать импорт и добавить отсутствующий импорт при сохранении вместе.

Мои настройки.json

Одна вещь, которую я понял, что vs code вообще не может определить, какие файлы отсутствуют, потому что, когда я удалил расширение автоматического импорта, перестали работать как ctrl пробел, так и ctrl .

 {
    "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"
}
  

Пожалуйста, создайте новый файл jsconfig.json в корневом каталоге вашего приложения с:

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

а затем попробуйте это с:

 import React from 'react'

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

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

export default Component