إن كنت من مطوري المواقع أو لديك موقع أو مبرمج فبكل تأكيد تحتاج لمحرر أكواد إحترافي مجاني وبه الكثير جداً من الإضافات والمميزات التي تجعل من تعديل الكود أو كتابته أمر أسهل مما قبل فبكل تأكيد ليس هناك أفضل من فيجوال استوديو كود وكذلك دريم ويفر بالنسبة لمطوري الويب.
ولكن وكما نعرف أن دريم ويفر ليس مجاني وعليك شرائه أو تجربته لمدة معينة وكذلك فيجوال استوديو كود حجمه كبير ويجب تركيبه على أي جهاز كمبيوتر لتستطيع إستخدامه وهنا يظهر الحل وهو محرر أكواد كامل نسخة أونلاين من فيجوال استوديو كود بكل مميزاته ويمكنك بإضافة واحدة مجانية تحويله إلى دريم ويفر بنفس الشكل وطريقة التنسيق في ثواني معدودة.
كل هذا مجاني وبدون تركيب برامج وأونلاين وبكل المميزات والإضافات التي لن تتخيلها ليس عليك إلا فقط عمل حساب بالبريد الإلكتروني وتأكيده ليعمل معك ويمكنك فتح المحرر الخاص بك من أي مكان بالمتصفح وعلى أي جهاز كمبيوتر أو حتى موبايل كل ذلك مع الإحتفاظ بالإضافات الخاصة بك والمركبة على حسابك بمحرر الأكواد فيجوال استوديو أونلاين.
الأمر بسيط للغاية ومجاني وسيتم شرح كل شيء بكامل التفاصيل فقط تابع الشرح.
وقد يسأل البعض
ما هو أفضل محرر أكواد مجاني؟
هل هناك محرر أكواد أونلاين؟
كيف يمكنني كتابة أو تعديل الأكواد كالمحترفين؟
وستجد الإجابة كاملة على كل تلك الأسئلة وأكثر بكامل المقالة
وفي البداية سنقسم المقالة لقسمين
محرر فيجوال استوديو كود أونلاين من موقع في إس كود
وهو محرر ممتاز ويمكنك من خلاله التعديل على أي كود لديك أو كتابته وحفظه عندك على الجهاز بكل بساطة مثله مثل أي محرر أكواد إحترافي تماماً فهو بالفعل محرر أكواد كامل متكامل به الكثير جداً من المميزات عن أي محرر أكواد أخر أقل في المميزات والتحديثات حيث أنه أونلاين ودائم التحديث وبه كافة التطورات التي تستجد على لغات البرمجة وكذلك التعامل معها.
لا يعيبه سوى أنه وعلى الأقل بالنسبة لي لا يقوم بتسجيل الدخول بحساب جيت هب أو حساب مايكروسوفت لكي أتمكن من تركيب الإضافات الهامة جداً للمحرر والتي من دونها سيفقد المحرر الكثير جداً من نقاط قوته التي يتفوق بها على المحررات المدفوعة ولكنه وعلى كل حال محرر جيد حتى بدون الإضافات التي هي في وجهة نظري نقطة هامة للغاية ولا يمكن إهمالها.
المحرر ممتاز ويقرأ ويفهم الكود جيداً وحتى أكواد الألوان يفهمها ويضع بجانبها مربع صغير بلون الكود لتفهم وتعرف اللون والكود الخاص به وبأي جزء من الكود ليس هذا وفقط بل يمكنك كذلك تغيير اللون بأبسط وأروع طريقة ممكن أن تأتي في بالك فقط عليك الوقوف بمؤشر الماوس على كود اللون ليفتح لك قائمة الألوان التي يمكنك من خلالها إختيار اللون الذي تريد وتغيره عن اللون السابق بكل تلك البساطة دون أن تضطر إلى البحث عن مواقع أكواد الألوان أو حتى أن تضطر لحفظ أكواد الألوان لتترك تركيزك لما هو أهم وهو الكود نفسه.
محرر فيجوال استوديو كود من موقع جيت هب
وهو المحرر الأروع في نظري وفيه كل المميزات التي نقصت عن محرر فيجوال استوديو كود أونلاين من موقع في إس كود حيث هنا يمكنك الدخول فقط بحساب جيت هب يمكنك عمله من موقع جيت هب فقط بالبريد الإلكتروني لتبدأ بعدها في الدخول لموقع فيجوال استوديو أونلاين الخاص بجيت هب حيث يمكنك إضافة الكثير جداً من الإضافات التي حرفياً ستسهل عليك جداً تنسيق الكود وإستكشاف الأخطاء وتلوين أكواد الألوان وتنسيق المسافات بين الوسوم بالكود مما سيسهل عليك الأمر جداً أكثر مما تتصور.
يمكنك ببساطة إضافة ملف جديد أو فتح ملف قديم للتعديل عليه ليس هذا وفقط بل يمكنك تحديد إما أن تضع الملف على حسابك بموقع جيت هب أو أن تضع وتحفظ الملف على جهازك الشخصي وبعدها يمكنك أن تبدأ في كتابة أو تعديل الكود الخاص بك بشكل رائع وبتجربة مميزة جداً عن كل ما قد تكون قد تعرضت له من قبل من المحررات للأكواد الأخرى الأقل إحترافية ومميزات وإضافات.
وبالنسبة للإضافات سأضع في هذه المقالة أهم وأقوى الإضافات المميزة والتي هي في مجملها مفيدة لكل لغات البرمجة ولكنها ومن إختياري هي ممتازة للغاية لمطوري الويب أو المبرمجين فرونت إند وعلى العموم سنقوم بشرحها إضافة تلو الأخرى كالأتي
1- إضافة Prettier - Code formatter
بالبداية عليك الضغط على زرار الإضافات الموجود منتصف يسار محرر الأكواد وتجده على شكل 4 مربعات صغيرة بعدها عليك كتابة الجملة Prettier - Code formatter في خانة البحث أعلى يسار محرر الأكواد بعدها تقوم بتركيب الإضافة بالضغط على زرار install لتركب الإضافة بنجاح.
عليك لتفعيل جميع مميزات تلك الإضافة الأهم في وجهة نظري وذلك بالضغط على زرار الترس أسفل يسار الشاشة ومنها تقوم بالضغط على خيار Settings وبعدها تجد مربع بحث أعلى منتصف محرر الأكواد تكتب به default formatter لتجد ظهرت قائمة منسدلة مكتوب بها None لتقوم بتغييرها إلى الخيار Prettier - Code formatter وبعدها نقوم بالبحث عن format on save وبعدها تقوم بعمل علامة صح على الخيار Editor: Format On Save .
ثم بعدها نقوم بالبحث عن single quote ثم نقوم بعمل علامة صح على الخيار Prettier: Single Quote هكذا فقد فعلت كامل مميزات وقدرات الإضافة التي سوف تنسق وتصحح الكود عند الكتابة والتعديل وكذلك عند الحفظ وهي إضافة ممتازة للغاية ولا يمكنك الإستغناء عنها إن أردت الوصول لكتابة وعمل كود صحيح بالإستعانة بالمصحح الأوتوماتيكي للكود بهذه الإضافة الرائعة.
2- إضافة Path Intellisense
وهي إضافة جيدة جداً حيث كل ماعليك هو كتابة Path Intellisense في خانة بحث الإضافات كما تم شرحها بالإضافة السابقة وبعد الوصول للإضافة نقوم بتركيبها على المحرر بالضغط على زرار Install وهي إضافة مميزة تساعدك على إكمال أسماء الملفات الأخرى التي تقوم بربطها بالمشروع أو الكود فهي توفر عليك الوقت والمجهود لتذكر وإكمال إسم ومسار الملفات الأخرى في لحظات وهو الأمر الذي سيوفر عليك الكثير من التركيز لتوفره لكتابة الكود وهو الأهم.
3- إضافة indent-rainbow
وهي إضافة مميزة يمكنها تمييز الوسوم وتلوين المسافات بينها ليتضح لك بشكل قوي من أين يفتح الوسم وأين يغلق بل والوسوم الموجودة بداخله كنوع أفضل في التنسيق وهو أمر مهم جداً بالنسبة لكل مطور أو مبرمج حتى لا يختلط الكود عليه ولسهولة قرائته كذلك فقط عليك كتابة indent-rainbow وتركيب الإضافة على المحرر لتعمل معك بكل سهولة.
4- إضافة Color Highlight
وهي إضافة ممتازة لتوضيح أكواد الألوان حيث لن تكتفي فقط بعمل مربع صغير بلون كود الألوان بل وبتلوين كامل كود الألوان باللون الذي يعبر عن كود اللون وهو أمر ممتاز ويعتبر أكثر تمييز وتوضيح للألوان بكل سهولة وبمجرد نظرة واحدة للكود يتضح بالفعل كامل أكواد الألوان بكامل الكود وكل ذلك بفضل مميزات تلك الإضافة الممتازة في وجهة نظري.
5- إضافة CSS Peek
وهو كود يوضح عموماً شكل الكلاسات والأيديهات التي قمت بعملها بمجرد الضغط على إسم الكلاس بالكود يظهر لك كامل إعدادات وقيم الكلاس مما يسهل عليك جداً التعرف على قيم وخيارات الكلاس المكتوبة لمزيد من التوضيح وتسهيل الأمر على المبرمج أو المطور بدلاً من مراجعة الكلاسات والأيديهات كل مرة لمراجعة ما كان فيها من خيارات لتوفير مزيد من الوقت والتركيز على المطور لكتابة الكود وتسهيل الأمور الأخرى الثانوية بالموضوع.
6- إضافة Material Icon Theme
وهي تعتبر ميزة جيدة ويفضلها الكثير من المطورين حيث تصنف تلك الإضافة الملفات الخاصة بالمشروع على حسب نوعها بأيقونات مميزة جداً ومتنوعة تستطيع من خلالها التعرف على نوع الملف من مجرد شكل الأيكونة الموجودة بجانب الملف كنوع من تسهيل وتوضيح الأمور وتصنيف الملفات بشكل أفضل وأسرع مما يسهل على المبرمج التعامل مع الملفات وتفسير نوعها بلحظة واحدة من خلال الإعتماد على شكل أيكونة الملف فقط وهو أمر أسرع وأفضل بالنسبة للمبرمج.
7- إضافة Dreamweaver Web Theme
وهي إضافة لا أنصح بتفعيلها إطلاقاً إلا في حالة واحدة وهي أن تكون متعود بالفعل على شكل وتنسيق برنامج دريم ويفر هنا يمكنك تركيب تلك الإضافة لتحويل محرر فيجوال استوديو كود لنسخة طبق الأصل من محرر الأكواد دريم ويفر بنفس التنسيق والألوان ولكن يعيب تلك الإضافة أنها تقلل من بعض مميزات الإضافات الأخرى فلا تستخدمها إطلاقاً إلا في حالة كنت تحب العمل ببرنامج دريم ويفر وتريد العمل بنفس تنسيق وطريقة عمل برنامج دريم ويفر وهنا وفي تلك الحالة فقط يمكنك تركيب هذه الإضافة والإستمتاع بها وكأنك تعمل من داخل برنامج دريم ويفر بالظبط.
بالطبع حاولت شرح الإضافات بقدر المستطاع وعليك التجربة بل ومحاولة البحث أكثر عن الإضافات في حالة لم توفق في معرفة ميزة الإضافة أو كيفية إستخدامها فالأمر متروك لك ولكني أؤكد لك أنك بإستخدام أول 6 إضافات فقط إن قمت بتركيبهم ثم البدأ في كتابة الأكواد أو تعديل الأكواد ستجد إختلاف ضخم جداً وتبسيط للكود وتنسيق مميز جداً يجعل من كتابة الكود والتعديل عليه أمر في غاية السهولة.
ولعمل ملف جديد على جهازك أو حتى على مساحتك بحساب جيت هب عليك الضغط على الثلاثة شرطات أعلى يسار الشاشة ومنها تقوم بالضغط على خيار File ومنها تضغط على خيار New File لتكتب بعدها إسم الملف ولا تنسى الإمتداد مثل .html وبعدها تحدد هل الملف سيكون على حسابك بجيت هب أو على جهازك الكمبيوتر وتحدد مكانه من زرار Show Local وبعدها تبدأ في العمل وكتابة الأكواد وأما عن التعديل على الأكواد بملف ما فبنفس الأمر ونفس الطريقة ولكن بدلاً من إختيار New File ستقوم بإختيار Open File وبعدها تحدد الملف من جهازك أو من الملفات التي قمت بتخزينها على حسابك بجيت هب سابقاً.
ولتغيير ثيم أو شكل المحرر للشكل التقليدي الداكن بإستايل فيجوال استوديو كود وهو الإستايل الأشهر والمريح للعين في حالة الفترات الطويلة فقط عليك الضغط على علامة الترس أسفل يسار الشاشة ومنها نقوم بالضغط على خيار Themes ومنها نقوم بإختيار Color Theme وبعدها نختار خيار Dark (Visual Studio) وهو الإستايل الأفضل وأنصحك به جداً لأنه الأشهر والأكثر تناسق وسهولة بالألوان والشكل العام.
الأمر بسيط عليك بعد كل تعديل أن تقوم بعمل رفريش للصفحة التي تعدل بأكوادها والتي تكون قد قمت بفتحها على المتصفح بجانب محرر الأكواد الأونلاين لتلاحظ التغييرات لحظة بلحظة حتى تتراجع عن التغيير أو تكمل عليه وتجد المحرر لا يقطع الأكواد في الحالة الإفتراضية بل يكملها لتقوم بسحب الأسكرول بالأسفل يميناً ويساراً وهو أمر بالنسبة لي غير مريح وأرجح قطع الأكواد لكي يتم ترتيبها كاملة أمامي بدون سحب الأسكرول يميناً ويساراً ويمكن عمل ذلك من خلال الإختصار Alt + Z أو من خلال القائمة ثلاثة شرطات الموجودة بأعلى يسار المحرر ومنها نختار View ثم نجد إختيار قطع الأكواد لعرضها كاملة دون وجود إسكرول سفلي لنقوم بإختيارها وهو الخيار قبل الأخير بإسم Word Warp وبهذا أضمن لك أنسب وأفضل شكل ممكن للتعامل مع الأكواد بكل سهولة وأريحية.
الأمر سيستغرق منك بعض الوقت حتى تتأقلم على محرر الأكواد الأونلاين وخصائصه وطريقة العمل عليه ولكن الأمر يستحق حيث أن محرر الأكواد فيجوال استوديو كود هو الأن الأهم والأشهر والذي يعمل به الغالبية العظمى من المبرمجين ومطوري المواقع لذا فهو محرر أكواد لديه دعم وتطوير وإضافات كثيرة جداً فمابالك أن يكون لديك كل ذلك على حسابك الجيت هب لتفتح المحرر الخاص بك بالتخصيص الذي أردته من أي متصفح وأي جهاز كمبيوتر أو حتى موبايل.
وعند فتح أي ملف من على جهاز الكمبيوتر الخاص بك لتعديل أكواده أو حتى عمل ملف جديد لكتابة الكود فيه ستظهر لك تنبيهين الأول عليك فيه إعطاء الصلاحية للمحرر بفتح وقراءة الملف وذلك بالضغط على زرار Edit file وأما عن التنبيه الأخر فهو لإعطاء الصلاحية للمحرر لحفظ التغييرات على الملف وذلك بالضغط على زرار Save changes بعدها يمكنك العمل على الملف وتعديله بدون أية مشكلات بخصوص صلاحية المحرر لفتح الملف والتعديل عليه وحفظ التعديلات بعد ذلك وبدون تلك الصلاحيات لن يتمكن المتصفح والمحرر من فتح الملف والأكواد والتعديل عليها وحفظها بالملف مرة أخرى.
المحرر بشكله الإفتراضي يقوم بحفظ التغييرات تلقائياً وإن أردت تعطيل تلك الخاصية الهامة وإن كنت لا أنصح بذلك عليك الدخول على الثلاثة شرطات الموجودة أعلى يسار المحرر وتضغط عليها ثم تقوم بإختيار القائمة File ومنها تقوم بالضغط على الخيار Auto Save لتزيل علامة صح من عليها وتعطل تلك الميزة إن أردت ذلك.
ومن المميزات التي تجعله الأفضل هي ملاحظة الكود الخاص بك وتنبيهك لمكان الخطأ بالكود بالظبط وقت عمل الخطأ لتكون دائماً متيقظ ولا يفسد الكود منك ليس هذا وفقط بل وعند كتابة أي حرف فقط من أي وسم أو حتى كلاس أو أي دي يقترح لك كل الوسوم الممكنة التي تبدأ بذلك الحرف وكذلك جميع الكلاسات أو الأيديهات الموجودة بهذا الملف.
هذا غير توضيح أكواد الألوان وإمكانية تغييرها بشكل سهل وبسيط وسريع ليكون بالفعل قد تفوق على جميع محررات الأكواد الأخرى وكل ذلك يمكن عمله بالمحرر أونلاين دون أي تحميل أو إنتظار تحديث أو أية مشاكل أخرى قد تحدث معك.
الخلاصة
لكي تستطيع الخروج بأفضل النتائج الممكنة بعملك سواء تطوير مواقع الويب أو تعديل ملفات الموقع وبعض الأكواد يجب عليك أن تمتلك أقوى وأفضل الأدوات التي تمكنك من ذلك بكل قوة وإحتراف ومع فيجوال استوديو كود أونلاين من موقع جيت هب أصبح معك أقوى أداة مجانية إحترافية أونلاين للقيام بتلك المهمة من كتابة الأكواد البرمجية والتعديل عليها بأفضل وأسهل الطرق الممكنة بل وكمية إضافات لن تجدها بأي محرر أكواد أخر.
