VLS on save gets stuck

[paulbraam]

Type: Performance Issue

Saving .vue files using Vue Language Server and eslint on VSCode gets stuck and causes CPU overloads up to 100%.

What I've tried so far to investigate this issue:

• Create a minimal eslint config and disabling most eslint plugins - it's making things better for just a few minutes
• Moved project to another machine - it happens there as well
• Add "vue.codeActions.enabled": false - VLS seems to be overloaded even with vue code actions disabled
• Using Volar takeover mode - not helping either
• Downgrading Eslint and Vue Languages Features extensions

I need to mention that this issue may be related to this file: https://github.com/paulbraam/sport-diary/blob/10-trainings/pages/index/trainings/new/components/TrainingForm/TrainingForm.vue

Here is the screencast: https://www.youtube.com/watch?v=A0gLDDmcqqE

Extension versions:

• Eslint - v2.4.2
• Vue Language Features (Volar) - v1.8.27

eslint config

/** @type {import("eslint").Linter.Config} */
const config = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: true,
    tsconfigRootDir: __dirname,
    extraFileExtensions: ['.vue']
  },
  extends: [
    'plugin:vue/vue3-recommended',
    '@nuxtjs/eslint-config-typescript'
  ]
};

module.exports = config;

package.json

{
  "name": "sport-diary",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "ionic:build": "npm run generate"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/ionic": "^0.12.1",
    "@types/jwt-decode": "^3.1.0",
    "@types/node": "^20.10.5",
    "@vue/cli-service": "5.0.8",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jest": "^27.6.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.1.2",
    "eslint-plugin-vue": "^9.19.2",
    "nuxt": "^3.8.2",
    "postcss": "^8.4.32",
    "prisma": "^5.7.0",
    "tailwindcss": "^3.3.6",
    "vue": "link:@types/ionic/vue",
    "vue-eslint-parser": "^9.3.2",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@capacitor/android": "5.6.0",
    "@capacitor/app": "5.0.6",
    "@capacitor/cli": "^5.6.0",
    "@capacitor/core": "^5.6.0",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/ios": "5.6.0",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@codetrix-studio/capacitor-google-auth": "^3.3.6",
    "@ionic/vue": "^7.6.1",
    "@pinia/nuxt": "^0.5.1",
    "@prisma/client": "^5.7.0",
    "@vee-validate/nuxt": "^4.12.4",
    "@vee-validate/zod": "^4.12.4",
    "dayjs": "^1.11.10",
    "dotenv": "^16.3.1",
    "ionic": "^5.4.16",
    "jwt-decode": "^4.0.0",
    "pinia": "^2.1.7",
    "vee-validate": "^4.12.4",
    "zod": "^3.22.4"
  },
  "lint": "eslint --ext .ts,.js,.vue ."
}

Related issues: #3837, #3792, #3801, #2334, #3326, #2740, #3601

[paulbraam]

The problem is related to a type recursion.