microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.32k stars 28.59k forks source link

editor.linkedEditing prevents auto-import from working when using intellisense completion #224460

Open valtism opened 1 month ago

valtism commented 1 month ago

Does this issue occur when all extensions are disabled?: Yes

Steps to Reproduce:

  1. Create a new ReactJS project by running npm create vite@latest
  2. Call it whatever you like, and select react and typescript as the options
  3. Open the folder in VSCode
  4. Reload without extensions and ensure that editor.linkedEditing is turned on in the settings
  5. Under /src create a file called MyComponent.tsx
  6. Add the following code to the component:
    export function MyComponent({ children }) {
    return <div>{children}</div>;
    }
  7. Go to /src/App.tsx
  8. In the JSX, copy and paste <MyComponent>Hello</MyComponent> inside the JSX, making sure not to auto-import the component
  9. Delete the ent in the opening tag, then just type nt and select the component from the intellisense dropdown
  10. Note the component does not get imported
  11. Next, delete some of the opening tag again, then type out the full name of the tag and select it from the dropdown
  12. This time it is imported
  13. Delete the import, then turn off editor.linkedEditing in user settings
  14. Now when you delete some of the opening tag, then complete some but not all of it and select the import it will both autocomplete and import the component

Expected:

The editor.linkedEditing setting should always import the component, even if it needs to complete the word.

Video reproduction:

https://github.com/user-attachments/assets/a448ebd1-7eb6-4cde-b3a4-21f269e6d9f8

valtism commented 1 month ago

Ping @aeschli - LinkedEditing seems to be your domain