ما هو Visual Studio Code ؟
هو محرر شيفرات مجاني و مفتوح المصدر "MIT License" مطور من قبل Microsoft موجه للعديد من الانظمة "Windows, Linux and macOS" . يدعم هذا المحرر العديد من اللغات ويحتوي على عدد كبير من الاضافات التي ستسهل عليك العمل من كتابة و هيئة المحرر و تحليل الشفرة "Code" . في عام 2018 حصل محرر Visual Studio Code على المركز الاول في استبيان stackoverflow كأكثر بيئة تطوير مستخدمة بين المطورين .
يدعم Visual Studio Code الكثير من اللغات مثل JavaScript, TypeScript, CSS, HTML ولغات اخرى عديدة ويمكنك دعم لغات اكثر عن طريق VS Code Marketplace وكما يوفر توثيق للتعامل مع بعض اللغات يمكن ان تستكشفها في التوثيق الرسمي للمحرر .
تنويه : هذا المحرر يجمع بعض بيانات الإستخدام ويرسلها الى Microsoft لتحسين المنتج والخدمات المقدمة , يمكن تعطيل جمع البيانات كما هو موضح في صفحة الأسئلة الشائعة . لمعرفة المزيد عن هذه النقطة اقرأ بيان الخصوصية الخاص بـ Microsoft .
في هذا المقال سأذكر بعض الاضافات التي ستساعدك على العمل بحسب اللغة التي تستعملها , وبعض الاضافات التي ستحسن من مظهر المحرر بشكل عام .
إضافات عامة
-
المظهر أو Theme :
يوجد عدد من الثيمات المنصبة افتراضيًا مع المحرر ويمكن اضافة ثيمات اخرى من خلال Marketplace , لكن هنا سأرشح بعض المظاهر :
-
Dark+ : مظهر افتراضي موجود مع المحرر
لاختيار مظهر معين : File > Preferences > Color Theme
او على اختصار Ctrl+K Ctrl+T .
-
يمكن تثبيته من صندوق Quick Open على اختصار Ctrl+P :
ext install zhuangtongfa.Material-theme
-
وهي عبارة عن حزمة ايقونات ستتعين للملفات بحسب امتداد الملف .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install vscode-icons
-
ستنسق لك هذه الاضافة جميع ما تكتبه كـ TODO في كامل ملفات المشروع , بحيث ستفهرسها في قائمة يسهل الرجوع اليها مما يوفر عليك البحث .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install Gruntfuggly.todo-tree
-
اضافة رائعة من تطوير Microsoft تمكنك من مشاركة بيئة العمل مع زملائك بصلاحيات التعديل على الكود او القراءة فقط !
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install MS-vsliveshare.vsliveshare
مستخدمين نظام GNU\Linux ربما تحتاج تحميل بعض المكتبات لتشغيل الاضافة , تابع الشرح الموجود في التوثيق الرسمي .
-
هذه الإضافة تعتمد على الإضافة السابقة "VS Live Share" بحيث توفر لك سبورة تعاونية في نفس الجلسة "session" التي تشارك فيها بيئة العمل مع زملائك .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install lostintangent.vsls-whiteboard
-
بعد مشاركة بيئة العمل وإضافة سبورة لتشرح عليها , لم يبقى لك الا ان تضيف اتصالاً صوتيًا بين زملائك في الجلسة ! هذه الاضافة تابعة لـ "VS Live Share" وهي ايضًا من تطوير Microsoft ستسمح لك بالتواصل صوتيًا مع باقي زملائك في الجلسة .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install MS-vsliveshare.vsliveshare-audio
-
advanced-new-file
ستسهل لك هذه الاضافة اختصارًا لإنشاء ملف جديد بأي مسار داخل المشروع .يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install patbenatar.advanced-new-file
-
من الاضافات الرائعة التي يمكن ان تستخدمها مع هذا المحرر , توفر لك تشغيل الكود او جزء منه بعدد كبير من اللغات وهي : C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install formulahendry.code-runner
-
هذه الاضافة ستوضح لك الاقواس عن طريق تلوين كل قوسين بلون مميز مما يوضح لك نطاق كل دالة او كلاس في الكود .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install CoenraadS.bracket-pair-colorizer
-
تمكنك هذه الاضافة من كتابة اعدادات تنسيق خاصة بملفات javascript, JSON, CSS, Sass, HTML بحسب اعدادات lint التي تستخدمها . لمعرفة تفاصيل اكثر عن الاضافة القِ نظرة على اعداداتها .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install HookyQR.beautify
إضافات خاصة :
-
إضافات HTML :
-
من اهم الاضافات التي ستحتاجها ان كنت تعمل على صفحات HTML , تعمل هذه الاضافة على عمل Live reload بحيث لا تضطر الى اعادة تحميل الصفحة لرؤية تعديلاتك بل تراها مباشرة بعد حفظ الملف .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install ritwickdey.LiveServer
-
-
إضافات CSS :
-
تمكنك هذه الاضافة من رؤية تمثيل مرئي لتنسيق الـCSS دون ان تخرج من المحرر .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install sandorengholm.csspreview
-
ستعرض لك هذه الاضافة استعراض سريع لما يحتويه الـClass & IDs ويوفر لك وصول سريع لهم .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install pranaygp.vscode-css-peek
-
-
إضافات JavaScript :
-
توفر لك هذه الاضافة قصاصات برمجية لتختصر كتابتها , مثلا:
[cl] console.log : console.log(${1}); [ae] addEventListener : ${1:document}.addEventListener('${2:load}', function(e) { ${3:// body} }); [gi] getElementById : ${1:document}.getElementById('${2:id}'); [fe] forEach : ${1:array}.forEach(function(item) { ${2:// body} }); [fn] function : function ${1:methodName} (${2:arguments}) { ${3:// body} } [si] setInterval : setInterval(function() { ${0:// body} }, ${1:1000});
قائمة الاختصارات كاملة تجدها في صفحة الاضافة في المتجر .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install akamud.vscode-javascript-snippet-pack
-
تعرض لك هذه الاضافة حجم كل حزمة تقوم باضافتها بشكل بسيط جدا في سطر الاستدعاء .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install wix.vscode-import-cost
-
-
اضافات PHP :
-
من اقوى الاضافات التي ممكن ان تستعملها لـPHP , حيث ستعرض لك هذه الاضافة ناتج الكود مباشرة دون ان تغادر المحرر !
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install ziishaned.hugobot
-
اضافة اخرى قوية تقدم عدد كبير من الميزات ومنها ؛ عرض صندوق لتوضيح الباراميترز اثناء استخدام function , وتسهل لك الوصول السريع لمكان كتابة المتغير والـfunction بمجرد الضغط عليه مع Ctrl , وتحسن الاكمال التلقائي لـPHP .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install bmewburn.vscode-intelephense-client
-
-
اضافات اطار عمل Laravel :
-
ستوفر لك هذه الاضافة قصاصات برمجية خاصة بـ Laravel .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install onecentlin.laravel5-snippets
-
ستوفر لك هذه الاضافة قصاصات برمجية خاصة لنظام قوالب Blade .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install onecentlin.laravel-blade
-
-
اضافات SQL :
-
تتيح لك هذه الاضافة الاتصال بقاعدة البيانات وكتابة Query واستعراض قاعدة البيانات .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install mtxr.sqltools
وهناك اضافة اخرى بنفس الوظيفة القِ نظرة عليها vscode-database .
-
-
اضافات Git :
-
توفر لك هذه الاضافة دعم لخدمات git مثل Git History , Project Manager , gitignore وايضًا الوصول الى حسابك في اشهر المواقع التي تقدم خدمات VCS وهي GitHub, Bitbucket, and GitLab .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install donjayamanne.git-extension-pack
-
-
اضافات Python :
-
اضافة مفتوحة المصدر من تطوير Microsoft , توفر لك هذه الاضافة دعم للغة بايثون من ناحية الاكمال التلقائي والتنسيق والتشغيل .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
ext install ms-python.python
-