Visual Studio Code – VS Code Slow autocomplete – intellisense with nextjs project

Why is VSCode autocomplete – Intellisense slow?

I’ve noticed that VSCode is slow with a specific project

Example Image

I’ve tried a lot of things and still slow:

• restart the typescript server
• used yarn, yarn with pnp and npm
• remove and reinstall node_module
• add to setting.json:
  • "typescript.tsserver.log": "off",
  • "typescript.tsserver.experimental.enableProjectDiagnostics": false,
  • "typescript.tsserver.maxTsServerMemory": 4096,
• watch running extensions and remove unnecessary extensions
• reload window
• reload with extensions disabled
• clean cash for npm and yarn
• add .yarnclean file

Note: My device has 16GB Ram, RTX 3050 and Ryzen 7 6800H So there shouldn’t be any problem with vscode

setting.json

{
  // Exclude specific folders from the file explorer
  "files.exclude": {
    "**/node_modules/**": true,
    "**/.git": true,
    "**/.vscode": true,
    "**/build/**": true,
    "**/out/**": true,
    "**/.yarn/**": true
  },

  // Exclude specific folders from file watching to improve performance
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.yarn/**": true
  },

  // Exclude folders and files from search results
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/.yarn": true
  },

  // TypeScript server settings for performance optimization
  "typescript.tsserver.log": "off",
  "typescript.tsserver.experimental.enableProjectDiagnostics": false,
  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.tsdk": ".yarn/sdks/typescript/lib",

  // Terminal environment configuration
  "terminal.integrated.env.windows": {},

  // Editor font and formatting settings
  "editor.fontFamily": "FiraCode Nerd Font Regular, Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,

  // Speed up autocomplete suggestions
  "editor.quickSuggestionsDelay": 1,
  "editor.suggest.preview": true,
  "editor.quickSuggestions": {
    "strings": "on"
  },

  // Enable bracket pair colorization and guides for improved readability
  "editor.guides.bracketPairs": "active",
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,

  // Display whitespace characters and disable sticky scroll
  "editor.renderWhitespace": "all",
  "editor.stickyScroll.enabled": false,

  // Disable the minimap for performance optimization
  "editor.minimap.enabled": false,

  // Enable ESLint fixes on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },

  // Explorer settings for file structure view
  "explorer.compactFolders": false,

  // Workbench tree and color customization
  "workbench.tree.indent": 13,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#ff0000",
    "tree.inactiveIndentGuidesStroke": "#51b8e1"
  },

  // Workbench theme and icon settings
  "workbench.colorTheme": "GitHub Dark Default",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",

  // Console Ninja settings for enhanced console features
  "console-ninja.featureSet": "Community",
  "console-ninja.captureFunctions": true,
  "console-ninja.toolsToEnableSupportAutomaticallyFor": {
    "live-server-extension": true,
    "live-preview-extension": true
  },

  // Peacock extension settings for changing the color of the VS Code window
  "peacock.affectStatusBar": false,
  "peacock.surpriseMeFromFavoritesOnly": true,
  "peacock.surpriseMeOnStartup": true,
  "peacock.favoriteColors": [
    { "name": "Ocean Breeze", "value": "#A1D6B2" },
    { "name": "Slate Gray", "value": "#333333" },
    { "name": "Twilight Blue", "value": "#003d6a" },
    { "name": "Forest Shade", "value": "#8576FF" },
    { "name": "Royal Purple", "value": "#974EC3" },
    { "name": "Starlit Night", "value": "#FEEE91" },
    { "name": "Olive Grove", "value": "#EB3678" },
    { "name": "Copper Glow", "value": "#F87A53" }
  ],

  // Colorize settings to highlight specific colors in the editor
  "colorize.decoration_type": "underline",
  "colorize.exclude": [
    "**/.git",
    "**/.svn",
    "**/.hg",
    "**/CVS",
    "**/.DS_Store",
    "**/node_modules",
    "**/bower_components",
    "**/tmp",
    "**/dist",
    "**/tests"
  ],

  // Spelling configuration for adding custom words
  "cSpell.userWords": [],

  // Trim trailing whitespace settings for cleanliness in saved files
  "trim-trailing-whitespace.excludedLanguages": [
    "markdown",
    "plaintext",
    "django"
  ],
  "trim-trailing-whitespace.trimOnSave": true,
  "trim-trailing-whitespace.ensureSingleTrailingNewline": true,
  "trim-trailing-whitespace.includeEmptyLines": false,

  // Default terminal profile
  "terminal.integrated.defaultProfile.windows": "PowerShell",

  // Set end of line and Prettier configurations for consistent code formatting
  "files.eol": "n",
  "prettier.endOfLine": "auto",
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,

  // Auto-update imports on file move for TypeScript
  "typescript.updateImportsOnFileMove.enabled": "always",

  // Emmet settings for shorthand HTML/CSS in different file types
  "emmet.includeLanguages": {
    "django-html": "html",
    "javascript": "javascriptreact",
    "css": "css"
  },

  // HTML and SCSS specific formatting configurations
  "html.format.templating": true,
  "html.completion.attributeDefaultValue": "singlequotes",
  "scssFormatter.singleQuote": true,

  // Consistent quote style for JavaScript and TypeScript
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",

  // File association for CSS
  "files.associations": {
    "*.css": "css"
  },

  // Formatter configurations for specific file types
  "[dotenv]": { "editor.defaultFormatter": "foxundermoon.shell-format" },
  "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" },
  "[shellscript]": { "editor.defaultFormatter": "foxundermoon.shell-format" },
  "[django-html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[dockerfile]": { "editor.defaultFormatter": "ms-azuretools.vscode-docker" },

  // LeetCode workspace and file path settings
  "leetcode.workspaceFolder": "D:\projects\.leetcode",
  "leetcode.filePath": {
    "javascript": { "folder": "javascript" },
    "default": {
      "folder": "",
      "filename": "${id}.${kebab-case-name}.${ext}"
    }
  },

  // CMake options for status bar visibility and pinned commands
  "cmake.options.statusBarVisibility": "visible",
  "cmake.pinnedCommands": [
    "workbench.action.tasks.configureTaskRunner",
    "workbench.action.tasks.runTask"
  ],

  // Set workspace trust configuration for untrusted files
  "security.workspace.trust.untrustedFiles": "open"
}

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.5",
    "@mui/material": "^6.1.5",
    "@next/codemod": "^15.0.2-canary.7",
    "@reduxjs/toolkit": "^2.3.0",
    "dotenv": "^16.4.5",
    "formik": "^2.4.6",
    "gsap": "^3.12.5",
    "latest": "^0.2.0",
    "next": "^15.0.1",
    "next-auth": "^4.24.8",
    "next-intl": "^3.23.5",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.3.0",
    "react-redux": "^9.1.2",
    "swiper": "^11.1.14",
    "upgrade": "^1.1.0",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.15",
    "postcss": "^8",
    "sass": "^1.80.4",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.6.3"
  },
  "packageManager": "[email protected]"
}

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "skipDefaultLibCheck": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": [
    "node_modules",
    ".yarn"
  ]
}

extensions I use:

aaron-bond.better-comments
andrewmcodes.tailwindcss-extension-pack
andys8.jest-snippets
arcanis.vscode-zipfs
austenc.tailwind-docs
batisteo.vscode-django
beatzoid.http-status-codes
bengreenier.vscode-node-readme
bibhasdn.django-html
bradlc.vscode-tailwindcss
cardinal90.multi-cursor-case-preserve
chris-noring.node-snippets
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
csholmq.excel-to-markdown-table
csstools.postcss
dbaeumer.vscode-eslint
digitalbrainstem.javascript-ejs-support
donjayamanne.githistory
donjayamanne.python-environment-manager
donjayamanne.python-extension-pack
dsznajder.es7-react-js-snippets
eamodio.gitlens
ecmel.vscode-html-css
emmanuelbeziat.vscode-great-icons
equinusocio.vsc-material-theme-icons
esbenp.prettier-vscode
ethansk.restore-terminals
fallenmax.mithril-emmet
firsttris.vscode-jest-runner
formulahendry.auto-close-tag
formulahendry.auto-complete-tag
formulahendry.auto-rename-tag
formulahendry.code-runner
formulahendry.docker-explorer
formulahendry.docker-extension-pack
foxundermoon.shell-format
github.github-vscode-theme
github.vscode-github-actions
github.vscode-pull-request-github
gruntfuggly.todo-tree
jasonnutter.search-node-modules
jawandarajbir.react-vscode-extension-pack
johnpapa.vscode-peacock
jprestidge.theme-material-theme
kevinkyang.auto-comment-blocks
kevinrose.vsc-python-indent
kisstkondoros.vscode-gutter-preview
leetcode.vscode-leetcode
lokalise.i18n-ally
macieklad.tailwind-sass-syntax
mads-hartmann.bash-ide-vscode
mccarter.start-git-bash
mgmcdermott.vscode-language-babel
mhutchie.git-graph
mikestead.dotenv
ms-azuretools.vscode-docker
ms-python.debugpy
ms-python.python
ms-python.vscode-pylance
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-wsl
ms-vscode.powershell
ms-vscode.vscode-typescript-next
naumovs.color-highlight
njpwerner.autodocstring
oderwat.indent-rainbow
orta.vscode-jest
pkief.material-icon-theme
pranaygp.vscode-css-peek
ritwickdey.liveserver
roerohan.mongo-snippets-for-node-js
shakram02.bash-beautify
sibiraj-s.vscode-scss-formatter
softwaredotcom.swdc-vscode
steoates.autoimport
streetsidesoftware.code-spell-checker
syler.sass-indented
tabnine.tabnine-vscode
usernamehw.errorlens
visualstudioexptteam.intellicode-api-usage-examples
visualstudioexptteam.vscodeintellicode
vscode-icons-team.vscode-icons
wallabyjs.console-ninja
wayou.vscode-todo-highlight
wholroyd.jinja
xabikos.javascriptsnippets
xabikos.reactsnippets
yzane.markdown-pdf
yzhang.markdown-all-in-one
zignd.html-css-class-completion
zitup.classnametocss