Slow code completion when using material ui

[li1234yun]

When I use VSCode to write Python/Go language, the completion is fine. When I use it to write nextjs application, it's completion is slow, maybe I miss some plugins. I hope to improve the ts-language-server preformance, maybe only my problem.

Webstorm completion is very fine, maybe can refer it.

Thank you for excellent editor!

VSCode Version Info

Version: 1.64.0
Commit: 5554b12acf27056905806867f251c859323ff7e9
Date: 2022-02-03T04:20:17.224Z (2 days ago)
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 19.6.0

VSCode Plugin Info

alefragnani.Bookmarks
anweber.vscode-httpyac
bierner.markdown-mermaid
bierner.markdown-preview-github-styles
bradlc.vscode-tailwindcss
cweijan.vscode-database-client2
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
Dunn.redis
eamodio.gitlens
esbenp.prettier-vscode
GitHub.copilot
golang.go
GraphQL.vscode-graphql
Gruntfuggly.todo-tree
jock.svg
johnsoncodehk.volar
LeetCode.vscode-leetcode
mathematic.vscode-pdf
mongodb.mongodb-vscode
ms-azuretools.vscode-dapr
ms-azuretools.vscode-docker
ms-kubernetes-tools.vscode-kubernetes-tools
ms-python.python
ms-python.vscode-pylance
ms-toolsai.jupyter
ms-toolsai.jupyter-keymap
ms-toolsai.jupyter-renderers
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-wsl
ms-vscode-remote.vscode-remote-extensionpack
msjsdiag.vscode-react-native
redhat.vscode-yaml
streetsidesoftware.code-spell-checker
tamasfe.even-better-toml
tsandall.opa
usernamehw.errorlens
VisualStudioExptTeam.intellicode-api-usage-examples
VisualStudioExptTeam.vscodeintellicode
vscode-icons-team.vscode-icons
vscodevim.vim
yzhang.markdown-all-in-one
zxh404.vscode-proto3

[IllusionMH]

/needsMoreInfo

Is it reproducible with all extensions disabled?
You can try this with F1 and >Developer: Reload Window With Extensions Disabled

Also you should provide more info about project even better link to repo if it's public.
If you use some CSS-in-JS libs that has extensive types that might also cause slowdowns.

[li1234yun]

Hello! @IllusionMH

Sorry for that I can not provide the code repo.
First, I disabled all my plugins except remote ssh plugin, then I record my screen for example. It maybe useful for you.

example.mp4

[li1234yun]

This is my project package.json file, maybe useful for reproduce.

{
  "name": "nav",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.0",
    "@mui/lab": "^5.0.0-alpha.58",
    "@mui/material": "^5.2.2",
    "@mui/styled-engine-sc": "^5.1.0",
    "axios": "^0.25.0",
    "clsx": "^1.1.1",
    "date-fns": "^2.27.0",
    "mdi-material-ui": "^7.1.0",
    "nanoid": "^3.1.30",
    "next": "^12.0.7",
    "notistack": "^2.0.3",
    "qiniu-js": "^3.4.0",
    "qs": "^6.10.2",
    "react": "latest",
    "react-dom": "latest",
    "react-hook-form": "^7.20.5",
    "recoil": "^0.6.1",
    "styled-components": "latest"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.178",
    "@types/node": "^17.0.14",
    "@types/qiniu-js": "^3.0.0",
    "@types/qs": "^6.9.7",
    "@types/react": "17.0.39",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "autoprefixer": "^10.4.0",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.10",
    "eslint-config-prettier": "^8.3.0",
    "husky": "^7.0.1",
    "postcss": "^8.4.6",
    "prettier": "^2.5.0",
    "sass": "^1.49.7",
    "tailwindcss": "^3.0.1",
    "typescript": "^4.5.2"
  }
}

[mjbvz]

Please provide a minimal GitHub repo we can use to test this and steps (as text) to reproduce the issue

Also, does this reproduce in the latest VS Code insiders build with all extensions disabled?

[li1234yun]

Hello, @mjbvz

I use the latest stable vscode (1.64) and disabled all my plugins except remote ssh plugin.

I created a sample repo for test: https://github.com/li1234yun/sample-react-nextjs.git

When I use the new repo, I find code completion is faster than my own repo. Maybe the repo is small, you can try it when you have free time.

Try:

• Add new components from @mui/material
• Watch @mui/material components attrs code completion speed
• Auto import speed

Home page file path: pages/index.tsx

Thank you!

[lallenfrancisl]

I am also facing this issue and let me drop in some findings. So this is actually a known issue of the typescript language server see ts issue microsoft/vscode#34801 and material ui issue microsoft/vscode#19113. So I guess there is only so much that could be improved.

However, when I try the same repo that I am having issue in Lunarvim which uses https://github.com/typescript-language-server/typescript-language-server its not this much slow. In vscode using material ui in a project that reasonably sized (10 - 20 components) is almost unusable. Suggestions take more than 10 seconds sometimes and linting too. My machine is a M1 macbook pro which is not in anyways a slow machine

[mjbvz]

Thanks for the additional info. This seems like a duplicate of:

• Slow Performance with Type Inference on JSX Element #43717
• [Build Performance] Updating types in a composite package causes a larger than necessary project tree rebuild #47793
• Can the typings be simplified to improve performance? mui/material-ui#19113

Moving upstream so the TS team is aware of the problem

[RyanCavanaugh]

Duplicate #34801

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.