typescriptvisual-studio-codeeslinttypescript-eslint
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:
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.
Solution
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.