Bring along imports when copy and pasting code across files

[mjbvz]

Feature request

From microsoft/vscode#66236

When copy and pasting code between two TS/JS files, we should support adding the required imports on paste. For example, with the following code:

import fs from 'fs';
import http from 'http';

http.createServer((req, res) => {
    const data = fs.readFileSync('bla');
    res.write(data);
    res.end()
})

If I copy fs.readFileSync('bla') and paste it into a new file, an import for fs should also be added to the top of that file:

TS Server Protocol changes

VS Code is actively working on an API that lets extensions hook into copy and paste: microsoft/vscode#30066

Using this api, here's what I imagine the flow between VS Code and TS server would look like:

1. User copies code

2. VS Code tells TS Server about the copied range

3. TS Server goes and writes whatever state it needs to re-create the imports. This state needs to be JSON serializable (so that TS Server can send it to VS Code). Just as an example, this could be something like (note! just for demonstration purposes, not intended to be what this actually looks like):

   {
       "referencedSymbols": [
            {"name": "default", "from": "node:fs"},
            {"name": "mySymbol", "from": "/full/path/to/file"}
       ]
   }

4. TS Server returns this state to the VS Code extension which attaches it to the copied text (this can happen asynchronously)

5. The user now pastes the code in another file

6. VS Code sends TS Server a request with the following:

   • The paste location
   • The saved off state from step 3 / 4 (note that we may actually have to await this data if the server was slow to return here

7. TS Server returns a text edit that adds the imports to the file

[elliotwaite]

The Copy With Imports extension seems to work pretty well at addressing this issue.

Thanks to @lukeapage for mentioning this extension in microsoft/vscode#30066.

[dantman]

The Copy With Imports extension works by overriding the copy and paste keybindings in a kind of hacky way. And having VSCode add an extension into copying introduces a delay that can result in the wrong line of code being copied if you don't wait for the copy command to be invoked.

Copy With Imports as an extension is an ok stopgap. But this should definitely be handled natively in TypeScript and VSCode.

[elliotwaite]

@dantman Ah, good to know. Thanks for the info. Hopefully, native support will be added soon. It seems like a good sign that the TypeScript 5.3 Iteration Plan mentions "Investigate Carrying Imports Across Paste".

[svipas]

@navya9singh @mjbvz

1. Does that mean if Copilot completes code it will be auto-imported in JS/TS, or it works only if I manually paste it?
2. Also, what about if I'm typing code without suggest widget and it matches exact name of a class, does it import it automatically like in WebStorm?

Unambiguous imports on the fly With this checkbox selected, WebStorm adds import statements when you type your code or paste a fragment with a symbol that is not yet imported if there is only one source to import the symbol from.

[tjx666]

So, can we also support update imports after paste file? Sometimes I want to keep origin file there, and copy the file and paste to another place. But after paste the file, the imports not updated.