What are effective methods for enhancing Typescript IntelliSense in VsCode for improved performance?

Question

What are effective methods for enhancing Typescript IntelliSense in VsCode for improved performance?

Behold, my trusty machine:

MacBook Pro (16-inch, 2019)
2.3 GHz 8-Core Intel Core i9
16 GB 2667 MHz DDR4
Intel UHD Graphics 630 1536 MB

When I delve into typescript with angular, a glitch arises: https://i.sstatic.net/jcNcE.gif

The larger the project, the longer the load times get, dampening my developer vibe. Is there a way to beef up VS Code's performance by allocating more resources? Any tricks or optimizations worth exploring?

Remedies attempted:

Extremely Slow Typescript VSCode Intellisense
Extremely slow intellisense menu? No extensions loaded whatsoever.
Extensive CPU usage / Slow TypeScript Intellisense
VS Code Intellisense is extremely slow (there is no .vs file see screenshot below)
Visual Studio Code Intellisense is very slow - Is there anything I can do?
VSCode practically unusable with slow intellisense without using extensions

Sample Project layout:

https://i.sstatic.net/J5pHu.png

typescript visual-studio-code

Answer 1

Answer №1

Turning off this feature significantly improved the speed.

You can test if a specific extension is causing the issue with this method.

Access the Command Palette by pressing Ctrl+Shift+P
Search for "Disable all installed extensions"
Re-enable extensions one at a time or in batches and observe the impact on IntelliSense performance

Answer 2

Turning off this feature significantly improved the speed.

You can test if a specific extension is causing the issue with this method.

Access the Command Palette by pressing Ctrl+Shift+P
Search for "Disable all installed extensions"
Re-enable extensions one at a time or in batches and observe the impact on IntelliSense performance

Answer 3

Answer №2

Here are your options:

Turn off the default extensions and reboot your system
Deactivate eslint and tslint-plugin
This decision varies depending on which version of VsCode you have

Answer 4

Here are your options:

Turn off the default extensions and reboot your system
Deactivate eslint and tslint-plugin
This decision varies depending on which version of VsCode you have

Answer 5

Answer №3

If you're looking to make a change, head over to the settings and select this option:

Disable Automatic Type Acquisition in TypeScript

https://i.sstatic.net/HC9DW.png

Answer 6

If you're looking to make a change, head over to the settings and select this option:

Disable Automatic Type Acquisition in TypeScript

https://i.sstatic.net/HC9DW.png

Answer 7

Answer №4

Dealing with a similar issue, I found a solution by updating the TypeScript SDK used by VSCode. Start by installing the latest version of TypeScript globally using npm or yarn.

npm i -g typescript@latest

Next, locate the global installation location of your TypeScript library by running the following command:

npm root -g

This will provide the path to the global node_modules directory, such as C:\Users\bob\npm\node_modules. In the settings of VSCode, search for typescript.tsdk and enter the path from the previous command followed by /typescript/lib, like

C:\Users\bob\npm\node_modules\typescript\lib

. https://i.sstatic.net/CShST.png

After making these changes, try restarting VSCode... Hopefully, this information proves helpful :)

Answer 8

Dealing with a similar issue, I found a solution by updating the TypeScript SDK used by VSCode. Start by installing the latest version of TypeScript globally using npm or yarn.

npm i -g typescript@latest

Next, locate the global installation location of your TypeScript library by running the following command:

npm root -g

This will provide the path to the global node_modules directory, such as C:\Users\bob\npm\node_modules. In the settings of VSCode, search for typescript.tsdk and enter the path from the previous command followed by /typescript/lib, like

C:\Users\bob\npm\node_modules\typescript\lib

. https://i.sstatic.net/CShST.png

After making these changes, try restarting VSCode... Hopefully, this information proves helpful :)

Answer 9

Answer №5

To troubleshoot any issues with your TS Server, it is recommended to review the server logs. You can do this by adjusting the following setting in your settings.json:

"typescript.tsserver.log": "verbose"

After making this change, navigate to the output tab in the bottom pane to locate the tsserver Log file. Once you have identified the file, run the command tail -f /path/to/tsserver.log.

If you discover that certain files are not being ignored, you can resolve this issue by updating your jsconfig.json file located at the root of your project. Simply add the following code snippet:

{
    "exclude": [
        "node_modules",
        "<folder with unnecessary large files>"
    ]
}

Answer 10

To troubleshoot any issues with your TS Server, it is recommended to review the server logs. You can do this by adjusting the following setting in your settings.json:

"typescript.tsserver.log": "verbose"

After making this change, navigate to the output tab in the bottom pane to locate the tsserver Log file. Once you have identified the file, run the command tail -f /path/to/tsserver.log.

If you discover that certain files are not being ignored, you can resolve this issue by updating your jsconfig.json file located at the root of your project. Simply add the following code snippet:

{
    "exclude": [
        "node_modules",
        "<folder with unnecessary large files>"
    ]
}

Answer 11

Answer №6

In case you are utilizing mongoose, certain editions may lead to this issue (specifically versions 5x and possibly some of the 6x). Resolving the problem could involve updating mongoose or transitioning to prisma.

Answer 12

In case you are utilizing mongoose, certain editions may lead to this issue (specifically versions 5x and possibly some of the 6x). Resolving the problem could involve updating mongoose or transitioning to prisma.

Answer 13

Answer №7

Head over to the extensions tab and search for TypeScript-specific extensions that are labeled as Reload Required. If you come across any, make sure to reload them.

In my case, I found that the

JavaScript and TypeScript Nightly

extension needed a refresh.

Answer 14

Head over to the extensions tab and search for TypeScript-specific extensions that are labeled as Reload Required. If you come across any, make sure to reload them.

In my case, I found that the

JavaScript and TypeScript Nightly

extension needed a refresh.

Answer 15

Answer №8

The issue, in my opinion, stems from the codebase we are using. By removing the PandaCSS generated files (.d.ts and .mjs), we noticed a significant improvement in speed.

Answer 16

The issue, in my opinion, stems from the codebase we are using. By removing the PandaCSS generated files (.d.ts and .mjs), we noticed a significant improvement in speed.

Answer 17

Answer №9

In my experience, adjusting the VSCode preference

"files.autoSaveDelay": 10

significantly slows down the linting process. It might be more effective to set it to a higher value such as 100 or even 1000.

Answer 18

In my experience, adjusting the VSCode preference

"files.autoSaveDelay": 10

significantly slows down the linting process. It might be more effective to set it to a higher value such as 100 or even 1000.

Answer 19

Answer №10

After struggling with sluggish intellisense features for a while, I finally discovered the culprit today. Upon examining vscode's settings.json file, I found inaccuracies in the watcherExclude block, particularly the incorrect path mapping "**/node_modules/*/**": true. Additionally, there were exclusions set for the .git directory. Since my workspace root contains a node_modules folder, I adjusted this to "node_modules/**/*": true and ".git/**/*": true to exclude all contents within the .git folder. Surprisingly, after making these changes, regardless of the TypeScript version I use, tsserver now operates at the desired speed. Hopefully, this improvement is not just temporary!

Answer 20

After struggling with sluggish intellisense features for a while, I finally discovered the culprit today. Upon examining vscode's settings.json file, I found inaccuracies in the watcherExclude block, particularly the incorrect path mapping "**/node_modules/*/**": true. Additionally, there were exclusions set for the .git directory. Since my workspace root contains a node_modules folder, I adjusted this to "node_modules/**/*": true and ".git/**/*": true to exclude all contents within the .git folder. Surprisingly, after making these changes, regardless of the TypeScript version I use, tsserver now operates at the desired speed. Hopefully, this improvement is not just temporary!

Answer 21

Answer №11

Successfully resolving the issue involved including TypeScript in the devDependencies.

https://i.sstatic.net/2AEaHSM6.png

Answer 22

Successfully resolving the issue involved including TypeScript in the devDependencies.

https://i.sstatic.net/2AEaHSM6.png

Answer 23

Answer №12

Changing the setting for "Include Package JSON Auto Imports" to "On" instead of "auto" was the solution that worked for me.

"typescript.preferences.includePackageJsonAutoImports": "on"

I'm not entirely sure why this change improves performance, so if anyone has more insights, I would greatly appreciate an explanation.

Source: https://github.com/microsoft/TypeScript/issues/58709#issuecomment-2153332198

Answer 24

Changing the setting for "Include Package JSON Auto Imports" to "On" instead of "auto" was the solution that worked for me.

"typescript.preferences.includePackageJsonAutoImports": "on"

I'm not entirely sure why this change improves performance, so if anyone has more insights, I would greatly appreciate an explanation.

Source: https://github.com/microsoft/TypeScript/issues/58709#issuecomment-2153332198

What are effective methods for enhancing Typescript IntelliSense in VsCode for improved performance?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Answer №12

Similar questions

TypeScript function that differentiates types and provides extra information

Unable to generate a preview of the image that has been uploaded [using the REST API

React Hot Toast useState is unfortunately not exported from the React library

Tips for organizing my data upon its return into a more efficient structure

The Facebook provider is missing in Ionic Native

Problem with opening the keyboard feature in an Ionic app

Typescript HashMap implementation with Lists as values

How to define an object type in Typescript without specifying types for keys in order to access keyof

Leveraging a shared library in Typescript

Removing an item from Storage in Angular 2: A simple guide

An issue arises with launching karma.js when importing node-openid-client in a TypeScript specification file

Retrieve the value of an ng-select component upon submitting a form

Building a typeguard in Typescript that handles errors

Create a mock of a function that executes a promise

Creating a unique theme export from a custom UI library with Material-UI

What is the best way to dynamically add or utilize a pipe in Angular 8?

Retrieve the final variable in an Observable sequence

Leveraging JSX components from a React theme within an ASP.NET Core React Redux web application template with VS2017

In Angular 4, the variable within the component is refreshed or updated only when the service is called for the second

Dealing with mistakes in an Angular service