Type checking/VS Code slow when using MUI
Problem
TypeScript Version: 3.8.0-dev.20191029 Search Terms: mui, material-ui, typescript, slow Example Project https://github.com/jdoklovic/mui-slowness Expected behavior: Make a bad change to something in src/react/pages/Main.tsx autocomplete seems to be speedy, and error reporting should be too. Actual behavior: Takes forever to see errors Related Issues: #32085, #32229, #31817, #30908 Not exactly sure what's going on, but the error reporting in VS Code is super slow. I've made sure I'm using specific named imports, and I've even forked MUI and mad all of the internal code so the same and removed things like import from '..' but it didn't seem to help. Here's the output from tsserver logs which doesn't seem to contain anything that jumps out at me. Also note, I'm using typescript-eslint with the VS Code ESLint extension, not tslint, but eslint seems to be pretty fast. mui-slowness-tsserver.log
Error Output
error reporting should be too.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Optimize TypeScript Configuration for MUI Performance
The slow error reporting and autocomplete in VS Code when using MUI with TypeScript 3.8.0-dev.20191029 is likely due to the TypeScript server's performance issues with large type definitions and complex imports. This can be exacerbated by the configuration settings in tsconfig.json that may not be optimized for large projects or libraries like MUI.
Awaiting Verification
Be the first to verify this fix
- 1
Update TypeScript Version
Upgrade TypeScript to a stable version that is known to have performance improvements. The latest stable version can be installed using npm.
bashnpm install typescript@latest - 2
Adjust tsconfig.json Settings
Modify the tsconfig.json file to include 'skipLibCheck' and 'noEmitOnError' options. This can help reduce the load on the TypeScript server by skipping type checking of declaration files.
json{ "compilerOptions": { "skipLibCheck": true, "noEmitOnError": true, // other existing options } } - 3
Enable Incremental Compilation
Add 'incremental' to the tsconfig.json to enable incremental compilation, which can speed up the TypeScript server's performance by only recompiling changed files.
json{ "compilerOptions": { "incremental": true, // other existing options } } - 4
Optimize ESLint Configuration
Ensure that ESLint is configured to run in a way that does not block TypeScript error reporting. You can do this by adjusting the settings in .eslintrc.js to avoid overlapping checks with TypeScript.
javascript{ "parser": "@typescript-eslint/parser", "extends": ["plugin:@typescript-eslint/recommended"], "rules": { // your rules } } - 5
Monitor tsserver Performance
Use the VS Code command palette to open the TypeScript server logs and monitor performance. This can help identify if the changes made have improved the speed of error reporting.
plaintextOpen Command Palette -> TypeScript: Open TS Server Log
Validation
To confirm the fix worked, make a bad change in src/react/pages/Main.tsx and check if the error reporting and autocomplete are significantly faster. Additionally, monitor the tsserver logs for performance improvements.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep