VSCode: Formatter slow or freezes if jsconfig.json is present in project

[kling90]

Describe the bug
Since updating to 105.4.0 of the VS Code extension the formatter is really slow or freezes when saving a .svelte file making me having to skip formatting from the VS Code prompt almost every time I'm saving a file.
There's a jsconfig.json present in the project, it's got a couple of aliases mapped in the root of my project.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "#js/*": ["./client_src/js/*"],    
      "#api/*": ["./server_src/api/*", "./client_src/js/api/*"],
      "#api/scripts/*": ["./server_src/scripts/api/*"],
      "#api/webapps/*": ["./server_src/webapps/api/*"],
      "#api/restapps/*": ["./server_src/restapps/api/*"],
    }
  },
  "exclude": ["node_modules"]
}

https://code.visualstudio.com/docs/languages/jsconfig

If I remove this file the formatter works as expected.

Version 102.3.0 doesn't have this problem, I've downgraded to that version in the meanwhile.

To Reproduce
Add a jsconfig.json file to the project, content doesn't seem to matter.
I added an empty jsconfig.json file, or with an empty object, and this causes the formatter to freeze.

Expected behavior
Format the code without freezing.

Screenshots

System (please complete the following information):

• OS: Windows 10
• IDE: VS Code
• Plugin/Package: Svelte for VSCode 102.4.0 102.5.1

[jasonlyu123]

Can you try adding include and exclude (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) We'll exclude node_modules and dist file by default if there's no tsconfig or jsconfig.

[dummdidumm]

Maybe #639 somehow has bad side effects, running too often/taking too long in this case?

Is your exclude correct? I don't see something like dist in there, might be that because of #639 the folder where files are generated to (like dist) is scanned everytime and the files are added, since it's not exlucded.

[kling90]

I changed exclude to this and now it seems to work better, if I reload the editor the first formatting is still slow but all subsequent ones run as expected now (at least for the last half an hour I've been testing it).
Added dist just in case, but the dist folder was empty and I still had problems.

{
  "exclude": ["node_modules", "**/node_modules", "dist"]
}

It's a rather old and large project where functionality in the CMS are built as seperate modules that are completely self contained, so they all got their own node_modules folder and package.json to handle dependencies for that module.
Svelte extenstion outputs this so there's a couple of files 😛

SnapshotManager File Statistics:
Project files: 527
Svelte files: 32
From node_modules: 1342

Just introduced Svelte a couple of months ago and it's been working really well up until now.

[jasonlyu123]

527 is still a lot to me. It's really a large app.

Noted most of the formating performance isssue reported is not actually a formating issue but a more general performance issue. It's just formating is easier to spot. We probably still needs to tweak the performance here and there.

[dummdidumm]

I guess most of those files are from the other projects. Because there's only the jsconfig at the root, everything's loaded even if not needed. I also think we cannot do much there. The initial load is most likely the TS service reading the config file and then scanning and loading all the js/ts files initially. Since that's synchronous we are essentially blocked from doing anything else.

[kling90]

Yes, it's a rather large website that's a couple of years old with ongoing development.
There's a couple of standalone Svelte apps that are used as modules for editors.
So most of the code base is not Svelte related but everything is in the same repository.

Excluding node_modules folders deeper in the structure seems to have solved my problem for now.

Have had the same jsconfig file for years in the project without any problems before, it was last edited 2 years ago.

If you don't need to reference this issue for performance tweaking we could probably close it

[milky2028]

I don't think it's related to your issue, but I'm getting some pretty bad freezy laggy behaviors as well.

[milky2028]

It seems like it's always a step or a change behind or something? Reporting errors is pretty inconsistent.

[dummdidumm]

I need more info about your project and the situation it occurs in.

• does it happen on all files or just large ones?
• what does it affect? Autocompletion? Diagnostics? Everything?
• how big is your project?
• do you use preprocessors like typescript? If yes, which ones?
• have a look at output>Svelte and see if there's anything suspicious in there. There's also a file statistics reporting in there every few minutes, could you paste on in here when the slowness occurs?

If the repo is not private it would be great if I could have a look.

[milky2028]

I was trying to not open a separate issue unnecessarily, but I think my issue might be different enough that it calls for one. I'll try to make a minimal repo as well. The project is small.

[kuechlerm]

I also have a very slow formatting experience but without a jsconfig.json.
Instead I use typescript with a tsconfig.json. A look at the Svelte Output shows

SnapshotManager File Statistics:
Project files: 15
Svelte files: 71
From node_modules: 473
Total: 567

I exclude node_modules in the tsconfig but the result is the same and I suspect that is the reason for the poor performance.
Any suggestions? Thanks.

[dummdidumm]

Is the formatting only slow on startup or all the time? If only on startup - not much we can do, all the files are loaded on startup and that blocks the extension for a little while.
I would need to have a minimum reproducible to narrow down this issue.

[kuechlerm]

It is hard to generalize the problem. Small project don't seem to be affected, at least not that much. But my "bigger" projects behave like this:
The formatting gets slower over time. Smaller files work after startup of Vs Code just fine. But for some larger files (~15 imports of other svelte components, 300 LOC) formatting is slow (takes about 10-15 seconds) from the beginning and only gets worse. The smaller files seem to get slower over time but that is hard to reproduce.

What can I do to get some more useful information for you? I cannot send you the project, because it is some internal stuff for a customer.

[dummdidumm]

Can you anonymize it somehow? So for example remove all dependencies that are internal, extract out one big component and replace its content with lorem ipsum stuff and import other placeholder components. During that extraction process you might also find out that the problem is no longer reproducible, which helps narrow down what the reason is.

[kuechlerm]

I just realized what could be a cause, at least for the consistent lag in the "large" svelte component:
It is a playground that uses a json file as test data (array with ~3.500 items).

import testData from './testData.json';

Is there any way that the tooling can ignore such files?

[IgorMitev]

@kuechlerm Did you find a way to ignore data imports?

[kuechlerm]

@IgorMitev No :(

[dummdidumm]

I guess you have set resolveJsonModule to true in your tsconfig.json? That means to TS "import and analyze that file", which is slow and not avoidable. If you set resolveJsonModule to false instead and provide a d.ts declaration which tells TS to just assume that any file ending with .json is ok like so:

declare module "*.json" {
  const value: any;
  export default value;
}

Then the file is not analyzed and it should be faster. The disadvantage is that you no longer have type definitions for the JSON module and also TS will not error if there's no JSON file at the path you specify.

[kuechlerm]

@dummdidumm That was a very good tip! Thanks.

[dummdidumm]

Closing as there is nothing we can take action on. If performance problems occur, please open a new issue with a detailed reproduction.