# كتابة كود جديد (/ar/docs/verdent-for-vscode/task-based-guides/writing-code)

> دليل استخدام Verdent لكتابة ميزات ومكونات ووظائف جديدة



يساعدك Verdent for VS Code على كتابة كود جديد من خلال طلبات باللغة الطبيعية، دون الحاجة إلى أي صياغة خاصة. صف ما تريد بناءه، ويقوم Verdent بإنشاء تطبيقات جاهزة للإنتاج عبر ملفات متعددة مع الحفاظ على أنماط مشروعك واصطلاحاته.

### ما ستتعلمه [#ما-ستتعلمه]

* طلب ميزات جديدة باستخدام prompts باللغة الطبيعية
* توليد كود عبر ملفات متعددة مع تبعيات صحيحة
* العمل مع لغات برمجة وأطر عمل متنوعة
* بناء هياكل مشاريع كاملة
* تحسين الكود المُولَّد من خلال التنقيح الحواري

### المتطلبات الأساسية [#المتطلبات-الأساسية]

قبل كتابة الكود باستخدام Verdent:

* Visual Studio Code مع تثبيت امتداد Verdent
* خطة اشتراك Verdent نشطة مع أرصدة متاحة
* مساحة عمل مشروع مفتوحة في VS Code (أو دليل فارغ لبناء الهيكل)

***

## طلب ميزات جديدة [#طلب-ميزات-جديدة]

يفهم Verdent طلبات الميزات باللغة الطبيعية دون الحاجة إلى أوامر أو صياغة خاصة. ببساطة صف ما تحتاجه في مربع الإدخال.

**طلبات ميزات أساسية:**

ابدأ بأوصاف مباشرة لما تحتاجه:

```
Create a UserProfile component that shows the user's avatar image, name as a heading, and email below it. Make the avatar circular.
```

```
Add a login form with email and password fields to the authentication page
```

```
Build a notification system that displays toast messages for success and error events
```

يقوم Verdent بتحليل طلبك، وفحص هيكل مشروعك، وتوليد كود يتطابق مع أنماطك الحالية، بما في ذلك تنظيم الملفات، واصطلاحات التسمية، وأنماط الاستيراد، وممارسات الترميز.

**طلبات تنفيذ مفصّلة:**

للحصول على تحكم أكبر، حدد المتطلبات التقنية بشكل صريح:

```
Add a dark mode toggle to the settings page using React Context API. Store the theme preference in localStorage and apply CSS variables for light and dark themes across all components.
```

```
Create a POST /api/users/register endpoint that validates email format, password strength (min 8 chars, uppercase, number, special char), and checks for duplicate emails before creating the user in the database.
```

```
Implement pagination for the blog posts list with 10 posts per page. Add Previous/Next buttons and page number indicators. Update the URL query params (?page=2) and fetch data from /api/posts?page=X&limit=10.
```

كلما قدمت سياقًا أكبر، كان التنفيذ أكثر توافقًا مع توقعاتك.

<Tabs>
  <Tab title="طلبات بسيطة">
    استخدم أوصافًا موجزة للميزات المباشرة:

    ```
    Add a search bar to the navigation
    ```

    ```
    Create a footer component with copyright and links
    ```

    يتخذ Verdent خيارات تنفيذ معقولة بناءً على أنماط الكود الحالية في مشروعك.
  </Tab>

  <Tab title="طلبات معقّدة مع Plan Mode">
    للميزات متعددة الملفات أو القرارات المعمارية، استخدم **Plan Mode** لمراجعة الأسلوب قبل التنفيذ:

    **الخطوة 1:** انتقل إلى Plan Mode باستخدام زر "Switch Mode"

    **الخطوة 2:** أرسل طلب الميزة الخاص بك:

    ```
    Add a search feature to the product catalog with filtering by category and price range
    ```

    **الخطوة 3:** ينشئ Verdent خطة مفصلة توضح:

    * الملفات الجديدة التي سيتم إنشاؤها (مكونات البحث، واجهة التصفية، نقاط نهاية API)
    * الملفات الحالية التي سيتم تعديلها (صفحة كتالوج المنتجات، التوجيه، إدارة الحالة)
    * التبعيات التي سيتم إضافتها (إن وُجدت)
    * خطوات التنفيذ بترتيب منطقي

    **الخطوة 4:** قد يطرح Verdent أسئلة توضيحية:

    * هل يجب أن يكون البحث فوريًا أم عبر زر؟
    * كيفية التعامل مع النتائج الفارغة؟
    * أي خيارات فرز يجب تضمينها؟

    **الخطوة 5:** راجع الخطة واختر إجراءك التالي:

    * اختر **Edit** لتنقيح الخطة أكثر
    * اختر **Start Building** لبدء التنفيذ

    يضمن هذا الأسلوب التوافق بين توقعاتك وتنفيذ Verdent قبل إجراء أي تغييرات.
  </Tab>
</Tabs>

<Tip>
  استخدم Plan Mode عندما تؤثر الميزات على ملفات متعددة أو تتطلب قرارات معمارية. يمكنك إجراء عدة جولات من مراجعة الخطة لتحسين الأسلوب قبل التنفيذ.
</Tip>

***

## إضافة سياق باستخدام إشارات @-mentions [#إضافة-سياق-باستخدام-إشارات--mentions]

أشر إلى ملفات أو مكونات محددة عندما تريد إضافات ميزات مستهدفة:

```
@auth.js Add password reset functionality to this authentication module
```

```
@components/Dashboard.js Add a statistics widget showing user activity for the past 30 days
```

يخبر رمز `@` متبوعًا بمسار ملف Verdent بالتركيز على كود محدد عند تنفيذ طلبك. هذا يضمن اندماج الميزات الجديدة بسلاسة مع التطبيقات الحالية.

***

## دعم اللغات وأطر العمل [#دعم-اللغات-وأطر-العمل]

يعمل Verdent مع أي لغة برمجة تقريبًا، ويفهم دلالات الكود، وأنماط الصياغة، وأطر العمل الشائعة عبر جميع الأنظمة البيئية الرئيسية دون الحاجة إلى إضافات خاصة باللغة.

<Tabs>
  <Tab title="دعم استثنائي">
    لغات ذات نتائج متميزة وفهم عميق لأطر العمل:

    * **JavaScript و TypeScript** - React وVue وAngular وNode.js وNext.js وأنماط async/await الحديثة وتحليل المكونات
    * **Python** - Django وFlask وFastAPI وPandas وNumPy ودفاتر Jupyter والخدمات الخلفية وتحليل البيانات
    * **Java/Kotlin** - Spring Boot وHibernate ونظام Maven/Gradle البيئي والتطوير المؤسسي

    <CodeGroup>
      ```jsx "React Component"
      function UserProfile({ user }) {
        return (
          <div className="profile">
            <h1>{user.name}</h1>
            <p>{user.email}</p>
          </div>
        );
      }
      ```

      ```vue "Vue Component"
      <template>
        <div class="profile">
          <h1>{{ user.name }}</h1>
          <p>{{ user.email }}</p>
        </div>
      </template>

      <script setup>
      defineProps(['user']);
      </script>
      ```

      ```tsx "Angular Component"
      @Component({
        selector: 'user-profile',
        template: `
          <div class="profile">
            <h1>{{ user.name }}</h1>
            <p>{{ user.email }}</p>
          </div>
        `
      })
      export class UserProfileComponent {
        @Input() user!: User;
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="دعم قوي">
    لغات إضافية مع معرفة شاملة بأطر العمل:

    * **C++** - إدارة الذاكرة، وتحسين الأداء، والبرمجة على مستوى النظام
    * **Rust** - أنماط أمان الذاكرة، ومفاهيم الملكية، ونظام cargo البيئي
    * **Go** - أنماط التزامن، والخدمات المصغرة، وأدوات سطر الأوامر
    * **C#** - نظام .NET البيئي، وأنماط LINQ، والبرمجة غير المتزامنة
    * **Ruby** - تطبيقات Rails، والبرمجة النصية
    * **PHP** - Laravel وWordPress وتطبيقات الويب
    * **Swift/Objective-C** - تطوير iOS/macOS
  </Tab>
</Tabs>

يدعم Verdent أيضًا البرمجة النصية للـ Shell (Bash وZsh)، وSQL، وHTML/CSS، وMarkdown، وYAML، وJSON، ولغات التهيئة.

#### فهم أطر العمل [#فهم-أطر-العمل]

بالإضافة إلى اللغات، يتعرف Verdent على أنماط خاصة بأطر العمل:

| الفئة                | أطر العمل والأنماط                                                                                                   |
| -------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **الواجهة الأمامية** | React hooks، وRedux، وContext API، وVue Composition API، وحقن التبعيات في Angular، ومكونات Next.js من جانب الخادم    |
| **الواجهة الخلفية**  | وسيط Express، وORM في Django، وخدمات Spring Boot المصغرة، ونقاط نهاية FastAPI غير المتزامنة، وActive Record في Rails |
| **الاختبار**         | Jest وPytest وJUnit وMocha/Chai وCypress وReact Testing Library                                                      |
| **قاعدة البيانات**   | Prisma وTypeORM وSequelize وSQLAlchemy وHibernate وMongoose                                                          |

<Note>
  يتكيّف Verdent مع مجموعة تقنياتك بدلًا من فرض لغات أو أطر عمل محددة. قواعد الكود جيدة التنظيم مع فصل واضح للاهتمامات تنتج نتائج أفضل بغض النظر عن لغة البرمجة.
</Note>

**تحسين النتائج للغات الأقل شيوعًا:**

بالنسبة لأطر العمل المتخصصة أو اللغات الأقل شيوعًا، حسّن النتائج من خلال:

* تقديم أمثلة كود توضح الأنماط التي تريد اتباعها
* تضمين مقتطفات من قاعدة الكود الحالية باستخدام إشارات @-mentions
* استخدام خوادم MCP (Model Context Protocol) لحقن سياق خاص باللغة

***

## توليد كود عبر ملفات متعددة [#توليد-كود-عبر-ملفات-متعددة]

ينشئ Verdent ملفات متعددة منسّقة في طلب واحد، ويتعامل مع الاستيرادات والتبعيات والمراجع بين الملفات تلقائيًا.

**مثال:**

```
Create a UserDashboard component with a separate hooks file for data fetching, a styles file, a types file for TypeScript interfaces, and a test file
```

يُولّد Verdent:

* `components/UserDashboard/UserDashboard.tsx` - المكون الرئيسي
* `components/UserDashboard/useUserData.ts` - hook مخصص
* `components/UserDashboard/UserDashboard.module.css` - الأنماط
* `components/UserDashboard/types.ts` - واجهات TypeScript
* `components/UserDashboard/UserDashboard.test.tsx` - الاختبارات

تتضمن جميع الملفات استيرادات وروابط صحيحة فيما بينها.

**التوليد المتوازي مقابل المتسلسل:**

بالنسبة إلى **الملفات ذات الارتباط الفضفاض** (المكونات المستقلة، والوحدات المنفصلة، وملفات الاختبار المتوازية)، يمكن لـ Verdent استخدام وكلاء فرعيين لكتابة ملفات متعددة بالتوازي، مما يحسّن السرعة والكفاءة.

بالنسبة إلى **الملفات ذات الترابط الوثيق** التي تحتوي على تبعيات متبادلة (ملفات تستورد من بعضها البعض، وأنواع مشتركة، ومكونات معتمدة)، يكتب Verdent بشكل متسلسل لضمان إدارة صحيحة للتبعيات واستيرادات دقيقة.

<Tip>
  بالنسبة للميزات متعددة الملفات، يُولّد Verdent الملفات بالتوازي ويحافظ على الاتساق عبر جميع التغييرات ذات الصلة تلقائيًا.
</Tip>

***

## توليد الكود النمطي والهياكل الأساسية [#توليد-الكود-النمطي-والهياكل-الأساسية]

#### توليد الكود النمطي (Boilerplate) [#توليد-الكود-النمطي-boilerplate]

يُولّد Verdent الكود النمطي من خلال فهم الأنماط الحالية في مشروعك وإنشاء كود جديد يتبع نفس الأسلوب والهيكل:

```
Create a new ProductCard component with props for title, price, and image
```

```
Write an Express route handler for user registration with validation
```

```
Generate unit tests for the authentication service using Jest
```

يحلل Verdent قاعدة الكود الخاصة بك لمطابقة الاصطلاحات (أنماط التسمية، وأنماط الاستيراد، وهيكل المجلدات) ويُولّد كودًا نمطيًا يندمج بسلاسة بدلًا من استخدام قوالب عامة.

<Tip>
  استخدم Plan Mode لمراجعة الكود النمطي المرشّح قبل توليده. يمكن لـ Verdent طرح أسئلة توضيحية حول أسلوب التنسيق، أو قواعد التحقق، أو استراتيجية معالجة الأخطاء لضمان تطابق الكود المُولَّد مع متطلباتك الدقيقة.
</Tip>

#### بناء هيكل المشروع [#بناء-هيكل-المشروع]

يبني Verdent هياكل مشاريع كاملة مع تسلسلات هرمية كاملة للمجلدات، وملفات التهيئة، والتبعيات، والكود الأولي:

```
Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup
```

يُولّد Verdent هيكل المشروع الكامل بما في ذلك `package.json`، و`tsconfig.json`، ودلائل المكونات، وتهيئة التوجيه، ومزوّدي السياق، وملفات الاختبار، وإعداد التحكم بالإصدار (`.gitignore`، commit أولي).

**أفضل الممارسات لبناء الهيكل:**

استخدم Plan Mode عند بناء هيكل المشاريع. سيقوم Verdent بما يلي:

1. طرح أسئلة توضيحية حول التفضيلات (حل التنسيق، وهيكل المكونات، وأسلوب الاختبار)
2. تقديم خطة مفصلة بهيكل الملفات الكامل وتخطيط الأدلة
3. السماح لك بمراجعة الهيكل وتحسينه قبل الإنشاء
4. توليد المشروع مع التحقق للتأكد من إنشاء جميع الملفات بشكل صحيح

بالنسبة لبناء الهياكل المعقدة، قد يستخدم Verdent وكلاء فرعيين لموازاة مهام الإعداد المستقلة (تثبيت التبعيات، وإنشاء ملفات التهيئة، وإعداد مخططات قواعد البيانات). ويحافظ على الكتابة المتسلسلة للملفات المترابطة للحفاظ على التبعيات.

بعد بناء الهيكل، يمكن لـ Verdent التحقق من الإعداد عن طريق تشغيل الاختبارات الأولية وأوامر البناء للتأكد من أن هيكل المشروع يعمل بشكل صحيح.

***

## تحسين الكود المُولَّد تكراريًا [#تحسين-الكود-المُولَّد-تكراريًا]

يستخدم Verdent سير عمل حواري حيث تقوم بتحسين الكود المُولَّد من خلال طلبات متابعة باللغة الطبيعية ضمن نفس جلسة المحادثة.

**سير عمل التكرار الأساسي:**

1. يُولّد Verdent الكود الأولي
2. تراجع الناتج
3. تقدّم ملاحظاتك أو تطلب تغييرات
4. يقوم Verdent بتحديث الكود بناءً على ملاحظاتك
5. كرر ذلك حتى تحصل على النتيجة المرضية

**مثال على التكرار:**

```
Initial: Create a login form component
```

يُولّد Verdent نموذجًا أساسيًا.

```
Follow-up: Add email validation and show error messages below each field
```

يقوم Verdent بتحديث المكون بإضافة التحقق من الصحة.

```
Follow-up: Style it with Tailwind CSS and add a loading state for the submit button
```

يقوم Verdent بتحسين التنسيق وإضافة سلوك التحميل.

**حلقات التغذية الراجعة السريعة:**

يحافظ Verdent على السياق طوال المحادثة، مما يتيح لك:

* طلب تغييرات تدريجية دون تكرار السياق
* اختبار الكود والإبلاغ عن المشكلات ليقوم Verdent بإصلاحها
* طرح أسئلة "لماذا" حول خيارات التنفيذ
* تجربة أساليب مختلفة عبر طلب بدائل

<Tip>
  بالنسبة للتغييرات الكبيرة، صف ما هو خاطئ أو ما تريده بشكل مختلف بدلًا من كيفية إصلاحه. يمكن لـ Verdent تحليل المشكلة واقتراح أفضل حل بناءً على أنماط مشروعك.
</Tip>

***

## أفضل الممارسات [#أفضل-الممارسات]

<Accordion title="كن محددًا أو عامًا بحسب الحاجة">
  يفهم Verdent مستويات مختلفة من التفصيل. قدّم تفاصيل تقنية عندما تكون لديك متطلبات، أو استخدم أوصافًا عامة ودع Verdent يتخذ خيارات مدروسة بناءً على أنماط مشروعك.
</Accordion>

<Accordion title="ابدأ بالاستكشاف قبل إجراء التغييرات">
  قبل طلب ميزات جديدة، دع Verdent يفهم قاعدة الكود الخاصة بك من خلال أسئلة مثل "حلّل مخطط قاعدة البيانات" أو "اشرح تدفق المصادقة". هذا يبني السياق ويساعد Verdent على تقديم اقتراحات أفضل.
</Accordion>

<Accordion title="استخدم Plan Mode للميزات المعقدة أو متعددة الملفات">
  راجع خطط التنفيذ المفصلة قبل التنفيذ. يطرح Verdent أسئلة توضيحية وينشئ أساليب منظمة. بعد توليد الخطة، اختر **Edit** للتنقيح أو **Start Building** للتنفيذ، لضمان التوافق قبل إجراء أي تغييرات.
</Accordion>

<Accordion title="استفد من إشارات @-mentions للتكامل المستهدف">
  أشر إلى ملفات محددة عندما تريد دمج التغييرات مع الكود الحالي. هذا يضمن توافق الميزات الجديدة مع التطبيقات الحالية.
</Accordion>

<Accordion title="قسّم المهام المعقدة إلى خطوات تدريجية">
  بالنسبة للميزات متعددة الخطوات، اعمل بشكل تدريجي: أنشئ جدول قاعدة البيانات، ثم نقطة نهاية API، ثم مكون واجهة المستخدم. هذا يحافظ على الوضوح ويتيح التحقق في كل خطوة.
</Accordion>

<Accordion title="كلما قدمت سياقًا أكبر، كانت النتائج أكثر توافقًا">
  ضمّن تفاصيل حول اختيارات التقنية، وتفضيلات التصميم، وقواعد التحقق، واستراتيجيات معالجة الأخطاء، أو أي متطلبات أخرى مهمة لتنفيذك.
</Accordion>

***

## راجع أيضًا [#راجع-أيضًا]

<CardGroup cols="2">
  <Card title="فهم الكود" icon="book" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    تعرّف على كيفية استكشاف قواعد الكود الحالية وتحليلها باستخدام Verdent
  </Card>

  <Card title="الاختبار وتصحيح الأخطاء" icon="bug" href="/docs/verdent-for-vscode/task-based-guides/testing-debugging">
    وَلِّد اختبارات شاملة وصحّح الأخطاء بمساعدة الذكاء الاصطناعي
  </Card>
</CardGroup>