VSCode React TS Intellisense way too slow

Question

I have a relatively moderately sized TypeScript React project made with CRA. In fact, I've worked with much larger projects before in different languages, in VSCode and out, and IntelliSense wasn't affected to a non-negligible degree--meaning I highly doubt the size of this project could be causing the problem I'm experiencing:

IntelliSense seems to be unbearably slow. It takes at least 5 seconds for suggestions related to installed packages to show up.

Here is my tsconfig:

{
    "extends": "./tsconfig.paths.json",
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "typeRoots": [
            "node_modules/@types",
            "src/types"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "noImplicitAny": false,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
    },
    "include": [
        "src"
    ]
}

My craco config file, if it matters:

const CracoAlias = require("craco-alias");
module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                // baseUrl SHOULD be specified
                // plugin does not take it from tsconfig
                baseUrl: "./src",
                /* tsConfigPath should point to the file where "baseUrl" and "paths" 
                are specified*/
                tsConfigPath: "./tsconfig.paths.json"
            }
        }
    ],
    parser: '@typescript-eslint/parser',
    rules: {
        'import/extensions': ['.js', '.jsx', '.json', '.ts', '.tsx']
    },
    settings: {
        'import/resolver': {
            node: {
                paths: ['src'],
                extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
            },
        },
    },
    style: {
        postcssOptions: {},
    },
    webpack: {
        configure: {
            stats: 'errors-warnings'
        },
        stats: 'errors-warnings',
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
        },
    },
};

And my package.json:

{
    "name": "fuse-react-app",
    "version": "7.1.0",
    "private": true,
    "dependencies": {
        "@emotion/cache": "11.7.1",
        "@emotion/react": "11.7.1",
        "@emotion/styled": "11.6.0",
        "@fullcalendar/daygrid": "^5.10.1",
        "@fullcalendar/interaction": "^5.10.1",
        "@fullcalendar/react": "^5.10.1",
        "@fullcalendar/timegrid": "^5.10.1",
        "@hookform/devtools": "^4.0.2",
        "@hookform/resolvers": "2.8.5",
        "@mui/base": "5.0.0-alpha.60",
        "@mui/icons-material": "5.2.4",
        "@mui/lab": "5.0.0-alpha.60",
        "@mui/material": "5.2.4",
        "@mui/styles": "5.2.3",
        "@mui/system": "5.2.4",
        "@mui/utils": "5.2.3",
        "@mui/x-data-grid": "5.2.0",
        "@progress/kendo-data-query": "^1.6.0",
        "@progress/kendo-drawing": "^1.16.3",
        "@progress/kendo-licensing": "^1.2.2",
        "@progress/kendo-react-animation": "^5.5.0",
        "@progress/kendo-react-buttons": "^5.5.0",
        "@progress/kendo-react-data-tools": "^5.5.0",
        "@progress/kendo-react-dateinputs": "^5.5.0",
        "@progress/kendo-react-dropdowns": "^5.5.0",
        "@progress/kendo-react-grid": "^5.5.0",
        "@progress/kendo-react-inputs": "^5.5.0",
        "@progress/kendo-react-intl": "^5.5.0",
        "@progress/kendo-react-treeview": "^5.5.0",
        "@progress/kendo-theme-material": "^5.6.0",
        "@reduxjs/toolkit": "1.7.0",
        "@syncfusion/ej2-react-calendars": "^20.2.36",
        "@syncfusion/ej2-react-grids": "^20.2.36",
        "apexcharts": "^3.35.3",
        "auth0-lock": "11.31.1",
        "autosuggest-highlight": "3.2.0",
        "axios": "0.24.0",
        "clsx": "1.1.1",
        "date-fns": "2.27.0",
        "date-fns-tz": "^1.3.0",
        "draft-js": "0.11.7",
        "draftjs-to-html": "0.9.1",
        "firebase": "9.6.1",
        "framer-motion": "5.5.1",
        "history": "5.1.0",
        "i18next": "21.6.0",
        "jwt-decode": "3.1.2",
        "lodash": "4.17.21",
        "mobile-detect": "1.4.5",
        "moment": "2.29.1",
        "notistack": "1.0.6-next.3",
        "perfect-scrollbar": "1.5.3",
        "prismjs": "1.25.0",
        "prop-types": "15.7.2",
        "qs": "6.10.2",
        "react": "17.0.2",
        "react-apexcharts": "^1.4.0",
        "react-autosuggest": "10.1.0",
        "react-dom": "17.0.2",
        "react-draft-wysiwyg": "1.14.7",
        "react-hook-form": "^7.22.0",
        "react-i18next": "11.15.1",
        "react-popper": "1.3.11",
        "react-redux": "7.2.6",
        "react-router-dom": "6.1.1",
        "react-scripts": "5.0.0",
        "react-swipeable": "6.2.0",
        "redux-logger": "4.0.0",
        "styled-components": "5.3.3",
        "stylis": "4.0.10",
        "stylis-plugin-rtl": "^2.0.2",
        "web-vitals": "2.1.2",
        "yup": "0.32.11"
    },
    "peerDependencies": {
        "autoprefixer": "9.8.8",
        "postcss": "8.4.5",
        "react": "17.0.2",
        "react-dom": "17.0.2"
    },
    "resolutions": {
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "babel-loader": "8.1.0"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "devDependencies": {
        "@babel/core": "7.15.8",
        "@babel/node": "7.15.8",
        "@babel/preset-env": "7.15.8",
        "@craco/craco": "^6.4.3",
        "@types/auth0-lock": "11.27.3",
        "@types/autoprefixer": "10.2.0",
        "@types/autosuggest-highlight": "3.2.0",
        "@types/babel__core": "7.1.18",
        "@types/babel__preset-env": "7.9.2",
        "@types/draft-js": "0.11.7",
        "@types/draftjs-to-html": "0.8.1",
        "@types/eslint": "8.4.1",
        "@types/eslint-plugin-prettier": "^3.1.0",
        "@types/js-beautify": "1.13.3",
        "@types/lodash": "4.14.178",
        "@types/prettier": "^2.4.3",
        "@types/prismjs": "1.26.0",
        "@types/prop-types": "15.7.2",
        "@types/qs": "6.9.7",
        "@types/react": "17.0.2",
        "@types/react-autosuggest": "10.1.0",
        "@types/react-dom": "17.0.2",
        "@types/react-draft-wysiwyg": "1.13.4",
        "@types/react-redux": "7.1.22",
        "@types/redux-logger": "3.0.9",
        "@types/styled-components": "5.1.21",
        "@types/yup": "0.29.13",
        "@typescript-eslint/eslint-plugin": "^4.33.0",
        "@typescript-eslint/parser": "^4.33.0",
        "autoprefixer": "9.8.8",
        "babel-eslint": "10.1.0",
        "craco-alias": "^3.0.1",
        "cross-env": "7.0.3",
        "eslint": "7.32.0",
        "eslint-config-airbnb": "^18.2.1",
        "eslint-config-airbnb-typescript": "^16.1.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-config-react-app": "^6.0.0",
        "eslint-plugin-flowtype": "^5.10.0",
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "eslint-plugin-unused-imports": "^1.1.5",
        "js-beautify": "1.14.0",
        "postcss": "8.4.5",
        "prettier": "^2.4.1",
        "promise": "8.1.0",
        "source-map-explorer": "2.5.2",
        "tailwindcss": "3.0.5",
        "tailwindcss-dir": "4.0.0",
        "typescript": "4.4.4",
        "util": "^0.12.4"
    },
    "scripts": {
        "start": "craco start",
        "build": "cross-env GENERATE_SOURCEMAP=false craco build",
        "test": "craco test --env=node",
        "eject": "craco eject",
        "build-docs": "babel-node --presets @babel/preset-env src/app/main/documentation/material-ui-components/build.js",
        "analyze": "craco build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
        "lint": "eslint './src/**/*.js' './src/**/*.tsx'"
    },
    "engines": {
        "node": ">=14.0.0",
        "npm": ">=7.0.0"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 3 safari version"
        ]
    }
}

Disabling all extensions doesn't make a difference. I'm on a high-end PC, and IDEs like Visual Studio run very smoothly. Long wait times are making working sessions extremely unproductive as it feels like it's quicker for myself to add import statements or type in variable names by myself instead of relying on IntelliSense's autocomplete.

score 11 · Accepted Answer · answered Nov 14 '22 at 01:22

I think I finally found the issue after months of pain.

My project had a mix of both TypeScript and JavaScript files because of a template I was using, and I had allowJs set to true in my tsconfig. As a last resort, I decided to change all my files to .ts/.tsx.

The result? IntelliSense is incredibly fast. As fast as it should have always been.

score 2 · Answer 2 · answered Aug 18 '22 at 23:45

Probably your issue:

Styled Components types have been known to mess with intellisense for a while, please try to downgrade to "@types/styled-components@4.0.3" and see if that fixes your issue.

Otherwise, there are some general steps you can take to speed up intellisense:

I know you already tried, but please try again, 90% of the time the issue lies in extensions. Hit Ctrl + Shift + P, enter "Disable all installed extensions", then restart VSC, afterwards you can check the speed and then enable extensions one by one. Also disable ESLint/TSlint.
Go to your VS Code Settings and search for intellisense, there you can select and unselect what intellisense gives you suggestions for, disable what you don't need.
Download VS Code Insiders, some people say intellisense is faster there, haven't tried myself. Link

score 2 · Answer 3 · answered Oct 07 '22 at 22:34

2

Just go to settings, search for and check this box >

TypeScript: Disable Automatic Type Acquisition

answered Oct 07 '22 at 22:34

Jeff Hogg

771
6
4

Luis David Rodriguez Valades · Answer 4 · 2023-01-26T21:28:37.380

2

Hi there in my case was the TypeScript version being used by VisualStudio it started suddenly yesterday, extremely slow, ctr+click or go-to-definition and IntelliSense, it was just impossible to work.

I don't know why but in my team I was the only one with version 4.9.4 maybe it was updated automatically. Then I returned it to the 4.7.4!! you can go to the bottom right corner and click on the ( {} ) next to "TypeScript" symbols, then select a version, and change it back.

as soon as I select it again 4.9.4 it gets extremely slow

Image click on the {} symbols

Image check your versions

edited Jan 26 '23 at 21:28

answered Jan 26 '23 at 21:22

Luis David Rodriguez Valades

21
2

I was breaking my head since last couple of months.. disabling extensions ..enabling one by one..etc etc ...and this is the solution which works for me...version 4.8.3 also works fine...god knows what's the issue with 4.9.4 – darshan kamat Mar 05 '23 at 15:58
Had the same exact issue for a last couple of days - most likely happened after VSCode update and it using 5.0.4, Switching back to 4.9.4 made it lightning fast again. – nesinervink Jun 29 '23 at 09:10

score 0 · Answer 5 · answered Jul 06 '23 at 20:30

After trying so many other solutions for this issue, I discovered that the newest version of styled-componenets was the culprit (v6). I downgraded to v@^5, and this solved my problems. It also solved my custom webpack 5 build from being horrendously slow.

score 0 · Answer 6 · edited Aug 07 '23 at 09:56

I've been facing the same problem and found a solution that worked in my project. I recently noticed an interesting way to find the dependency that causes the problem.

Follow these steps:

First you need to comment on all the imports in one file for testing reasons.
Then reload Visual Studio Code using Ctrl + Shift + P: Developer: Reload Window
Now place yourself on some statement in your code and you will notice that Intellisense is working.
Start uncommenting all your imports line by line, and check the Intellisense status box each time you uncommented an import. You'll notice which dependency was causing the issue performance.

In my case, it was the type UseControllerProps from react-hook-form.

In some cases, other components in your file might cause this issue's performance. You'll notice when the import of a component is the problem, and then you will need to test the component's file to find the issue.

POV: This issue seems to be present when you use TypeScript.

It's rare that you should ever really post the same answer on two different questions. This will typically mean that the questions are duplicates, and one (*typically*, but not always, the later one), should be Flagged as such. — NotTheDr01ds, Aug 06 '23 at 22:33

score 0 · Answer 7 · answered Aug 10 '23 at 11:30

0

A third party package was causing it in my case.

So you might want to check whether it's only occuring in one specific file and if so, which of the import statements is causing this.

answered Aug 10 '23 at 11:30

Sebastian Jung

87
8

VSCode React TS Intellisense way too slow

7 Answers7