ค้นหาเว็บไซต์

reactjs - ข้อผิดพลาดการตรวจสอบไวยากรณ์ Typescript บน VSCode กับ Yarn v3.2.3

ทุกครั้งที่ฉันตั้งใจจะสร้าง react หรือ next app ด้วย yarn v3.2.3 ตัว VS Code ของฉันจะแสดงข้อผิดพลาดการตรวจสอบโค้ดตามภาพด้านล่าง ส่วนใหญ่ ตัวตรวจสอบจะส่งข้อผิดพลาด ts(2307) หรือที่เรียกว่า ไม่พบโมดูล 'next' หรือคำประกาศชนิดที่สอดคล้องกัน.ts(2307).

คำตอบ #1

ในกรณีที่คุณยังสนใจที่จะใช้ Yarn 3+ ในโปรเจกต์ปัจจุบันหรือโปรเจกต์ในอนาคตของคุณ โปรดทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่า Yarn 3+ อย่างถูกต้องใน VS Code

  1. เปิดโปรเจกต์ Next.js ของคุณโดยใช้ VSCode

  2. ติดตั้งส่วนขยาย ZipFS

  3. เรียกใช้คำสั่งต่อไปนี้

    yarn dlx @yarnpkg/sdks vscode

    ซึ่งจะสร้าง settings.json ภายในโฟลเดอร์ .vscode ของพื้นที่ทำงานของคุณ

  4. ต่อไป เปิดไฟล์ .ts หรือ .tsx ใดก็ได้ในพื้นที่ทำงานของคุณ แล้วกด CTRL + SHIFT + P

  5. พิมพ์ typescipt จนกว่าคุณจะเห็นตัวเลือกบางอย่างที่เกี่ยวข้องกับ TypeScript เลือก TypeScript: Select TypeScript Version...

  6. สุดท้าย เลือก ใช้เวอร์ชันพื้นที่ทำงาน

หากการตั้งค่าทำได้ถูกต้อง คุณจะเห็น settings.json ใน .vscode ซึ่งมีการกำหนดค่าที่เหมือนหรือใกล้เคียงกับที่ Michael เคยตอบไว้ก่อนหน้านี้ สิ่งที่คุณจะสังเกตต่อไปคือไดเรกทอรี sdks ในไดเรกทอรี .yarn ของคุณ ซึ่งมีการกำหนดค่าเซิร์ฟเวอร์ TypeScript ที่สัมพันธ์กับพื้นที่ทำงานของคุณ

สำหรับการอ่านเพิ่มเติม กรุณาไปที่ Yarn Editor SDKs

คำตอบ #2

ฉันพบว่าการมีโฟลเดอร์ .vscode พร้อมไฟล์ที่เรียกว่า settings.json ดังต่อไปนี้ช่วยแก้ปัญหานี้ได้ ฉันได้รับการแจ้งเตือนจาก vscode ที่ถามว่าฉันต้องการให้มันใช้ typescript ของ workspace หรือไม่ และเมื่อฉันเลือกใช่ ข้อผิดพลาดสีแดงทั้งหมดในการลินท์ก็หายไป และฉันสามารถทำงานได้

ฉันคิดว่านี่เกี่ยวกับ workspaces ของ yarn หวังว่านี่จะช่วยได้ :)

{
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
  "typescript.enablePromptUseWorkspaceTsdk": true
}