ما هو 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 .

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
  
  توفر لك هذه الاضافة قصاصات برمجية لتختصر كتابتها , مثلا:
```
 [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 bmewburn.vscode-intelephense-client
```

اضافات اطار عمل Laravel :
1. Laravel 5 Snippets
  
  ستوفر لك هذه الاضافة قصاصات برمجية خاصة بـ Laravel .
  
  يمكن تثبيتها من صندوق Quick Open على اختصار Ctrl+P :
```
 ext install onecentlin.laravel5-snippets
```
2. Laravel Blade Snippets
  
  ستوفر لك هذه الاضافة قصاصات برمجية خاصة لنظام قوالب 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
```

تخصيص محرر Visual Studio Code

محمود العموش

محمود العموش

ما هو Visual Studio Code ؟

إضافات عامة

إضافات خاصة :

تعلم Vuex - المقدمة