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.

Answer 1

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.

This really sped up IntelliSense.

Answer 2

My culprit for slow/janky auto complete suggestions was an installed vscode extension called React-Icons Snippets (extension id justinmahar.react-icons-snippets). The extension has been deprecated in January 2023 already. After uninstalling it, my auto completion was instant and responsive again.

Answer 3

I had the same issue, with a larger material ui / MUI project. My issue was basically missing tree-shaking, as the target in the tsconfig file was set to ES5. Switched the target to ES6, and now everything runs way faster & intellisense is working correctly.

please note that you will have to check yourself if increasing the target has any drawbacks on your projects browser matrix.

Also, this post showed me how to analyze issues / hot spots in my ts code.

Answer 4

For Mac Users:

You may want to delete your node_modules folder and rebuild (npm install) to recreate the node_modules folder.

On Macs, if you have iCloud optimization enabled, it may copy your node_modules folder to the cloud and then remove it from you (local) Mac to optimize space.

Not only is that going to be an issue with running your code locally, but without the node_module files available locally, my version of VSCode tried to load Intellisense infinitely.

Answer 5

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.

Answer 6

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:

1. First you need to comment on all the imports in one file for testing reasons.
2. Then reload Visual Studio Code using Ctrl + Shift + P: Developer: Reload Window
3. Now place yourself on some statement in your code and you will notice that Intellisense is working.
4. 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.

Answer 7

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.

Answer 8

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

Answer 9

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

TypeScript: Disable Automatic Type Acquisition

Answer 10

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