Home > Software engineering >  Slow TypeScript autocompletion in VS Code for Zod
Slow TypeScript autocompletion in VS Code for Zod

Time:12-30

I have a simple project set up in TypeScript. I'm using Prisma to connect with the database, express for HTTP server and Zod for validation of the request bodies. I'm also using eslint, which runs on every file save. While typing code, the suggestions take about 2-3 seconds to load, which has become very annoying and it doesn't seem like a normal behavior to me.

For example: it takes usually about ~2 seconds to load the suggestions for an object parsed with Zod schema or load the suggestions for the Prisma Client. I'm not sure if that's strictly the Zod/Prisma issue, although I opened this project in Webstorm and the same issue occured, maybe it was slightly faster but still a significant delay was visible. What I tried with no success:

  • opening the project on a different machine
  • disabling all extensions
  • reinstalling VS Code
  • installing older versions of VS Code
  • using different versions of TypeScript compiler

Example:

Loading autocompletion

Part of the TS Server Log:

...
Info 277  [21:17:19.421] getCompletionData: Get current token: 0.012008000165224075
Info 278  [21:17:19.421] getCompletionData: Is inside comment: 0.028876000083982944
Info 279  [21:17:19.421] getCompletionData: Get previous token: 0.024034999776631594
Info 280  [21:17:19.421] getCompletionsAtPosition: isCompletionListBlocker: 0.131608999799937
Info 281  [21:17:21.381] getCompletionData: Semantic work: 1959.9019869999029
Info 282  [21:17:21.388] getCompletionsAtPosition: getCompletionEntriesFromSymbols: 5.953261999879032
Info 283  [21:17:21.733] IntelliCode plugin: successfully loaded model from /home/xkcm/.vscode/extensions/visualstudioexptteam.vscodeintellicode-1.2.29/dist/bundledModels/javascript_intellisense-members
...

As you can see the getCompletionData action takes about 2 seconds to finish. I'll also attach my configuration for typescript and eslint.

tsconfig.json

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2015",
    "sourceMap": true,
    "outDir": "dist/",
    "experimentalDecorators": true,
    "skipLibCheck": true
  },
  "include": [
    "./src/**/*"
  ]
}

.eslintrc.cjs

module.exports = {
  extends: [
    "airbnb-base",
    "airbnb-typescript/base"
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  root: true,
  ignorePatterns: [
    ".eslintrc.cjs",
    "dist/**/*",
    "node_modules/**/*"
  ],
  parserOptions: {
    project: "./tsconfig.json"
  },
  rules: {
    "@typescript-eslint/quotes": ["error", "double"],
    "curly": ["error", "all"],
    "no-console": ["error", { allow: ["info", "warn", "error"] }],
    "no-use-before-define": ["error", { functions: false, classes: false }],
    "@typescript-eslint/brace-style": ["error", "1tbs", { allowSingleLine: false }],
    "import/prefer-default-export": "off",
    "max-classes-per-file": "off"
  }
};

Also my list of dependencies in the project:

  "dependencies": {
    "@prisma/client": "^4.8.0",
    "chalk": "4.1.2",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "morgan": "^1.10.0",
    "winston": "^3.8.2",
    "zod": "^3.20.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.15",
    "@types/lodash": "^4.14.191",
    "@types/node": "^18.11.17",
    "@types/winston": "^2.4.4",
    "@typescript-eslint/eslint-plugin": "^5.46.1",
    "@typescript-eslint/parser": "^5.46.1",
    "dotenv-cli": "^6.0.0",
    "eslint": "^8.30.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "nodemon": "^2.0.20",
    "prisma": "^4.7.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  }

My environment:

  • VS Code: 1.74.2-1671533413
  • TypeScript: 4.9.4
  • Node: v16.13.1

Is this a normal behavior? Does anyone know why this is happening? It'd be great if I could at least understand why it takes so long. This has become really frustrating, any help is appreciated, thanks in advance!

Edit: I noticed my CPU usage spikes to 100% when autocompletion is loading, could this be a TypeScript issue?

Edit 2: I removed the zod package and the issue seems to be gone, very strange. Related issue in TypeScript repo: https://github.com/microsoft/TypeScript/issues/45824

Edit 3: I discovered that downgrading the zod package to v3.19.1 also fixes the issue. There's an issue opened on their GitHub about performance problems with v3.20.2: https://github.com/colinhacks/zod/issues/1741

CodePudding user response:

[email protected] caused this issue, downgrading to 3.19.1 fixed it.

  • Related