Question 136492 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – VSCode React TS Intellisense way too slow

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.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
  3. 0

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

    TypeScript: Disable Automatic Type Acquisition

    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search