الخارقة السري رمز VS

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



لقد أعددت مجموعة صغيرة من النصائح والحيل والإضافات المفيدة لمطور الويب الحديث.

تحسين المظهر

1. موضوع المواد والرموز

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

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



2. وضع زين مع توسيط

ربما تعرف بالفعل وضع العرض Zen ، والمعروف أيضًا باسم Distraction Free View (بالنسبة لأولئك الذين يعرفون نص Sublime) ، حيث يتم حذف كل شيء (باستثناء الرمز) بحيث لا يصرف الانتباه عن محرر الشفرة. هل تعلم أنه يمكنك توسيط الموقع من أجل قراءة الرمز ، كما لو كنت تستخدم عارض PDF؟ يساعد هذا في التركيز على الوظائف أو تعلم رمز شخص آخر.

وضع Zen : [عرض> المظهر> تبديل وضع Zen]

تخطيط المركز : [عرض> المظهر> تبديل التخطيط المركزي ]



3. الخطوط مع الأربطة

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



حاول استخدام كود فيرا . إنه مصدر رائع ومفتوح.

بحيث يمكنك تغيير الخط في VSCode بعد تثبيته:

"editor.fontFamily": "Fira Code", "editor.fontLigatures": true 

4. قوس قزح المسافة البادئة

المسافة البادئة مع الاسلوب. يقوم هذا الامتداد بتلوين المسافة البادئة للنص ، مع تبديل أربعة ألوان مختلفة في كل خطوة.



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

 "indentRainbow.colors": [ "rgba(16,16,16,0.1)", "rgba(16,16,16,0.2)", "rgba(16,16,16,0.3)", "rgba(16,16,16,0.4)", "rgba(16,16,16,0.5)", "rgba(16,16,16,0.6)", "rgba(16,16,16,0.7)", "rgba(16,16,16,0.8)", "rgba(16,16,16,0.9)", "rgba(16,16,16,1.0)" ], 

5. وضع شريط العنوان

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



يتم ذلك عن طريق تحرير إعدادات شريط العنوان في إعدادات مساحة العمل لكل مشروع تريد فيه استخدام ألوان مختلفة.

تسريع كتابة التعليمات البرمجية

1. العلامات

إذا كنت لا تعرف Emmet ، فأنت على الأرجح تحب الكتابة. يتيح لك Emmet كتابة رمز مختصر والحصول على العلامات المناسبة. يتم ذلك عن طريق تحديد مجموعة من التعليمات البرمجية وإدخال الأمر التفاف مع اختصار ، والذي قمت بربطه باستخدام shift + alt + .

نلقي نظرة.



تخيل أنك تريد التفاف كل شيء ، ولكن كخطوط منفصلة. يمكنك استخدام التفاف مع خطوط فردية ومن ثم إدراج * بعد الاختصار على سبيل المثال div*

2. الرصيد الداخل والخارج

أوصي لمشاهدة vscodecandothat.com

يمكنك تحديد علامة كاملة في VS Code باستخدام أوامر balance inward balance outward ، balance outward المفيد ربط هذه الأوامر باختصارات لوحة المفاتيح ، مثل Ctrl+Shift+Up Arrow لـ Balance Outward و Ctrl+Shift+Down Arrow لـ Balance Inward.



3. Turbo Console.log ()

لا أحد يحب طباعة وظائف طويلة مثل console.log (). هذا أمر مزعج حقًا إذا كنت تريد إخراج شيء بسرعة ، راجع القيمة ومتابعة كتابة التعليمات البرمجية.

يمكنك القيام بذلك باستخدام ملحق سجل وحدة التحكم Turbo . يتيح لك تسجيل أي متغير في السطر أدناه باستخدام بادئة تلقائية تتبع بنية الرمز. يمكنك أيضًا إلغاء تعليق / تعليق alt+shift+u/alt+shift+c وحدة التحكم بأكملها بعد إضافة الامتداد.



4. خادم لايف

هذا امتداد رائع يساعد في تشغيل خادم محلي مع وظيفة إعادة تحميل مباشرة للصفحات الثابتة والديناميكية. لديه دعم ممتاز للوظائف الأساسية مثل: HTTPS و CORS وعناوين المضيف المحلي المخصصة والمنفذ.

يمكنك تنزيله من هنا .



5. نسخ لصق مع مؤشرات متعددة

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



6. فتات الخبز والخطوط العريضة

تعرض ميزة فتات الخبز (Breadcrumbs) الموقع الحالي وتتيح لك التنقل بسرعة بين الأسماء والملفات. لبدء استخدام Breadcrumbs ، قم بتمكينه باستخدام الأمر View> Toggle Breadcrumbs أو المعلمة breadcrumbs.enabled .

عرض المخطط التفصيلي هو قسم منفصل في أسفل شجرة Explorer. عند التوسيع ، يتم عرض شجرة اسم المحرر النشط حاليًا.

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

الخارقة الأخرى

الحيل الصغيرة التي تغير كل شيء

1. رمز CLI

يحتوي VS Code على واجهة سطر أوامر قوية تتيح لك التحكم في إطلاق المحرر. يمكنك فتح الملفات وتثبيت الامتدادات وتغيير لغة العرض وعرض تشخيصات باستخدام معلمات سطر الأوامر (رموز التبديل).



تخيل أنه ليس لديك سوى مستودع git clone <repo-url> وتريد استبدال المثيل الحالي لرمز VS الذي تستخدمه. code. -r code. -r سوف تفعل هذا دون الحاجة إلى مغادرة CLI.

2. Polacode

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



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

3. كوكا (JS / TS ScratchPad)

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



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

يمكن أن يساعدك أيضًا على تعلم ميزات المكتبة مثل Lodash أو MomentJS قبل أن تصل إلى الاستخدام الفعلي.

4. واك تايم

هل تعتقد أن أصدقائك تقضي وقتًا طويلاً في البرمجة؟ WakaTime هو امتداد يساعدك على تسجيل وتخزين المقاييس والتحليلات المتعلقة بنشاطك. أخبرهم أن 10 ساعات في اليوم ليست أكثر من اللازم.





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

5. VSCode هاكر تايبر

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

جلبت Jani Eväkallio هذا التمديد إلى VS Code. سيساعدك هذا على تسجيل وتشغيل وحدات الماكرو (الرمز المكتوب في المحرر الخاص بك) ، مما يجعلك أكثر تركيزًا عند الكتابة للجمهور.

6. استبعاد المجلدات

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

لإخفاء node_modules يمكنك القيام بذلك:

1. انتقل إلى ملف> تفضيلات> إعدادات (أو في Mac Code> تفضيلات> إعدادات )
2. البحث عن files.exclude في الإعدادات
3. حدد إضافة قالب وأدخل **/node_modules
4. فويلا! اختفت node_modules من شجرة المستكشف

كانت هذه الخارقة بلدي كيفية كتابة التعليمات البرمجية حتى أفضل. مشاركة لك في التعليقات.