♉️ 👩🏼‍🤝‍👨🏽 👆🏾 Visual Studio Code Code Editor. الدليل الأكثر تفصيلاً لإعداد وتثبيت الإضافات للمبتدئين 🈴 👆🏽 🤞🏿

مجاني ، قوي ، شائع جدًا ، مع مجموعة من الإضافات ، ماذا يمكنني أن أقول ، اختار Facebook نفسه كمحرر رئيسي!

سنركز اليوم على محرر كود Visual Studio Code أو VS Code فقط. سنقوم بتثبيته وتكوينه ، وكذلك استخدام الإضافات التي ستبسط عملنا بشكل كبير.

إذا كان محرر كود Sublime Text 3 أكثر إثارة للاهتمام ، فإن المقالة هنا https://habr.com/en/post/458206/

المحتوى:

حذف

إذا كنت تستخدم VS Code بالفعل ، ولكنك قررت البدء من الصفر ، فسوف أعرض كيفية إزالة البرنامج تمامًا ، بما في ذلك جميع الإعدادات والمكونات الإضافية. بالإضافة إلى حقيقة أنه يجب إزالة البرنامج من لوحة تحكم Windows ، تحتاج أيضًا إلى الانتقال إلى Drive C> Users> اسم المستخدم الخاص بك وحذف مجلد .vscode هنا.

يجب إضافة AppData في شريط المسار ، ثم الانتقال إلى مجلد التجوال وهنا تحتاج إلى حذف مجلد Code.

التركيب

حسنًا ، يمكننا الآن تثبيت البرنامج. انتقل إلى موقع code.visualstudio.com ، قسم التنزيل. هناك إصدار لنظام التشغيل Mac و Linux. أنا مهتم بـ Windows. انقر وتحميل على جهاز الكمبيوتر الخاص بك. بالمناسبة ، موقع البرنامج مفيد للغاية ، لذا أنصحك بدراسته.

يتم تنزيل البرنامج وتشغيل المثبت واتبع التعليمات: قبول وإضافة جميع علامات الاختيار ثم الانتظار حتى يتم تثبيت البرنامج على جهاز الكمبيوتر الخاص بنا.

يعمل على آلة ضعيفة

عندما يتم تثبيت البرنامج ، يمكننا تشغيله. لكنها لن تبدأ على كل جهاز كمبيوتر. والحقيقة هي أن البرنامج كثيف الموارد. لذلك ، على جهاز ضعيف ، يمكنك الحصول على هذه النتيجة: بدلاً من واجهة البرنامج ، وشاشة سوداء ، ويتعرق المعالج بنسبة 100٪. ولكن هناك طريقة للخروج - تحتاج إلى فتح قائمة السياق لاختصار البرنامج وإضافة العلامة التالية في المسار إلى الملف: --disable-gpu

رائع ، الآن سيبدأ البرنامج حتى على الآلة الحاسبة.

إعدادات اللغة

تم إطلاق البرنامج ويمكننا البدء في التعرف عليه. ولتسهيل التعرف ، سأقوم بتثبيت اللغة الروسية. للقيام بذلك ، أنقر على أيقونة الملحقات ، في مجال البحث ، أبدأ في كتابة اللغة الروسية حتى أرى حزمة اللغة الروسية لحزمة Visual Studio Code.

انقر على زر التثبيت. بعد ذلك ، سيطلب منك البرنامج إعادة التشغيل ، قم بذلك. عظيم ، الآن سيكون أكثر وضوحا. ولكن ، إذا كنت تتحدث الإنجليزية ، فإن التبديل إلى اللغة الروسية ليس ضروريًا.

شاشة الترحيب

سأخفي اللوحة الجانبية الآن ، وسوف نعود إليها أكثر من مرة.
أول شيء نراه هو شاشة الترحيب. يوجد عنصر هنا يمكننا من خلاله استيراد جميع الإعدادات والمفاتيح من المحررين المثبتين بالفعل ، على سبيل المثال Vim و Sublime و Atom وغيرها.

سيؤدي ذلك إلى تسريع وتسهيل الانتقال من محرر إلى آخر. ولكن اليوم سنفعل كل شيء من الصفر. علاوة على ذلك ، هناك روابط مفيدة أخرى - معلومات عامة حول الواجهة ، بالإضافة إلى قائمة اختصارات لوحة المفاتيح في شكل مناسب للغاية وأكثر من ذلك بكثير.

أنصحك بدراسة هذه الشاشة ، وعندما لا تكون هناك حاجة إليها في كل مرة تبدأ فيها البرنامج ، تحتاج إلى إلغاء تحديد هذا المربع. لاحقًا ، يمكنك دائمًا الاتصال به من قائمة التعليمات> الترحيب.

واجهة من خارج منطقة الجزاء

كسول جدا للقراءة؟ هنا نسخة الفيديو.

تم عمل جميع الاستعدادات والآن يمكننا التعرف على واجهة البرنامج وفي نفس الوقت نرى ما يمكن لـ VS Code القيام به خارج الصندوق.

نسمي نافذة معلومات الواجهة العامة ونرى العناصر الرئيسية للبرنامج.

أعلاه نرى القائمة. التالي هو واجهة التنفيذ لأي أمر يمكننا دائمًا الاتصال به. المجال العام للمحرر. شريط الإجراءات الأيسر. يوجد أدناه شريط الحالة ، وسنبدأ به. تخبرنا النصائح أن هناك طريقة عرض للأخطاء والتحذيرات. يمكنك استدعاء المحطة المدمجة.

دعونا نفكر في كل شيء بمزيد من التفصيل.

شريط الحالة

مشاكل

على الجانب الأيسر ، ستعرض الأرقام المجاورة للرموز عدد الأخطاء والتحذيرات التي نشأت أثناء تنفيذ التعليمات البرمجية.

لفتح اللوحة ، تحتاج إلى النقر فوق هذه الرموز أو الضغط باستمرار على Ctrl + Shift + M ، هنا سنرى نص رسائل الخطأ.

في اللوحة ، يمكنك تصفية هذه الرسائل أو تصغيرها أو توسيع اللوحة بأكملها لملء الشاشة أو إغلاقها.

وحدة تحكم التصحيح

بالإضافة إلى علامة التبويب الخاصة بإخراج المشكلات في هذه اللوحة ، لا يزال لدينا Code Debugging Console ، وسوف نعود إليها.

استنتاج

سجل الإخراج لجميع برامج وأنظمة المحرر. هنا يمكنك أيضًا تصفية هذا السجل أو مسحه أو حظر تمرير الرسائل أو توسيع اللوحة أو إغلاقها.

طرفية

علامة التبويب الأخيرة في هذه اللوحة هي الطرفية المتكاملة. يمكنك تسميته بالضغط على Ctrl + ` .

في لوحة التحكم ، يمكنك أيضًا إضافة أطراف طرفية ، وتقسيم النافذة إلى عدة أجزاء ، وحذف نافذة المحطة الطرفية ، والتبديل بين نوافذ المحطة الطرفية ، وتحديد الغلاف الافتراضي أيضًا.

على سبيل المثال ، لقد قمت بتثبيت GitBash. عند تحديده ، إضافة نافذة طرفية جديدة ، ستفتح هذه الواجهة لي. تقليديا ، هنا يمكنك توسيع اللوحة إلى ملء الشاشة وإغلاقها.

إشعارات

على اليمين في شريط الحالة ، نرى إشعارات ، وهي الآن ليست هناك. من الممكن أيضًا إرسال تغريدة تحتوي على تعليقات حول البرنامج.

أيضا ، ستظهر العديد من العناصر الأخرى في شريط الحالة.

قائمة السياق

يمكننا أيضًا استدعاء قائمة السياق وإزالة ما لا نستخدمه من هذا الخط. على سبيل المثال ، تغريدة مراجعة لإفساح المجال.

أيضًا في نفس قائمة السياق يمكننا إخفاء هذا الخط تمامًا.

شريط العمل

بشكل افتراضي ، توجد لوحة عمل مع 6 عناصر في الجزء الأيسر من المحرر:

المستكشف ، إنه مدير ملفات مدمج ؛
بحث؛
نظام إدارة مراقبة الإصدار ؛
إطلاق التطبيقات وتصحيحها ؛
المثبت لمختلف الوظائف الإضافية هو محررنا ؛
في الأسفل يوجد ترس ، بالضغط عليه سنرى قائمة بإعدادات البرنامج الرئيسية.

موصل

دعونا نبدأ مع اكسبلورر، يمكن فتحه عن طريق النقر على أيقونة أو باستمرار على مفتاح Ctrl + التحول + E .

من الملائم للغاية أنه عند التمرير فوق الرمز ، يطالبنا المحرر باختصار لوحة المفاتيح.

هنا نرى 3 علامات تبويب رئيسية:

محررين مفتوحين - هنا قائمة بالملفات المفتوحة للتحرير.
تبويب مع المجلدات والمشاريع. الآن ليس لدينا مجلدات مفتوحة.
الهيكل - الآن لا يوجد شيء هنا ، سنعود إليه لاحقًا.

يمكننا بالفعل إغلاق نافذة الترحيب. عندما يتم إغلاق جميع النوافذ ، يعرض المحرر كعبًا حيث يعرض اختصارات لوحة المفاتيح للإجراءات الرئيسية:

دعنا نضيف مجلدًا فارغًا إلى مشروعنا المستقبلي في المحرر. للقيام بذلك ، انقر فوق فتح مجلد أو اسحبه ببساطة إلى هذا الحقل.

الآن لدينا مجلد hello_vscode فارغ ، بالإضافة إلى بعض عناصر التحكم:

إنشاء ملف؛
إنشاء مجلد ؛
تحديث جميع الملفات والمجلدات ؛
طي كل شيء في Explorer.

لنقم بإنشاء بعض الملفات التي نحتاجها للمشروع. انقر فوق إنشاء ملف ، واكتب على سبيل المثال Index.html. بعد ذلك ، يمكننا إنشاء مجلد css وإنشاء ملف style.css فيه. من السهل جدًا استخدام مدير الملفات المدمج.

يمكنك أيضًا استخدام قائمة السياق لإنشاء الملفات والمجلدات. بالإضافة إلى ذلك ، هناك أيضًا ميزات مثيرة للاهتمام ، على سبيل المثال ، إظهار المجلد في مستكشف Windows.

يمكننا الآن الانتقال إلى Index.html وكتابة شيء مثير للاهتمام هناك ، على سبيل المثال ، "Hello VC Code".

تسليط الضوء على تركيب

فقط أريد أن أقول بضع كلمات حول تمييز بناء الجملة - هذه هي قدرة المحرر على التعرف على التعليمات البرمجية وتلوين عناصرها الفردية. عندما فتحنا الملف وبدأنا العمل فيه ، ظهر عنصر html في أسفل شريط الحالة بالإضافة إلى عناصر جديدة أخرى. هذا يعني أن المحرر قد تعرّف على اللغة وسلط الضوء عليها وفقًا لذلك. بالنقر على هذا العنصر ، سنرى قائمة كبيرة من النقاط البارزة للغات المختلفة.

قد لا تتضمن هذه القائمة كل شيء على الإطلاق. على سبيل المثال ، إذا كنا نعمل مع ملف .kit. لنقم بإنشاء index.kit ونسخ الشفرة الخاصة بنا هناك. سنرى أنه لا يوجد تمييز ، وبدلاً من عنصر html ، نرى النص العادي. ماذا تفعل في هذه الحالة؟ نحتاج إلى النقر على نص عادي وهنا لدينا خيار - بدلاً من الاكتشاف التلقائي ، يمكننا محاولة البحث عن الوظائف الإضافية لتمييز بناء الجملة خصيصًا لملفات .kit.

إذا لم يفلح ذلك ، فيمكننا تكوين التعيينات. انقر هنا وحدد لغة تعيين لملفات .kit. في حالتي هو HTML.

الآن جميع ملفات .kit التي سيتعرف عليها البرنامج كملف html ويسلط الضوء عليها وفقًا لذلك. دعونا نعود إلى ملف html الحقيقي الخاص بنا. سنحفظ كل شيء قمنا بتحريره هنا. يمكن رؤية نتيجة العمل من خلال فتح هذا الملف في المتصفح. في علامة تبويب الهيكل ، سنرى ظهور مثل هذا الهيكل الشجري لمستندنا.

هناك ميزة إضافية مفيدة للمستكشف هي قائمة السياق الخاصة به ، حيث يمكننا إظهار أو إخفاء أي علامة تبويب. على سبيل المثال ، سأقوم بإزالة الهيكل وإزالة المحررين المفتوحين.

ونتيجة لذلك ، سيكون لدي مجلد مشروع فقط.

بحث

البحث ( Ctrl + Shift + F ) - الشيء الذي تحتاجه. نكتب كلمة hello ، التي أشرنا إليها في ملف html. وجدها البحث على الفور ، مظللة ، وأظهر في أي ملف. يمكنك استبدال هذه الكلمة على الفور بآخر.

من الملائم لنا أن نظهر كل هذا من خلال النقر هنا على الرمز ، سيتم استبدال الكلمة.

نظام إدارة التحكم في الإصدار

فتح علامة التبويب يمكنك النقر على أيقونة أو باستمرار على مفتاح Ctrl + + التحول إلى G . بالنسبة لأولئك الذين هم على دراية بأنظمة التحكم في الإصدار ، مثل Git ، سيقدر هذه الميزة. بعد ذلك بقليل ، سأوضح كيفية ربط مشروعي المحلي بالمخزن على GitHub.

تصحيح التطبيق

العنصر التالي في شريط الإجراءات هو تصحيح التطبيق. تتيح لنا هذه الأداة ، بشكل مستقل وبمساعدة المكونات الإضافية الخارجية ، تحليل تنفيذ رمز برنامج معين.

على سبيل المثال ، لدينا نوع من كود جافا سكريبت ، ولكي نبدأ التصحيح ، يمكننا النقر على الزر هنا أو الضغط على F5.

سيتم عرض نتيجة التصحيح في اللوحة السفلية ، يمكنك أيضًا تعيين ما يسمى نقاط توقف التعليمات البرمجية والتحرك بينها ، وهو أمر مريح للغاية.

ملحقات

هنا لدينا مستودع كامل من الإضافات والمكونات الإضافية لمحررنا. لقد استخدمنا بالفعل علامة التبويب هذه لتثبيت حزمة اللغة. نضغط على الأيقونة أو نضغط على مجموعة المفاتيح Ctrl + Shift + X سنرى حقل بحث عن الإضافات وثلاث علامات تبويب إضافية:

ممكّنة - يتم عرض جميع الملحقات المثبتة ؛
موصى به
الإضافات المثبتة ولكن معطلة.

في علامة التبويب مع ملحقاتنا المثبتة ، لدينا وصول سريع إليها ، يمكننا أن نرى ، نقرأ بعض المعلومات ، مفاتيح التشغيل السريع ، اكتشف جميع التفاصيل حول هذا الامتداد. أيضا ، يمكن حذفه هنا بالنقر على زر حذف. سنعود إلى الامتدادات ونقوم بتثبيت أفضلها وأكثرها فائدة.

الإعدادات

في لوحة الإجراءات ، لا يزال لدينا عنصر واحد آخر - الترس - قائمة الإعدادات الرئيسية. هنا يمكن أن نطلق عليه لوحة من الأوامر بالضغط هنا أو على السيطرة + + التحول P . سيتم فتح كتلة حيث يمكننا العثور على أي أمر محرر أو مكونات إضافية مثبتة وتنفيذها.

المزيد من اختصارات لوحة المفاتيح. هنا يمكننا تخصيص اختصارات لوحة المفاتيح لدينا للأوامر أو التغيير إلى الموجودة منها. سنعود لهم. مقتطفات التعليمات البرمجية المخصصة ، ما يسمى بالمقتطفات ، هي اختصارات صغيرة ستؤدي إلى جزء التعليمات البرمجية الذي نحتاجه. اليوم سنتعلم كيفية تكوينها. هنا يمكنك تخصيص سمة اللون للبرنامج ، أيقونات للملفات وأكثر من ذلك بكثير.

بعد الانتهاء من شريط الإجراءات ، تجدر الإشارة إلى أنه يمكنك استدعاء آخر علامة تبويب مفتوحة بسرعة باستخدام Ctrl + B. أيضًا ، بإخفاء قائمة السياق ، يمكنك إخفاء عنصر غير ضروري. على سبيل المثال ، سأخفي Start و Debug. في نفس قائمة السياق ، يمكنك إخفاء شريط الإجراءات بالكامل.

منطقة المحرر

كسول جدا للقراءة؟ هنا نسخة الفيديو.

نرى علامات التبويب مع الملفات المفتوحة. يمكن سحبها وإغلاقها. إذا لم يتم حفظ الملف ، فسيعرض مكان الصليب نقطة جريئة كبيرة هنا. بجانب القمة توجد أيقونة النافذة المنقسمة. هناك ملف نشط مفتوح ، انقر على الأيقونة وسيتم نسخه على الجانب.

هناك قائمة إضافية لإدارة جميع الملفات.

أدناه نرى شريط التنقل - مسارات التنقل ، حيث يمكننا التنقل بسهولة في بنية المستند ، وكذلك بين الملفات الأخرى.

المجال العام للرمز - نرى رمز الملف المفتوح نفسه ، وعلى اليمين هناك خريطة مصغرة تسمح لك بالتنقل بسهولة عبر ملف طويل. هناك مساحة صغيرة في منطقة الرمز على اليسار ، لتعيين نقاط التوقف لتصحيح الأخطاء ، هناك ترقيم الأسطر.

بعد ذلك نرى الأسهم ، تظهر عندما تحوم ، وبمساعدتهم يمكنك طي كتلة التعليمات البرمجية بالكامل. تعمل هذه الوظيفة في هذا المحرر مع الذاكرة. يمكنني إغلاق الملف ، حتى إغلاق البرنامج بأكمله ، وعندما أقوم بفتحه مرة أخرى ، ستبقى الكتلة المصغرة مسبقًا أصغر.

ماذا يمكننا تكوين هنا؟

كما أوضحت بالفعل ، يمكن تقسيم نافذة المحرر إلى عدة أجزاء ، وهذا مناسب عند العمل مع ملفات مختلفة. من أجل رؤية خيارات مختلفة ، تحتاج إلى الانتقال إلى عرض> تخطيط المحرر . هناك مجموعة من الخيارات هنا ، على سبيل المثال ، سطرين ، ويمكننا نقل ملف هنا والعمل بهذه الطريقة. هناك أيضًا خيار شبكة 2x2. أي أنه يمكنك العمل في وقت واحد مع 4 ملفات.

يمكنك أيضًا ترتيب الموضع المطلوب للملفات بسرعة عن طريق سحبها وإفلاتها. لقد شكلت على الفور التخطيط الصحيح لنفسي. من الممكن أيضًا تخصيص مظهر منطقة المحرر بالكامل. افتح القائمة> عرض> المظهر .

يوجد أدناه القدرة على ضبط حجم البرنامج بأكمله. لا تخلط مع أحجام الخطوط. من السهل استخدام اختصارات لوحة المفاتيح. على سبيل المثال ، لزيادة العناصر ، اضغط على Ctrl + ، لتقليل - Ctrl- ، لإعادة التعيين - Ctrl + 0 .

يمكنك تحريك شريط الإجراءات من اليسار إلى اليمين ومن ثم سيكون على الجانب الآخر. يمكنك تحديد موضع لوحة شريط الحالة الخاص بنا. من خلال النقر ، سنرى أن اللوحة لن تفتح من الأسفل كما كان من قبل ، ولكن من الجانب. أي أنه من الممكن تكوين كل شيء تقريبًا.

أيضا في هذه الكتلة يمكنك إخفاء أو إظهار عناصر مختلفة. قلت في وقت سابق أنه يمكننا إخفاء سطر الإعلام بالكامل ، وإخفاء شريط الإجراءات تمامًا. في هذه الكتلة يمكننا إعادة كل هذا إلى المكان.

أوضاع الشاشة

يوجد في الجزء العلوي وضع ملء الشاشة عند الضغط على F11 . سيتم إخفاء القائمة العلوية وأزرار إدارة نافذة البرنامج.

محاذاة مركزية للتخطيط. يتم توسيط منطقة الرمز ، يمكنك ضبط العرض. هذا من أجل التركيز بشكل أفضل على التعليمات البرمجية.

يوجد وضع Zen رائع. يخفي جميع العناصر ، حتى علامات تبويب الملف ، نركز على ملف واحد فقط ، على رمز واحد. نحل مهمة صعبة تتطلب أقصى تركيز.

للخروج منه ، اضغط على Escape .

التفاف النص

وعلاوة على ذلك، في القائمة عرض، يمكننا تمكين أو تعطيل التفاف النص، يمكنك القيام بذلك عن طريق الضغط على مفتاح Alt + Z ل . ماذا تعني؟ على سبيل المثال ، لدينا نص طويل جدًا لا يتناسب مع منطقة الرمز ويظهر التمرير الأفقي. إذا كان هذا يبدو غير مريح ، يمكنك الضغط على Alt + Z ؛ سيتم لف كل النص الخاص بنا ليلائم مساحة الرمز.

من الممكن إخفاء أو إظهار خريطة صغيرة ، عناصر تحكم ، أي فتات الخبز. إذا بدت غير ضرورية. هنا يمكنك عرض مسافات غير قابلة للطباعة وأحرف قابلة للطباعة ورسم أحرف تحكم يمكن نسخها من المصدر في النص.

نظام الألوان

يمكننا اختيار أحد السمات المثبتة عن طريق الذهاب إلى Office ، موضوع Color Point. نرى القائمة ومع الأسهم على لوحة المفاتيح يمكننا التنقل بين المواضيع واختيار الموضوع المناسب لأنفسنا. هناك خيارات مظلمة وخفيفة.

إذا لم يكن أي من هذه الموضوعات مناسبًا ، فيمكننا تحديد موضوعنا. للقيام بذلك ، أعود إلى علامة التبويب ملحقات ، في حقل البحث أكتب اسم موضوعي - SpaceOceanKit. أجد ، انقر فوق تثبيت. بعد ذلك ، لدي خيار لاختيار الموضوع وأختاره.

الآن لدي محرر كامل ، بما في ذلك الرمز ، سيبدو مختلفًا. قمت بتعيين موضوعي ، يمكنك تثبيت أي شيء آخر.

مزيج الألوان مهم جدًا للعمل على المدى الطويل مع الشفرة ، وهذا يؤثر على إدراكك وتعبك وصحتك. لذا اختر بعناية موضوعًا لنفسك ولا تنس أخذ فترات راحة.

أيقونات

يمكننا أيضًا تغيير مظهر أيقونات الملفات في مستكشفنا. للقيام بذلك ، انتقل إلى الإدارة> سمة أيقونة الملف ، هنا يمكننا إيقاف تشغيل الرموز تمامًا أو الاختيار من القائمة.

قم أيضًا بتثبيت حزم رمز إضافية. على سبيل المثال ، Matherial Icon Theme.

المعلمات

بالإضافة إلى ذلك ، يمكنك ضبط راحة العمل مع التعليمات البرمجية ومع المحرر ككل في إعدادات البرنامج. للقيام بذلك ، انتقل إلى الإدارة> خيارات أو اضغط مع الاستمرار على Ctrl + ،

يمكن تكوين المعلمات عالميًا ولمشروع معين. هناك الكثير من الإعدادات هنا. سوف نذهب من خلال الرئيسية.

حفظ تلقائي

الخيار المفيد الأول هو حفظ الملف تلقائيًا. للمبتدئين ، خيار رائع للغاية. غالبًا ما يأتي إلي المبتدئين بمشكلة ، "لماذا لا تعمل وظيفتي بالنسبة لي؟" انظر ، ولم يتم حفظ الملف هناك.

لمنع حدوث ذلك ، يمكنك هنا تغيير القيمة إلى واحدة من ثلاثة:

afterDelay - سيتم حفظ الملف بعد بعض التأخير ، والذي يمكن تهيئته على الفور أدناه. إذا حددت هذا الخيار عند تحرير ملف ، فسيتم حفظه على الفور ، ولن تظهر نقطة جريئة حتى.
onfocusChange - سيتم حفظ الملف عندما ننتقل إلى ملف آخر
onWindowChange - عندما ننتقل إلى برنامج مختلف تمامًا ، سيتم حفظ الملف تلقائيًا.

اختر خيارًا مناسبًا لك وانتقل.

عرض الرمز

ستساعدك الخيارات التالية في إعداد عرض كود مريح. هذا هو حجم الخط وعائلة الخط. هنا يمكنك اختيار القيمة التي تناسبك.

أضبط حجم المسافة البادئة عند الجدولة. بشكل افتراضي ، يكون الرقم 4. أما بالنسبة لي ، فالحقل عريض جدًا بعلامة تبويب واحدة ، لذلك أقوم بتغييره إلى 3 ، لذلك يبدو أكثر ضغطًا بالنسبة لي. تشير إلى القيمة التي تناسبك.

في ملف واحد ، يتم عرض المسافات بالنسبة لي ، والنقاط عند الضغط على Tab ، في ملف آخر - رمز علامة التبويب. تعتبر المعلمة Insert Spaces مسؤولة عن هذا الخيار. بشكل افتراضي ، يتم تعيين علامة الاختيار ، أي سيتم عرض المسافات. أريد عرض علامات التبويب الخاصة بي ، لذا سأقوم بإزالة علامة الاختيار.

من أجل تحويل ملف موجود بمسافات ، يمكنك الانتقال إلى شريط الحالة ، والضغط على 4 مسافات وتحديد الخيار تحويل المسافة البادئة إلى خطوات علامة التبويب. وبالتالي يمكننا تحويل الملفات المفتوحة بالفعل.

ويجيب خيار الكشف عن المسافة البادئة عن كيفية تحديد إدراج الأحرف للملفات المفتوحة الجديدة. سأزيل علامة الاختيار لأنني أريد أن تعمل الإعدادات التي تم تكوينها على جميع الملفات.

إخفاء تلميحات الأدوات

في وقت سابق ، أوضحت أنه عندما تحوم فوق عنصر في الكود ، تنبثق تلميحات الأدوات ، غالبًا ما يكون هذا مزعجًا. لإزالة التلميحات ، توجد معلمة Hover Enabled . يمكن إزالة علامة الاختيار وتختفي المطالبات.

ولكن ، إلى جانب هذا ، ستختفي الوظائف التي قد تكون مفيدة.
على سبيل المثال ، في ورقة الأنماط لدينا اللون الأزرق. يتم تمييزه على الفور. إذا تم تشغيل Hover ، فعند التمرير فوق لون ما ، يسقط مثل هذا الشيء:

يمكننا جعله شفافًا ، أو تعيين قيم rgba ، أو حتى تغيير اللون إلى لون آخر. إذا قمنا بإلغاء تحديد خانة الاختيار تمكين Hover ، فستختفي هذه الوظيفة أيضًا.

معلمة Color Decorators هي المسؤولة عن الإخراج ، إذا لم تكن هناك حاجة إليها ، يمكن إزالة علامة الاختيار ولن تكون هناك مربعات لونية.

تكبير عجلة الماوس - من خلال تحديد المربع ، يمكننا تغيير حجم الخط في المحرر عن طريق الضغط مع الاستمرار على Ctrl وتحويل عجلة الماوس .

يتحكم إغلاق المجموعات النشطة في ما إذا كان سيتم إغلاق المجموعة عندما يتم إغلاق علامة التبويب الأخيرة فيها. يمكن تقسيم المحرر إلى أجزاء. بشكل افتراضي ، عند الإغلاق في علامة التبويب الأخيرة ، سيتم إغلاق علامة التبويب بالكامل. في بعض الأحيان يكون هذا غير مريح ، لذلك أقوم بإزالة علامة الاختيار هذه. والآن ، عند إغلاق علامة التبويب الأخيرة ، ستظل المجموعة معي.

التنسيق

المجموعة التالية من الإعدادات مسؤولة عن التنسيق ، والتي تم تضمينها بالفعل في محرر VC Code. ما هو التنسيق؟ على سبيل المثال ، نكتب بنية ، هناك بنية أخرى فيها ، ولكن لسبب ما انتقلت علامة التبويب. عند الضغط على Shift + Alt + F ، سيصطف كل شيء كما ينبغي.

العودة إلى إعداداتنا. هنا يمكننا وضع ثلاث علامات اختيار:

التنسيق عند اللصق - سيتم التنسيق تلقائيًا عند لصق الكود.
التنسيق عند الحفظ - سيتم التنسيق عندما يتم حفظ الملف.
التنسيق عند النوع - سيتم التنسيق تلقائيًا ، أي أننا سنطبع وسيتم تنسيق كل شيء مرة واحدة.

قمت بتعيين علامة اختيار واحدة - التنسيق عند الحفظ.
الآن ، عندما تتوقف علامة التبويب ، لا أهتم ، في وقت حفظ الملف سيكون كل شيء في مكانه.

يمكنك إجراء تعديلات أدق على تنسيق لغة معينة من خلال فهم الوثائق الموجودة على موقع البرنامج. يمكنك أيضًا تثبيت ملحقات إضافية للغة معينة ، بالإضافة إلى العديد من اللغات الأخرى.

لقد عرضت ذلك الجزء من الإعدادات التي أستخدمها بنفسي. يمكنك التعرف على بقية الإعدادات بنفسك. للراحة ، تنقسم الإعدادات هنا إلى فئات. هناك أيضًا فئة من الإعدادات للملحقات المثبتة بالفعل أو تلك التي نقوم بتثبيتها فقط.

للوصول السريع إلى كل ما قمنا بتكوينه ، اضغط باستمرار على Ctrl + Shift + P واكتب في شريط البحثالإعدادات حتى نرى الإعدادات (JSON). نضغط وستظهر إعداداتنا أمامنا ، ويمكنك تغييرها على الفور.

في نفس الملف سنقوم بتكوين الملحق الجديد.

الراحة عند العمل مع البرنامج أمر مهم للغاية ، لأن هذا يؤثر بشكل مباشر على الأداء. والشيء التالي الذي سنفعله هو تثبيت عدد من المكونات الإضافية التي ستساعدنا بشكل كبير في ذلك.

الإضافات

كسول جدا للقراءة؟ هنا نسخة الفيديو.

ايميت

- تم إنشاء هذا البرنامج المساعد بالفعل في محرر VS Code من خارج منطقة الجزاء. في الواقع ، من الصعب اليوم تخيل الحياة بدون إيميت. سرعة فائقة في الكتابة. على سبيل المثال ، كان بفضله أنني أنشأت الرمز الأولي لملف HTML بسرعة كبيرة عن طريق كتابة علامة تعجب فقط والضغط على Tab.

هنا مثال آخر. نحن بحاجة إلى إنشاء div مع فئة الحظر لهذا ، أكتب .block واضغط على Tab. منجز!

أو على سبيل المثال أكثر تعقيدًا - نحتاج إلى إنشاء قائمة نقطية بعشرة عناصر. اكتب ul> li * 10 Tab. منجز!

الأمر نفسه ينطبق على ملفات النمط. على سبيل المثال ، بالنسبة لعلامة النص ، أريد تعيين حجم الخط على 20 بكسل. للقيام بذلك ، اكتب fz20 . بالضغط على Tab ، أحصل على معلمة جاهزة.

يمكنك معرفة المزيد حول ميزات ايميت على هذا add- على و الانترنت .

القصاصات

ولكن من الرائع إنشاء اختصارات مقتطفاتك الخاصة لاستدعاء تلك الشفرة الأخرى بسرعة.
انتقل إلى الإدارة> مقتطفات رمز مخصص . هناك خيار:

إنشاء قصاصات للغة معينة ؛
إنشاء قصاصات لجميع اللغات ، ولكن لمشروع محدد ؛
إنشاء قصاصات عامة لجميع اللغات ولجميع المشاريع.

لنقم بإنشاء واحدة عامة ، هنا تحتاج إلى إدخال اسم قائمة المقتطفات.

اكتب my ، وانقر فوق ، وفتح ملف my.code-snippet-bit. هناك أي معلومات تم التعليق عليها ، بالإضافة إلى مثال. سوف أزعجه. هنا مقتطف لجافا سكريبت.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "