Nextjs project is very slow to save file in VS Code

[valcosmos]

I am building the project with nextjs and antd, in VS Code it is very slow every time I save the file.

I don't know why this is happening, does anyone know how to fix this?

[RoobleCali]

i have the same issue also i hate page fast refresh

[valcosmos]

I have tried a lot in the past few days, and there seems to be no better solution. I found that using WebStorm will not have such a problem. Maybe using WebStorm is a good solution.

[ayush-dedhia25]

Same. Even I switched to webstorm for my next.js projects

[twinedo]

but Webstorm is not free

[Gasal246]

If you are using any of these extensions in the image just uninstall and restart your vscode, It worked for me.
..

[TrySpace]

Switching to Webstorm is not a solution, it's not even a workaround.

It's like suggesting someone should move to another country because your neighbors have loud music.

[AaliyanAsif]

@Gasal246 solution is the right solution, worked like a charm for me.

[Talent30]

Same here

[nosleepguy]

i have same issue. webstorm is not free

[hungnmhocmai]

I found the problem with VSCode. It's Extention. I was disable GitLens, jest runner, live server extentions. All problem resolved!. I don't know exactly but it work ^^. I think is GitLens. I love VSCode, so i dont want to change WebStorm. Yaaa

[valcosmos]

Amazing 👍, and thank you for sharing, but I found that WebStorem is not bad😉.

[TrySpace]

Are you getting payed by Webstorm or something? Or are you just bitter?

[ayush-dedhia25]

So isn't there any good solution to get over that behavior?

[valcosmos]

Actually, I didn't find a good solution, but i am using WebStorm to avoid this situation.

[ayush-dedhia25]

Not sure if its due to any extension or vs code specific. I really hope that this issue resolves asap.

[aminyaghmaee]

delete your git lens and enjoy

[ayush-dedhia25]

If you mean to say GitLens extension then I don't have it installed 😅

[Karan-Dhingra]

Thank you It worked 🎉

[luga97]

I guess that maybe your problem is related to this issue prettier/prettier-vscode#1333 and not with nextJS. btw my vs code is slow when i work with nextjs also, intellisense linter, everything is fucking me up, i don't know if maybe is a problem with linter and nextjs

[dondxniel]

I'm having the same issue; I'm working with Next 13. I've been having all round performance issues with compilation, load-up, file saving, everything.

[ayush-dedhia25]

I think creating a new vscode profile (from the profiles option) just for nextjs projects with only the extension required for the project development slightly fixes the issue.

[trungdvu]

Same here. So annoying. I disable all extensions except 'Vscode Vim' but it doesn't work until I disable Vim as well

[anthonyLock]

Hello,

I had the same issue, for me I still had not excluded the .next folder in the .prettierignore Please see this for further details on this thread. I intially tried adding it to the tsconfig but it needs it for build step
prettier/prettier-vscode#1333 (comment)

Hope this helps as it is extremely annoying

[HamidBasri]

I had the same issue, my problem was because of the auto import extension, I added .next to the ignore path of this extension in the VSCode config and my problem solved.

[AhmedQasem4]

How to do that?

[gidgudgod]

I had the same issue with the Next JS 13 app stable version. The longer I run my app in dev mode the longer it takes for save, for intellicode to loads suggestions, also for prettier and eslint to auto format. Example case:

1. I stay and edits many times in one page.tsx file, which means nextjs will compile many times as well.
2. As time goes on, the slow loading of saving and formatting comes up.
3. The slow loading comes up more clear especially after I move to another file
4. In the end I tried to restart VSCode and run dev again.
5. At beginning after restart everything goes fine, but as time goes on... back to point number 1.

This is very strange bug because only in this Next JS 13 app project that the lags happen. Meanwhile I also opened other project like React project and Next JS 13 pages project, these projects run just fine.

For now still not yet found the solution, already tried to add .next in tsconfig and disabling extension, but lag still occurs.

[fossage]

I was running into the same issue and it turns out that it had to do with the TailwindCSS prettier plugin, not NextJS. By removing prettier-plugin-tailwindcss from my prettier.config.js, the project has been working smoothly for days now. You can follow the Github issue here: tailwindlabs/tailwindcss-intellisense#755

[ahmed-adel2]

I don't have prettier, and it still happens..

[xitanggg]

I had this issue with prettier-plugin-tailwindcss version 0.3, downgrading it back to say 0.2.1 with npm install --save-dev prettier-plugin-tailwindcss@0.2.1 and restarting VSCode solve the issue for me

[yishayhaz]

I think the best workaround is to create another VSC profile, within this profile do not install extensions such as gitlens, live server and so on (I'm not really sure why or what causes it)

[Cnerd-Mahadi]

just remove if you have any of these packages. mine is working fine after that.

[DanielGardiner]

amazing! this fixed the issue for me 🥳

[Gasal246]

Thankyou Finally this solved my issue.. 🙂

[codeindevelop]

amazing! this fixed the issue for me 🥳

[TrySpace]

Probably the Auto Import extension issue is caused because the default setting:

"autoimport.filesToScan": "**/*.{js,jsx,ts,tsx,css}",

Which will by default scan all the files in .next and it ignores any other global ignore settings you try to set.

[AELONG2001]

Removing these two extensions from VS Code worked for me.

Auto Import
Auto Import - ES6, TS, JSX, TSX