reactjs - vite react typescript - tsconfig moduleResolution باعث میشود IntelliSense در VSCode برای همیشه در حال بارگذاری باشد

من تازه وارد دنیای جاوااسکریپت هستم. لطفاً راه درست را به من بگویید و بفرمایید کجا اشتباه کردهام. خیلی ممنون!

پروژه من از Vite^4.3.2، React^18.2.0 و Typescript^5.0.4 استفاده میکند. من باید از یک کتابخانه مخصوص کامپوننتهای خارجی React با pnpm v7.14.0 و node v16.20.0 استفاده کنم (مشخصات پروژه این را میطلبد).

مشکل: TypeScript و VSCode IntelliSense نمیcتوانند انواع props مولفهcها را از آن کتابخانه شناسایی کنند: آنها همیشه any را نشان میcدهند، بنابراین من نمیcدانم که مؤلفه چه ویژگیcهایی دارد یا هر کدام از آنها چه نوع هستند. IntelliSense با کتابخانه های دیگری مانند formik، dayjs، react-router-dom مطابق انتظار کار می کند و انواع را به درستی نمایش می دهد.

هیچ خطای ESlint وجود ندارد. من pnpm dev را بررسی کردم یا تولید ساخته و سپس پیشنمایش کردم، عملکرد برنامه من در هر دو محیط درست کار میکند.

فایل tsconfig.json من اساساً همانند پیشفرضی است که توسط Vite ایجاد شده است:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["./src"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

vite.config.ts

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react-swc';
// import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
  server: {
    open: true,
  },
  build: {
    commonjsOptions: {
      ignoreTryCatch: false,
    },
  },
});

من هیچ ایدهای ندارم که چگونه میتوانیم Intellisense را طوری تنظیم کنیم که خصوصیات کامپوننتها را مانند این شناسایی کند: توضیح تصویر را وارد کنید

پس من سعی کردم moduleResolution را به node تغییر دهم و "allowSyntheticDefaultImports": true را به tsconfig.json اضافه کنم و سپس vscode را ریاستارت کنم. اما intellisense در vscode فقط روی این پروژه برای همیشه در حال بارگذاری است.

نسخه Typescript فضای کاری من و VSCode یکسان است 5.0.4

اطلاعات اضافی:

محیط: ویندوز ۱۱ - 22H2، nodejs نسخه 16.20.0، pnpm نسخه 7.14.0، VSCode نسخه 1.78.2 (نصب کاربری)، .

این از مؤلفه node_modules کتابخانه خارجی اعلام شده است

آن @stitches... قبلاً در node_modules/.pnpm است

پاسخ شماره ۱

بررسی کنید که آیا از نسخه قدیمی VSCode استفاده میکنید، VSCode خود را بهروزرسانی کنید و خطا از بین خواهد رفت.