Code action "source.addMissingImports" is extremely slow on save

[marksamman]

Type: Performance Issue

The issue happens when saving a ts/tsx file that has missing imports, where I expect it to add the missing imports. It takes over 20 seconds to save when it needs to add a couple of missing imports.

Show this message in the bottom right corner: Saving 'Filename.tsx': Getting code actions from ''TypeScript and JavaScript Language Features'' (configure).

No extensions installed. I have tried complete reinstallation of VS Code and removed all local configuration (only addMissingImports enabled).

.vscode/settings.json:

{
  "editor.codeActionsOnSave": {
    "source.addMissingImports": "explicit",
  },
}

tsconfig.json:

{
  "compilerOptions": {
    "lib": ["es2021", "dom", "dom.iterable"],
    "types": ["node", "bun"],
    "jsx": "preserve",
    "target": "es2021",
    "moduleResolution": "bundler",
    "module": "esnext",
    "noEmit": true,
    "moduleDetection": "force",
    "rootDir": "src/js",
    "isolatedModules": true,
    "sourceMap": true,
    "allowImportingTsExtensions": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "verbatimModuleSyntax": true
  },
  "exclude": ["dist", "helpers", "node_modules", "tailwind.config.ts", "vite.config.ts"]
}

Happens in workspace and also if I just open the particular project as a folder. I am not sure exactly when this started happening, as it has been happening from time to time, but right now happens consistently. When it was working fine it was instant.

VS Code version: Code 1.87.2 (Universal) (863d2581ecda6849923a2118d93a088b0745d9d6, 2024-03-08T15:21:31.043Z) OS version: Darwin x64 23.4.0 Modes:

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz (8 x 2300)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|3, 3, 3| |Memory (System)|32.00GB (0.16GB free)| |Process Argv|--crash-reporter-id 4de4c709-1a11-494f-a46a-743da7067cbd| |Screen Reader|no| |VM|0%|

Process Info

``` CPU % Mem MB PID Process 31 164 48342 code main 2 66 48345 gpu-process 0 33 48346 utility-network-service 0 426 48348 window [1] (Filename.tsx — myproject (Workspace)) 2 66 48350 shared-process 0 0 48998 /bin/ps -ax -o pid=,ppid=,pcpu=,pmem=,command= 0 33 48351 fileWatcher [1] 0 98 48352 extensionHost [1] 0 66 48354 /Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Plugin).app/Contents/MacOS/Code Helper (Plugin) /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/json-language-features/server/dist/node/jsonServerMain --node-ipc --clientProcessId=48352 0 98 48475 electron-nodejs (tsserver.js ) 0 197 48476 electron-nodejs (tsserver.js ) 0 33 48481 electron-nodejs (typingsInstaller.js typesMap.js ) 0 524 48622 window [3] (Filename.tsx — frontend) 0 33 48641 fileWatcher [3] 0 98 48642 extensionHost [3] 0 98 48665 electron-nodejs (tsserver.js ) 0 229 48666 electron-nodejs (tsserver.js ) 0 33 48672 electron-nodejs (typingsInstaller.js typesMap.js ) 0 98 48707 /Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Plugin).app/Contents/MacOS/Code Helper (Plugin) /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/json-language-features/server/dist/node/jsonServerMain --node-ipc --clientProcessId=48642 4 66 48996 window [4] (Issue Reporter) ```

Workspace Info

``` | Window (Filename.tsx — frontend) | Window (Filename.tsx — myproject (Workspace)) | Folder (frontend): 343 files | File types: tsx(136) ts(85) woff2(18) js(13) css(12) png(8) tgz(8) | DS_Store(5) json(4) jpg(4) | Conf files: settings.json(1) package.json(1) tsconfig.json(1) | Folder (frontend): 343 files | File types: tsx(136) ts(85) woff2(18) js(13) css(12) png(8) tgz(8) | DS_Store(5) json(4) jpg(4) | Conf files: settings.json(1) package.json(1) tsconfig.json(1) ```

Extensions: none

A/B Experiments

vsliv368:30146709
vspor879:30202332
vspor708:30202333
vspor363:30204092
vscorecescf:30445987
vscod805cf:30301675
binariesv615:30325510
vsaa593:30376534
py29gd2263:30899288
vscaat:30438848
c4g48928:30535728
azure-dev_surveyone:30548225
962ge761:30959799
pythongtdpath:30769146
welcomedialog:30910333
pythonidxpt:30866567
pythonnoceb:30805159
asynctok:30898717
pythontestfixt:30902429
pythonregdiag2:30936856
pyreplss1:30897532
pythonmypyd1:30879173
pythoncet0:30885854
h48ei257:31000450
pythontbext0:30879054
accentitlementsc:30995553
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
cppperfnew:31000557
d34g3935:30971562
fegfb526:30981948
bg6jg535:30979843
ccp2r3:30993541
dsvsc020:30976470
pythonaic:30996667
666c4381:30973075
7ghi1836:30988842
dsvsc021:30996838
gd77d436:30999572

[mjbvz]

Please provide a small example project which demonstrates the issue

[marksamman]

While preparing a small example I noticed that this is caused by an icon pack I have in my project which totals over 30000 .d.ts files. Since they are in node_modules and I am definitely not editing them in-between saves, it makes me wonder if the processing that happens could be cached.

The icon pack is the paid version of Font Awesome so I cannot share it publicly, I can send over a repro by email if necessary. You may also be able to reproduce the slowdown in a project with these packages in your package.json:

    "@fortawesome/free-brands-svg-icons": "^6.5",
    "@fortawesome/free-solid-svg-icons": "^6.5",
    "@fortawesome/free-regular-svg-icons": "^6.5",

That's slightly under 3000 .d.ts files though, so it won't be as slow as what I'm experiencing.

[marksamman]

I solved my problem by re-packaging the icon pack so that all SVG icons are exported from a single file, it's now more or less instant for me. Hope this can still be improved as it's annoyingly slow when it has to check too many files.

Two other issues I have with the "add missing imports" functionality:

• it usually doesn't add the import on the first save, I have to hit save 2 or 3 times
• it prefers importing modules from dependencies in node_modules/ over modules with the same name within the project, 99% of the time what I want to import is the module within my project

[nwparker]

• it prefers importing modules from dependencies in node_modules/ over modules with the same name within the project, 99% of the time what I want to import is the module within my project

This isn't a great solution, as it's a bit manual, but it works for common imports that are troublesome. Just exclude them in your settings.json using "typescript.preferences.autoImportFileExcludePatterns" I don't know of a way to prioritize local imports, last time I checked, there was not a way.