ما هو 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 , لكن هنا سأرشح بعض المظاهر :

1. Dark+ : مظهر افتراضي موجود مع المحرر
   لاختيار مظهر معين : File > Preferences > Color Theme او على اختصار Ctrl+K Ctrl+T .

   

   ​

2. One Dark Pro
   يمكن تثبيته من صندوق Quick Open على اختصار Ctrl+P :

   ext install zhuangtongfa.Material-theme

   

    

• vscode-icons

وهي عبارة عن حزمة ايقونات ستتعين للملفات بحسب امتداد الملف .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

ext install vscode-icons

 

• Todo Tree

ستنسق لك هذه الاضافة جميع ما تكتبه كـ TODO في كامل ملفات المشروع , بحيث ستفهرسها في قائمة يسهل الرجوع اليها مما يوفر عليك البحث .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

ext install Gruntfuggly.todo-tree

​

• VS Live Share

اضافة رائعة من تطوير Microsoft تمكنك من مشاركة بيئة العمل مع زملائك بصلاحيات التعديل على الكود او القراءة فقط !
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

ext install MS-vsliveshare.vsliveshare

مستخدمين نظام GNU\Linux ربما تحتاج تحميل بعض المكتبات لتشغيل الاضافة , تابع الشرح الموجود في التوثيق الرسمي .
قمت بتجربتها مع المبرمج عمار الخوالدة مشكورًا :)

 

• VS Live Share Whiteboard

هذه الإضافة تعتمد على الإضافة السابقة "VS Live Share" بحيث توفر لك سبورة تعاونية في نفس الجلسة "session" التي تشارك فيها بيئة العمل مع زملائك .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

ext install lostintangent.vsls-whiteboard

 

• VS Live Share Audio

بعد مشاركة بيئة العمل وإضافة سبورة لتشرح عليها , لم يبقى لك الا ان تضيف اتصالاً صوتيًا بين زملائك في الجلسة ! هذه الاضافة تابعة لـ "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

 

• Code Runner

من الاضافات الرائعة التي يمكن ان تستخدمها مع هذا المحرر , توفر لك تشغيل الكود او جزء منه بعدد كبير من اللغات وهي : 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

 

• Bracket Pair Colorizer

هذه الاضافة ستوضح لك الاقواس عن طريق تلوين كل قوسين بلون مميز مما يوضح لك نطاق كل دالة او كلاس في الكود .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

ext install CoenraadS.bracket-pair-colorizer

 

• Beautify

تسمح لك هذه الاضافة بكتابة اعدادات تنسيق خاصة بملفات javascript, JSON, CSS, Sass, HTML بحسب اعدادات lint التي تستخدمها . لمعرفة تفاصيل اكثر عن الاضافة القِ نظرة على اعداداتها .
يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

ext install HookyQR.beautify

 

إضافات خاصة :

• إضافات HTML :

1. Live Server :
   من اهم الاضافات التي ستحتاجها ان كنت تعمل على صفحات HTML , تعمل هذه الاضافة على عمل Live reload بحيث لا تضطر الى اعادة تحميل الصفحة لرؤية تعديلاتك بل تراها مباشرة بعد حفظ الملف .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install ritwickdey.LiveServer

   

    

• إضافات CSS :

1. CSS Preview :
   تمكنك هذه الاضافة من رؤية تمثيل مرئي لتنسيق الـCSS دون ان تخرج من المحرر .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install sandorengholm.csspreview

   

    

2. CSS Peek
   ستعرض لك هذه الاضافة استعراض سريع لما يحتويه الـClass & IDs ويوفر لك وصول سريع لهم .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install pranaygp.vscode-css-peek

   

    

• إضافات JavaScript

1. JavaScript Snippet Pack
   توجد الكثير من الاضافات التي توفر لك اكمال تلقائي لـ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

    

2. Import Cost
   تعرض لك هذه الاضافة حجم كل حزمة تقوم باضافتها بشكل بسيط جدا في سطر الاستدعاء .

   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install wix.vscode-import-cost

   

• اضافات PHP

1. HugoBot
   من اقوى الاضافات التي ممكن ان تستعملها لـPHP , حيث ستعرض لك هذه الاضافة ناتج الكود مباشرة دون ان تغادر المحرر !
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install ziishaned.hugobot

    

   

    

2. PHP Intelephense
   اضافة اخرى قوية تقدم عدد كبير من الميزات ومنها ؛ عرض صندوق لتوضيح الباراميترز اثناء استخدام function , وتسهل لك الوصول السريع لمكان كتابة المتغير والـfunction بمجرد الضغط عليه مع Ctrl , وتحسن الاكمال التلقائي لـPHP .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install ziishaned.hugobot

    

• اضافات اطار عمل Laravel :

1. Laravel 5 Snippets
   ببساطة ستوفر لك هذه الاضافة دعمًا للاكمال التقائي في Laravel , ستكون اضافة اساسية لمطوري Laravel .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install onecentlin.laravel5-snippets

    

2. Laravel Blade Snippets
   هذه الاضافة ايضا اعتبرها اساسية لمطوري Laravel فستوفر لك دعمًا للاكمال التلقائي مع اختصارات للارافيل في قوالب Blade .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install onecentlin.laravel-blade

    

• اضافات SQL :

1. SQLTools - Database tools
   تتيح لك هذه الاضافة الاتصال بقاعدة البيانات وكتابة Query واستعراض قاعدة البيانات .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install mtxr.sqltools

   وهناك اضافة اخرى بنفس الوظيفة القِ نظرة عليها vscode-database .

• اضافات Git

1. Git Extension Pack
   توفر لك هذه الاضافة دعم لخدمات git مثل Git History , Project Manager , gitignore وايضًا الوصول الى حسابك في اشهر المواقع التي تقدم خدمات VCS وهي GitHub, Bitbucket, and GitLab .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install donjayamanne.git-extension-pack

    

• اضافات Python

1. Python
   اضافة مفتوحة المصدر من تطوير Microsoft , توفر لك هذه الاضافة دعم للغة بايثون من ناحية الاكمال التلقائي والتنسيق والتشغيل .
   يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :

   ext install ms-python.python

   

 

كلمات دليلية: ide vscode