كيفية تفعيل Auto import في vscode لمكونات React

ما تقصده يسمى Auto import وذلك متاح بالفعل في vscode، تأكد من أنه مُفعل بالضغط على File بالأعلى ثم اختر preferences ثم Settings وابحث عن التالي في شريط البحث:

javascript.suggest.autoImports

تأكد من أنّ تلك الميزة مُفعلة وبجانبها علامة صح.

في حال ما زلت تواجه مشكلة، فقم بتحديد وسم البداية للمكون وليس النهاية، واضغط على CTRL + زر المسافة في لوحة المفاتيح وسيظهر لك إقتراح باستيراده اضغط عليه كالتالي:

لاحظ قمت بتحديد كلمة Register فقط في البداية وليس النهاية.

ليس الوسوم بل استيراد العناصر مثلا عند اضافة عنصر About في ملف وليكن Home هكذا

<About />

اريد عرض import الخاص به بشكل تلقائي 

import About from './Components/About/About.jsx';

يعني اول ما اضيف عنصر معين في صفحة معينة يظهر الاستيراد بشكل تلقائي دةن الحاجة لكتابته يدوي

ذلك ما قصدته،  في حال لا يظهر لك اسم المكون عند كتابته وبالضغط عليه يتم الاستيراد تلقائيًا، قم بإنشاء ملف باسم jsconfig.json في مجلد المشروع الرئيسي وضع به التالي:

{
  "exclude": ["node_modules"]
}

لاحظ عليك الضغط على اسم المكون ليتم استيراده عندما يظهر في الإقتراحات: