11

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:

image

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.

Improve this question

10 Answers 10

Reset to default
15

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

VSCode'siIntellisense was very slow when I use React's useContext. Setting allowJS to false also fixed the issue.
5

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

TypeScript: Disable Automatic Type Acquisition

Improve this answer

Comments

3

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

Improve this answer

2 Comments

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
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.
2

Probably your issue:

Styled Components types have been known to mess with intellisense for a while, please try to downgrade to "@types/[email protected]" 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

Improve this answer

Comments

1

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.

Improve this answer

1 Comment

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.
0

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.

Improve this answer

Comments

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.

Improve this answer

Comments

0

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.

Improve this answer

2 Comments

Only the ~/Desktop and ~/Documents directories are synced on iCloud, please refrain from putting any code/repository in either of these two directories.
Append .nosync to a folder name to disable iCloud sync for that folder and make it local only.
0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.