使用TypeScript 5的Vite项目中VSCode JS/TS语言服务崩溃问题

问题场景 #

通过yarn create vite my-app创建React + TypeScript + SWC模板项目，配置ESLint（Airbnb规则）和Prettier后，重启VSCode弹出错误：

The JS/TS language service immediately crashed 5 times. The service will not be restarted.

VSCode版本为1.89.1（最新版），降级TypeScript至4.x后IntelliSense恢复正常，但需保留TypeScript 5.x以使用moduleResolution: "bundler"特性。

项目配置 #

package.json

{
  "name": "vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.1.5",
    "vite": "^5.2.0"
  },
  "packageManager": "yarn@4.2.2"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier'
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname
  },
  plugins: [
    'react-refresh',
    '@typescript-eslint',
    'import',
    'jsx-a11y',
    'react',
    'react-hooks'
  ],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true }
    ],
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': 'off',
    'arrow-body-style': 'off',
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never'
      }
    ]
  }
};

解决步骤 #

1. 升级ESLint相关依赖 #

eslint-config-airbnb-typescript@18.0.0对TypeScript 5.x的支持存在兼容性问题，升级至最新版本：

yarn add eslint-config-airbnb-typescript@latest --dev

同时确保TypeScript ESLint插件与TS版本匹配，升级到最新版：

yarn add @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --dev

2. 强制VSCode使用项目本地TypeScript版本 #

VSCode默认可能使用内置TS版本，与项目TS 5.x冲突：

• 点击VSCode右下角的TS版本号，选择Use Workspace Version
• 若无效，在VSCode设置（settings.json）中添加：

  "typescript.tsdk": "./node_modules/typescript/lib"
  

3. 调整tsconfig.json配置 #

补充allowSyntheticDefaultImports配置，确保模块解析规则兼容：
修改tsconfig.json的compilerOptions：

"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"module": "ESNext"

4. 清理TS服务缓存并重启 #

• 打开VSCode命令面板（Ctrl+Shift+P），执行TypeScript: Restart TS Server
• 若仍崩溃，删除VSCode缓存目录：
  • Windows: %APPDATA%\Code\CachedData
  • macOS: ~/Library/Application Support/Code/CachedData
  • Linux: ~/.config/Code/CachedData

5. 排查ESLint规则冲突 #

临时注释.eslintrc.cjs中的airbnb-typescript扩展，重启VSCode测试是否恢复。若正常，逐步启用规则排查冲突项，重点检查import相关规则。

验证 #

完成操作后重启VSCode，执行TypeScript: Go to Project Configuration确认使用项目配置，检查IntelliSense功能是否正常，语言服务是否不再崩溃。

内容的提问来源于stack exchange，提问作者Rachel