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) (863d258, 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.

[justschen]

@marksamman do you still see this happening? you should be able to cancel the save in the event of a long code action on save happening now, but this is likely caused by TS/JS

[marksamman]

No I haven't had this issue since I repackaged the icon library into a single file with thousands of exports instead of thousands of files with a single export per file.