search

microsoft / TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
https://www.typescriptlang.org
Apache License 2.0
100.29k stars 12.39k forks source link

Quick fix... — wrong refactoring suggestion — Import 'React' from "react" #49695

Open kasperski95 opened 2 years ago

kasperski95 commented 2 years ago

Issue Type: Bug

Actual

  1. Type name of the component in tsx file in the return section
  2. Quick fix the error
  3. VS Code suggests importing React despite in React 17+ importing React is not required (the project uses "react": "17.0.2")

Screen Shot 2022-06-26 at 21 23 23

Expected

  1. Type name of the component in tsx file in the return section
  2. Quick fix the error
  3. VS Code suggests importing the component

Screen Shot 2022-06-26 at 21 42 28

VS Code version: Code 1.68.1 (30d9c6cd9483b2cc586687151bcbcd635f373630, 2022-06-14T12:48:37.209Z) OS version: Darwin arm64 21.4.0 Restricted Mode: No

System Info |Item|Value| |---|---| |CPUs|Apple M1 (8 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|2, 2, 2| |Memory (System)|16.00GB (0.63GB free)| |Process Argv|--crash-reporter-id fadb1095-8fca-485d-939e-8f01537ce97b| |Screen Reader|no| |VM|0%|
Extensions (39) (Also tested with all extensions disabled.) Extension|Author (truncated)|Version ---|---|--- vscode-sqlite|ale|0.14.1 ng-template|Ang|14.0.1 toggle-semicolon|awe|0.0.1 toml|be5|0.6.0 vscode-expo|byC|0.7.4 bracket-select|chu|2.0.2 dart-code|Dar|3.42.1 vscode-eslint|dba|2.2.2 gitlens|eam|12.1.1 prettier-vscode|esb|9.5.0 vscode-graphql|Gra|0.4.13 vscode-test-explorer|hbe|2.21.1 vscode-styled-components|jpo|1.6.6 markdown-viewer|jul|1.0.0 xml-format|mik|1.1.2 dotenv|mik|1.0.1 vscode-postcss-sorting|mrm|3.0.1 python|ms-|2022.8.0 vscode-pylance|ms-|2022.6.30 remote-containers|ms-|0.238.2 live-server|ms-|0.2.12 test-adapter-converter|ms-|0.1.6 vscode-jest|Ort|4.6.0 material-icon-theme|PKi|4.18.1 prisma|Pri|3.15.0 vscode-yaml|red|1.8.0 vscode-sort-json|ric|1.20.0 vscode-coverage-gutters|rya|2.10.1 multi-command|ryu|1.5.1 comment-divider|sta|0.4.0 cairo|Sta|0.5.0 autoimport|ste|1.5.4 code-spell-checker|str|2.2.5 code-spell-checker-polish|str|1.0.12 lorem-ipsum|Tyr|1.3.1 fig|wit|0.0.6 change-case|wma|1.0.0 markdown-all-in-one|yzh|3.4.3 material-theme|zhu|3.15.2 (1 theme extensions excluded)
A/B Experiments ``` vsliv368:30146709 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vstes627:30244334 pythonvspyl392:30443607 pythontb:30283811 pythonptprofiler:30281270 vshan820:30294714 vstes263cf:30335440 pythondataviewer:30285071 vscod805cf:30301675 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 vsc1dst:30438360 pythonvs932:30410667 wslgetstarted:30449410 vscscmwlcmt:30465135 cppdebug:30492333 vsclangdf:30486550 ```
RyanCavanaugh commented 2 years ago

To make the React import go away completely, you'll need to configure your workspace with a tsconfig or jsconfig file with "jsx": "react-jsx"

That said, we should change it so that you get offered both quick fixes here, with the "Import View" suggestion above the "Import React" one