Visual Studio Code on kenji.bloghttp://kenji.blog/ar/tags/visual-studio-code/Recent content in Visual Studio Code on kenji.blogHugo -- gohugo.ioarkenjinoteFri, 13 Sep 2024 00:53:53 +0900لقد جربت تثبيت حزمة إضافات Qt في Visual Studio Codehttp://kenji.blog/ar/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/Fri, 13 Sep 2024 00:53:53 +0900http://kenji.blog/ar/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/<img src="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_1.png" alt="Featured image of post لقد جربت تثبيت حزمة إضافات Qt في Visual Studio Code" /><h1 id="بدء-تطوير-qt-في-vscode-كيفية-تثبيت-حزمة-إضافات-qt">بدء تطوير Qt في VSCode: كيفية تثبيت حزمة إضافات Qt </h1><p>مرحبًا، أنا Kenji. هذه المرة سأقدم &ldquo;كيفية إعداد بيئة تطوير Qt في Visual Studio Code (والمعروف باسم VSCode)&rdquo;.</p> <p>في الآونة الأخيرة، بالإضافة إلى Qt Creator الرسمي، تزايدت الأصوات التي ترغب في تطوير تطبيقات Qt باستخدام VSCode خفيف الوزن وعالي القابلية للتوسيع. نوصي هؤلاء الأشخاص بـ ** &ldquo;حزمة إضافات Qt&rdquo; **. بمجرد تثبيت حزمة الإضافات هذه، ستتوفر لديك جميع الإضافات الرئيسية المتعلقة بـ Qt دفعة واحدة.</p> <hr> <h2 id="الجمهور-المستهدف">الجمهور المستهدف </h2><ul> <li>أولئك الذين يرغبون في البدء في تطوير تطبيقات واجهة المستخدم الرسومية (GUI) باستخدام Qt</li> <li>أولئك الذين يرغبون في التطوير باستخدام VSCode بدلاً من Qt Creator</li> <li>أولئك الذين يجدون صعوبة في البحث عن الإضافات واحدة تلو الأخرى</li> </ul> <hr> <h2 id="المتطلبات-الأساسية">المتطلبات الأساسية </h2><ul> <li>أن يكون VSCode مثبتًا بالفعل (<a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >يمكنك تنزيله مجانًا من الموقع الرسمي</a>)</li> <li>أن تكون مكتبة Qt الأساسية مثبتة (<a class="link" href="https://www.qt.io/" target="_blank" rel="noopener" >موقع Qt الرسمي</a>)</li> </ul> <hr> <h2 id="ما-هي-حزمة-إضافات-qt">ما هي حزمة إضافات Qt؟ </h2><p>حزمة إضافات Qt هي حزمة إضافات لـ VSCode. من خلال تثبيتها، ستتم إضافة الميزات التالية تلقائيًا:</p> <ul> <li>دعم ملفات <code>.ui</code> (Qt Designer)</li> <li>تمييز بناء الجملة لملفات <code>.pro</code> وملفات <code>.qrc</code></li> <li>إكمال كود C++ لـ Qt، والبناء، ودعم تصحيح الأخطاء</li> <li>متصفح موارد Qt (تصفح الموارد)</li> </ul> <hr> <h2 id="خطوات-التثبيت">خطوات التثبيت </h2><h3 id="1-افتح-vscode">1. افتح VSCode </h3><p>أولاً، قم بتشغيل VSCode.</p> <h3 id="2-افتح-عرض-الإضافات">2. افتح عرض الإضافات </h3><p>انقر على شريط النشاط على اليسار (رمز المربع) لعرض &ldquo;الإضافات&rdquo;.</p> <p>أو يمكنك الضغط على الاختصار <code>Ctrl + Shift + X</code>.</p> <h3 id="3-ابحث-عن-qt-extension-pack">3. ابحث عن &ldquo;Qt Extension Pack&rdquo; </h3><p>أدخل الكلمة الرئيسية التالية في شريط البحث:</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">Qt Extension Pack </span></span></code></pre></td></tr></table> </div> </div><p><img src="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img.png" width="867" height="228" srcset="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_hua3a606fe260b4f1c55a0f37b6ed054ec_30325_480x0_resize_box_3.png 480w, http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_hua3a606fe260b4f1c55a0f37b6ed054ec_30325_1024x0_resize_box_3.png 1024w" loading="lazy" alt="img.png" class="gallery-image" data-flex-grow="380" data-flex-basis="912px" ></p> <h3 id="4-انقر-فوق-زر-التثبيت">4. انقر فوق زر التثبيت </h3><p>بمجرد ظهور الحزمة المستهدفة، انقر فوق الزر &ldquo;تثبيت&rdquo;. سيؤدي هذا إلى تثبيت الإضافات المتعددة التالية دفعة واحدة:</p> <ul> <li>Qt Language Support</li> <li>QML Support</li> <li>Qt Designer Integration</li> <li>CMake Tools (مطلوب لتطوير Qt المتوافق مع CMake)</li> </ul> <hr> <h2 id="إضافة-حول-إعدادات-المشروع-مثال-cmake--qt">إضافة حول إعدادات المشروع (مثال CMake + Qt) </h2><p>إذا كنت تستخدم Qt استنادًا إلى CMake، فنوصي بدمجه مع الإضافات التالية:</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener" >CMake Tools</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=twxs.cmake" target="_blank" rel="noopener" >CMake Language Support</a></li> </ul> <p>أيضًا، إذا أضفت الكود التالي إلى CMakeLists.txt، فسيكون التكامل مع Qt سلسًا:</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-cmake" data-lang="cmake"><span class="line"><span class="cl"><span class="nb">find_package</span><span class="p">(</span><span class="s">Qt6</span> <span class="s">REQUIRED</span> <span class="s">COMPONENTS</span> <span class="s">Widgets</span><span class="p">)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="nb">target_link_libraries</span><span class="p">(</span><span class="s">MyApp</span> <span class="s">PRIVATE</span> <span class="s">Qt6::Widgets</span><span class="p">)</span><span class="err"> </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="مكافأة-كيف-تفتح-ملفات-ui">مكافأة: كيف تفتح ملفات .ui؟ </h2><p>يمكن تحرير ملفات <code>.ui</code> في Qt Designer. في VSCode، يمكنك النقر بزر الماوس الأيمن على ملف <code>.ui</code> ثم اختيار <code>Open with Qt Designer</code> (يجب أن يكون Qt Designer مضمنًا في متغير البيئة <code>PATH</code>).</p> <hr> <h2 id="الخلاصة">الخلاصة </h2><table> <thead> <tr> <th>الخطوة</th> <th>الوصف</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>تشغيل VSCode</td> </tr> <tr> <td>2</td> <td>فتح لوحة الإضافات</td> </tr> <tr> <td>3</td> <td>البحث عن &ldquo;Qt Extension Pack&rdquo;</td> </tr> <tr> <td>4</td> <td>النقر فوق زر التثبيت</td> </tr> </tbody> </table> <p>أصبح إعداد بيئة Qt في VSCode أسهل بكثير من ذي قبل. يحتوي على ميزات كافية ليكون بديلاً لـ Qt Creator، ونوصي به لأولئك الذين يرغبون في العمل بخفة.</p> <hr> <h2 id="مجموعة-روابط-موصى-بها">مجموعة روابط موصى بها </h2><ul> <li><a class="link" href="https://www.qt.io/" target="_blank" rel="noopener" >موقع Qt الرسمي</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=TheQtCompany.qt" target="_blank" rel="noopener" >Qt Extension Pack - Visual Studio Marketplace</a></li> <li><a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >موقع VSCode الرسمي</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener" >إضافة CMake Tools</a></li> </ul> <hr> <h2 id="أخيرا">أخيرًا </h2><p>في المستقبل، أخطط لمواصلة التطوير باستخدام أدوات واجهة المستخدم لـ Qt و QML في هذه البيئة. في المرة القادمة، أخطط لشرح ** كيفية بناء وتشغيل تطبيق Hello World في Qt من VSCode **.</p> <p>أراكم لاحقًا!</p>إضافات Visual Studio Code الموصى بهاhttp://kenji.blog/ar/p/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-visual-studio-code-%D8%A7%D9%84%D9%85%D9%88%D8%B5%D9%89-%D8%A8%D9%87%D8%A7/Wed, 29 May 2024 17:20:19 +0900http://kenji.blog/ar/p/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA-visual-studio-code-%D8%A7%D9%84%D9%85%D9%88%D8%B5%D9%89-%D8%A8%D9%87%D8%A7/<img src="http://kenji.blog/p/visual-studio-code%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/img.png" alt="Featured image of post إضافات Visual Studio Code الموصى بها" /><h1 id="قائمة-إضافات-visual-studio-code-الموصى-بها">قائمة إضافات Visual Studio Code الموصى بها </h1><table> <thead> <tr> <th>التصنيف</th> <th>الاسم</th> <th>المصدر</th> <th>الوصف</th> </tr> </thead> <tbody> <tr> <td>إدارة الحاويات والأنظمة الوهمية</td> <td>Remote Devlopment</td> <td>Microsoft</td> <td>يدعم التطوير عن بُعد عبر الاتصال بالحاويات الوهمية/WSL باستخدام SSH</td> </tr> <tr> <td>إدارة الحاويات والأنظمة الوهمية</td> <td>Docker</td> <td>Microsoft</td> <td>يدعم إدارة حاويات Docker</td> </tr> <tr> <td>إدارة الكود</td> <td>GitHub Pull Requests</td> <td>GitHub</td> <td>يدعم إدارة طلبات السحب (Pull Requests) الخاصة بـ GitHub داخل VSCode</td> </tr> <tr> <td>إدارة الكود</td> <td>GitHub Copilot</td> <td>GitHub</td> <td>يدعم إكمال الكود باستخدام الذكاء الاصطناعي</td> </tr> <tr> <td>إدارة الكود</td> <td>Git Graph</td> <td>mhutchie</td> <td>يعرض فروع وتاريخ Git بشكل رسومي</td> </tr> <tr> <td>إدارة الكود</td> <td>Git History</td> <td>Don Jayamanne</td> <td>يعرض تاريخ Git</td> </tr> <tr> <td>تطوير الويب والمتصفح</td> <td>Debugger for Firefox</td> <td>Firefox DevTools</td> <td>يتيح استخدام مصحح أخطاء Firefox داخل VSCode</td> </tr> <tr> <td>تطوير الويب والمتصفح</td> <td>Microsoft Edge Tool For VScode</td> <td>Microsoft</td> <td>يتيح استخدام أدوات المطورين لـ Edge داخل VSCode</td> </tr> <tr> <td>تطوير الويب والمتصفح</td> <td>Vue Language Features(Volar)</td> <td>Vue</td> <td>يدعم ميزات لغة Vue</td> </tr> <tr> <td>تطوير الويب والمتصفح</td> <td>JavaScript (ES6) code snippets</td> <td>charalampos karypidis</td> <td>يوفر مقتطفات برمجية لـ JavaScript</td> </tr> <tr> <td>تطوير الويب والمتصفح</td> <td>Tailwind CSS IntelliSense</td> <td>Tailwind Labs</td> <td>يوفر مقتطفات برمجية لـ Tailwind CSS</td> </tr> <tr> <td>التطوير السحابي</td> <td>AWS Toolkit</td> <td>Amazon Web Services</td> <td>يدعم تطوير AWS</td> </tr> <tr> <td>التطوير السحابي</td> <td>Azure Tools</td> <td>Microsoft</td> <td>يدعم تطوير Azure</td> </tr> <tr> <td>التطوير السحابي</td> <td>Google Cloud Tools</td> <td>Google Cloud</td> <td>يدعم تطوير Google Cloud</td> </tr> <tr> <td>قواعد البيانات</td> <td>MySQL</td> <td>Jun Han</td> <td>يدعم تطوير MySQL</td> </tr> <tr> <td>قواعد البيانات</td> <td>SQL Server(mssql)</td> <td>Microsoft</td> <td>يدعم تطوير SQL Server</td> </tr> <tr> <td>قواعد البيانات</td> <td>PostgreSQL</td> <td>Chris Kolkman</td> <td>يدعم تطوير PostgreSQL</td> </tr> <tr> <td>الأنظمة المدمجة</td> <td>PlatformIO</td> <td>PlatformIO</td> <td>يدعم تطوير PlatformIO</td> </tr> <tr> <td>الأنظمة المدمجة</td> <td>Arduino</td> <td>Microsoft</td> <td>يدعم تطوير Arduino</td> </tr> <tr> <td>الأنظمة المدمجة</td> <td>WorkBench</td> <td>Particle</td> <td>بيئة تطوير مقدمة من Particle تدعم التطوير لإنترنت الأشياء (IoT) بما في ذلك البرامج الثابتة، المكتبات، والتكامل السحابي</td> </tr> <tr> <td>C/C++</td> <td>C/C++ Extension Pack</td> <td>Microsoft</td> <td>يدعم تطوير C/C++</td> </tr> <tr> <td>C/C++</td> <td>C/C++ Runner</td> <td>franneck94</td> <td>ينفذ كود C/C++ (يدعم مترجمات gcc، msvc، cuda nvccc)</td> </tr> <tr> <td>C/C++</td> <td>Cortex-Debug</td> <td>marus25</td> <td>يدعم تصحيح أخطاء المتحكمات الدقيقة Cortex-A/R/M</td> </tr> <tr> <td>Python</td> <td>Python Extension Pack</td> <td>Microsoft</td> <td>يدعم تطوير Python</td> </tr> <tr> <td>Python</td> <td>jupyter</td> <td>Microsoft</td> <td>يدعم تطوير Jupyter Notebook</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>Makrdown All in One</td> <td>Yu Zhang</td> <td>يدعم كتابة Markdown</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>Hex Editor</td> <td>Microsoft</td> <td>يحرر الملفات الثنائية</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>vscode-pdf</td> <td>tomoki1207</td> <td>يعرض ملفات PDF</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>Rainbow CSV</td> <td>mechatroner</td> <td>يعرض ملفات CSV بألوان متعددة</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>Draw.io Integration</td> <td>Henning Dieterichs</td> <td>يتيح استخدام Draw.io داخل VSCode</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>Japanese Language Pack for Visual Studio Code</td> <td>Microsoft</td> <td>حزمة تعريب واجهة المستخدم</td> </tr> <tr> <td>الأدوات وواجهة المستخدم</td> <td>Live Share</td> <td>Microsoft</td> <td>يدعم العمل المشترك في الوقت الفعلي</td> </tr> </tbody> </table>