كيفية استخدام Visual Studio Code

يعد Visual Studio Code ، VSCode for friends ، محررًا قويًا بشكل لا يصدق يزداد شعبيته بشكل كبير. اكتشف السبب ، وخصائصه الرئيسية للمطورين

مقدمة

منذ البداية والمحررين وحش غريب. يدافع بعض الناس بقوة عن اختيارهم للمحرر. في عالم Unix لديك هؤلاءEmacsضدvi"الحروب" ، وأنا أتخيل نوعًا مالماذا ايتم قضاء الكثير من الوقت في مناقشة مزايا أحدهما مقابل الآخر.

لقد استخدمت الكثير من المحررين و IDEs في السنوات القليلة الماضية. أستطيع أن أتذكر TextMate و TextWrangler و Espresso و BBEdit و XCode و Coda و Brackets و Sublime Text و Atom و vim و PHPStorm. يكمن الاختلاف بين IDE والمحرر في الغالب في مجموعة الميزات والتعقيد.

أفضل المحرر على IDE إلى حد كبير ، لأنه أسرع وأقل عائقًا في الطريق.

في الأشهر الـ 12 الماضية كنت أستخدم VS Code ، محرر Open Source من Microsoft ، وسرعان ما أصبح المحرر المفضل لدي على الإطلاق.

هل يجب أن أتحول إلى رمز VS؟ و لماذا؟

إذا كنت تبحث عن اقتراحات لاستخدامها أم لا ، دعني أقولنعم، يجب عليك التبديل إليه من أي محرر آخر تستخدمه الآن.

يعتمد هذا المحرر على عقود من الخبرة في التحرير من Microsoft.

رمز المحرر مفتوح المصدر بالكامل ، ولا يلزم الدفع مقابل استخدامه.

يستخدمإلكترونكقاعدة لها ، مما يتيح لها أن تكون عبر الأنظمة الأساسية وتعمل على أنظمة Mac و Windows و Linux. تم إنشاؤه باستخدام Node.js ، ويمكنك توسيعه باستخدام JavaScript (مما يجعله مكسبًا لجميع مطوري JavaScript).

إنهسريع، هو أسرع محرر استخدمته بعد Sublime Text.

لقد نال حماس المجتمع: هناك الآلاف منملحقات، وبعض المسؤولين ، وبعضها من صنع المجتمع ،استطلاعات الرأي الفائزة.

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

ابدء

الصفحة الرئيسية لبرنامج Visual Studio Code على الإنترنت هيhttps://code.visualstudio.com/.

انتقل إلى هذا الموقع لتنزيل أحدث إصدار ثابت من المحرر.

VS Code site

تعتمد عملية التثبيت على النظام الأساسي ، ويجب أن تعتاد عليها.

عند بدء تشغيل المحرر لأول مرة سترى شاشة الترحيب

Welcome screen for VS Code

يوجد شريط أدوات على اليسار به 5 رموز. يتيح ذلك الوصول إلى:

  • مستكشف الملفات
  • بحث
  • التحكم في المصدر
  • المصحح
  • التمديدات

إكسبلورر

لنبدأ الاستكشاف مع المستكشف (يقصد التورية).

VS Code Explorer

اضغط على زر "فتح مجلد" في الشريط الجانبي ، أو على ملفOpen folder...الارتباط في صفحة الترحيب. سيؤدي كلاهما إلى تشغيل عرض منتقي الملفات.

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

سيعرض VS Code محتوى المجلد في طريقة العرض الخاصة بك:

Opened folder

على اليمين ، يُظهر العرض الفارغ بعض الأوامر لإجراء بعض العمليات السريعة واختصار لوحة المفاتيح الخاصة بهم.

إذا حددت ملفًا على اليسار ، فسيتم فتح هذا الملف على اللوحة الرئيسية:

Files list

وإذا بدأت في تعديله ، فستظهر نقطة بجوار اسم الملف في علامة التبويب ، وفي الشريط الجانبي أيضًا:

Editing file

الضغطCMD+Pسيُظهر لك منتقي ملفات سريعًا لنقل الملفات بسهولة في المشاريع الكبيرة:

Quick file picker

يمكنك إخفاء الشريط الجانبي الذي يستضيف الملف باستخدام الاختصارCMD+B.

ملاحظة: أنا أستخدم اختصارات لوحة مفاتيح Mac. في معظم الأوقات ، في نظامي التشغيل Windows و Linux ، تقوم فقط بتغيير CMT إلى CTRL وهو يعمل ، ولكن ليس دائمًا. اطبع ملفمرجع اختصارات لوحة المفاتيح.

الرمز الثاني في شريط الأدوات هو "بحث". يؤدي النقر فوقه إلى إظهار واجهة البحث:

Search

يمكنك النقر فوق الرموز لجعل حالة البحث حساسة ، ولمطابقة الكلمات بأكملها (وليس السلاسل الفرعية) ، واستخدام تعبير عادي لسلسلة البحث.

لإجراء البحث ، اضغط علىenter.

يؤدي النقر فوق الرمز ▷ الموجود على اليسار إلى تمكين أداة البحث والاستبدال.

يؤدي النقر فوق النقاط الثلاث إلى إظهار لوحة تتيح لك فقط تضمين نوع معين من الملفات واستبعاد الملفات الأخرى:

Search and replace

التحكم في المصدر

يتم تمكين علامة التبويب "التحكم بالمصدر" بالنقر فوق الرمز الثالث في شريط الأدوات.

Source control

يأتي VS Code مع دعم Git خارج الصندوق. في هذه الحالة ، لم يتم تهيئة التحكم بالمصادر للمجلد الذي فتحناه.

يتيح لنا النقر فوق الرمز الأول في الأعلى ، مع شعار Git ، تهيئة مستودع Git:

Git repo is initialized

الUبجانب كل ملف يعني أنه تم تحديثه منذ آخر التزام (نظرًا لأننا لم نقم بأي التزام في المقام الأول ، يتم تحديث جميع الملفات).

قم بإنشاء الالتزام الأول عن طريق كتابة رسالة نصية والضغط علىCmd-Enter، أو النقر فوق الرمز ✔︎ في الأعلى.

First commit

عادةً ما أقوم بتعيين هذا على تنظيم التغييرات تلقائيًا عندما أقوم بتنفيذها.

توفر أيقونة النقاط الثلاث ، عند النقر عليها ، الكثير من الخيارات للتفاعل مع Git:

Git options

المصحح

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

ملحقات

الرمز الخامس يقودنا إلى الامتدادات.

Extensions

الامتدادات هي ميزة قاتلة من VS Code.

يمكنهم توفير الكثير من القيمة التي ستنتهي بالتأكيد باستخدام الكثير منها.

لدي الكثير من الملحقات المثبتة.

شيء واحد يجب تذكره هو أن كل ملحق تقوم بتثبيته سيؤثر (أكثر أو أقل) على أداء المحرر الخاص بك.

يمكنك تعطيل ملحق تقوم بتثبيته ، وتمكينه فقط عندما تحتاج إليه.

يمكنك أيضًا تعطيل ملحق لمساحة عمل معينة (سنتحدث عن مساحات العمل لاحقًا). على سبيل المثال ، لا تريد تمكين امتدادات JavaScript في مشروع Go.

توجد قائمة بالامتدادات الموصى بها ، والتي تشمل جميع الأدوات الأكثر شيوعًا.

Recommended extensions

نظرًا لأنني أقوم بتحرير الكثير من ملفات تخفيض السعر لمدونتي ، فإن VS Code يقترح عليmarkdownlint، والذي يوفر فحصًا وفحصًا لغويًا لملفات Markdown.

كمثال ، دعنا نثبته.

أولاً ، أتفقد عدد المشاهدات. إنها 1.2 مليون ، الكثير! والمراجعات إيجابية (4.55). يؤدي النقر فوق اسم الامتداد إلى فتح التفاصيل على اليمين.

Extension details

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

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

markdownlint extension

في الأسفل ، أعرض بعض الإضافات الشائعة التي لا تريد أن تفوتها ، والتي أستخدمها أكثر من غيرها.

المحطة

يحتوي VS Code على محطة طرفية متكاملة.

يمكنك تفعيله من القائمةView ➤ Integrated Terminalأو باستخدامCMD+\"وسيفتح مع غلافك الافتراضي.

The terminal

هذا ملائم للغاية لأنه في تطوير الويب الحديث لديك دائمًا بعضnpmأوyarnالعملية قيد التشغيل في الخلفية.

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

Multiple terminals

لوحة القيادة

لوحة القيادة هي أداة قوية للغاية. يمكنك تمكينه عن طريق النقرView ➤ Command Paletteأو باستخدامCMD+SHIFT+P

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

العمليات الشائعة التي أجريها هي:

  • الملحقات: تثبيت الملحقات
  • التفضيلات: سمة اللونلتغيير سمة اللون (أحيانًا أتغير من الليل إلى النهار)
  • تنسيق المستند، والتي تعمل على تنسيق التعليمات البرمجية تلقائيًا
  • قم بتشغيل الكود، والذي يوفره Code Runner ، وينفذ الأسطر المميزة لجافا سكريبت

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

تذكر عندما كتبتCMD+Pلرؤية قائمة الملفات ، من قبل؟ هذا اختصار لميزة محددة في لوحة القيادة. وهناك آخرون:

  • Ctrl-Shift-Tabيظهر لك الملفات النشطة
  • Ctrl-Gيفتح لوحة الأوامر للسماح لك بإدخال رقم سطر للانتقال إليه
  • CMD+SHIFT+Oيعرض قائمة الرموز الموجودة في الملف الحالي

ما هي الرموزنكونيعتمد على نوع الملف. في JavaScript ، قد تكون هذه فئات أو وظائف. في Markdown ، عناوين الأقسام.

ثيمات

يمكنك تبديل سمة اللون المستخدمة من خلال النقرCMD-k+CMD-t، أو من خلال استدعاءالتفضيلات: سمة اللونيأمر.

سيظهر لك هذا قائمة السمات المثبتة:

Themes

يمكنك النقر فوق واحد ، أو التنقل باستخدام لوحة المفاتيح ، وسيعرض لك VS Code معاينة. انقر فوق إدخال لتطبيق السمة:

Light Theme

المظاهر هي مجرد ملحقات. يمكنك تثبيت سمات جديدة بالذهاب إلى مدير الإضافات.

ربما يكون أفضل شيء لقابلية الاكتشاف هو الاستخدامموقع السوق.

الموضوع المفضل لدي هوآيو، والذي يوفر أسلوبًا رائعًا لأي وقت من النهار والليل والصباح / المساء وبعد الظهر.

التخصيص

المظهر هو مجرد تخصيص واحد يمكنك إجراؤه.

تعد أيقونات الشريط الجانبي المخصصة لملف جزءًا كبيرًا من تجربة المستخدم الرائعة.

يمكنك تغيير هؤلاء بالذهاب إلىPreferences ➤ File Icon Theme. يأتي Ayu بموضوع الرموز الخاص به ، والذي يتطابق تمامًا مع ألوان السمة:

Ayu Light

يتم حفظ كل تلك التخصيصات التي أجريناها حتى الآن ، السمة وموضوع الرمز ، في تفضيلات المستخدم.

اذهب إلىPreferences ➤ Settings(يمكن الوصول إليه أيضًا عبرCMD-,) لرؤيتهم:

Settings

يُظهر العرض الإعدادات الافتراضية على اليسار ، لسهولة الرجوع إليها ، والإعدادات التي تم تجاوزها على اليمين. يمكنك رؤية اسم السمة وموضوع الرمز الذي قمنا بإعداده ، بتنسيقworkbench.colorThemeوworkbench.iconTheme.

لقد قمت بالتكبير باستخدامCMD-+، وتم حفظ هذا الإعداد أيضًا فيwindow.zoomLevel، لذلك في المرة التالية التي يبدأ فيها VS Code ، يتذكر خياري للتكبير.

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

في معظم الأوقات ، يتم إضافة هذه الإعدادات تلقائيًا عن طريق الامتدادات أو بواسطة VS Code نفسه ، ولكن في بعض الحالات ستقوم بتحريرها مباشرة في هذا المكان.

خيارات تكوين لطيفة

يحتوي VS Code على الكثير من الخيارات. كل شيء قابل للتهيئة بشكل كبير ، وفي بعض الأحيان يكون من الصعب فهمه كله.

يمكنك فتح ملف التكوين JSON باستخدام لوحة الأوامر ، وتحديدOpen Settings (JSON).

بعض خيارات التكوين الرائعة التي قمت بتعيينها في الكود الخاص بي:

خيار وصف
"editor.minimap.enabled": false قم بإزالة الخريطة المصغرة التي تظهر على يمين المحرر
"explorer.confirmDelete": false توقف عن مطالبتك بالتأكيد عندما أريد إزالة ملف (لدي تحكم بالمصادر!)
"explorer.confirmDragAndDrop": false تعطيل تأكيد السحب والإفلات
"editor.formatOnSave": true قم بتنسيق الرمز تلقائيًا عندما أحفظه
"editor.formatOnPaste": true قم بتنسيق الرمز تلقائيًا عندما ألصقه في الكود الخاص بي
"javascript.format.enable": true تفعيل التنسيق لرمز جافا سكريبت
"files.trimTrailingWhitespace": true تقليم المسافات البيضاء في الملفات
"editor.multiCursorModifier": "alt" عند النقر فوق مفتاح Alt والنقر بالماوس ، يمكنني تحديد عدة أسطر
"editor.detectIndentation": true التكيف مع المسافة البادئة للملف ، مفيد عند تحرير كود الأشخاص الآخرين
"editor.quickSuggestionsDelay": 0 اعرض اقتراح الشفرة على الفور ، وليس بعد بضع ثوان

أفضل خط للترميز

انا يعجبنيكود فيرا. إنه مجاني ، ويحتوي على بعض الحروف المركبة الرائعة جدًا ، والتي تحول التراكيب الشائعة مثل!==و=>لأجمل الرموز:

Fira code

قم بتمكينه عن طريق تثبيت الخط وإضافة هذا إلى التكوين الخاص بك:

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

مساحات العمل

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

يمكنك إنشاء مساحة عمل من مشروع موجود بالنقر فوقFile ➤ Save Workspace as...قائمة.

سيتم تمكين المجلد المفتوح حاليًا كمجلد مساحة العمل الرئيسي.

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

بالإضافة إلى وجود إعدادات على مستوى مساحة العمل ، يمكنك تعطيل الملحقات لمساحة عمل معينة.

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

أحد الأسباب الجيدة هو القدرة على الحصول على مجلدات جذر متعددة ومنفصلة. يمكنك استعمال الFile ➤ Add Folder to Workspaceلإضافة مجلد جذر جديد ، والذي يمكن أن يكون موجودًا في أي مكان في نظام الملفات ، ولكن سيتم عرضه مع المجلد الموجود الآخر لديك.

التحرير

التحسس الذكي

عندما تقوم بالتحرير بإحدى اللغات المدعومة (JavaScript و JSON و HTML و CSS و Less و Sass و C # وتيبسكريبت) يحتوي VS Code على IntelliSense ، وهي تقنية تلمح إلى الإكمال التلقائي للوظائف والمعلمات ، أثناء كتابتها.

تنسيق الكود

أمران مفيدان (Format DocumentوFormat Selection) متوفرة في لوحة الأوامر لتنسيق الرمز تلقائيًا. يدعم VS Code حسب الإعدادات الافتراضية التنسيق التلقائي لـ HTML و JavaScript و TypeScript و JSON.

أخطاء وتحذيرات

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

Warnings

هذه كلها تحذيرات أو أخطاء. يمكنك محاولة العثور عليها في الكود ، حيث ترى قطعًا تحتها خط أحمر ، أو يمكنك الضغط أيضًاCMD-Shift-M(أو اخترView ➤ Problems)

View problems

اختصارات لوحة المفاتيح

لقد عرضت عليك الكثير من اختصارات لوحة المفاتيح حتى الآن.

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

خرائط المفاتيح

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

يوفر فريق VS Code خرائط مفاتيح لأشهر المحررين خارج الصندوق: vim و Sublime Text و Atom و IntelliJ و Eclipse والمزيد. وهي متوفرة كمكونات إضافية. عن طريق فتح ملفPreferences ➤ Keymaps Extensionsقائمة.

مقتطفات الشفرة

المقتطفات رائعة جدا.

لكل لغة قد تقوم بالتطوير بها ، هناك ملحقات توفر مقتطفات جاهزة لتستخدمها.

بالنسبة إلى JavaScript / React ، أحدها الشائع هوVS Code ES7 React / Redux / React-Native / JS مقتطفات

أنت تكتب فقطrfeاضغط على TAB وسيظهر هذا في المحرر:

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

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

يمكنك أيضًا تحديد المقتطفات الخاصة بك. انقرPreferences ➤ User Snippetsواتبع التعليمات لإنشاء ملف المقتطفات الخاص بك.

عرض الملحقات

الأمر VS Code CLI

افتح لوحة الأوامر وابحث عن ملفinstall 'code' command in PATHيأمر.

اضغط على Enter وcodeسيكون الأمر متاحًا عالميًا في سطر الأوامر.

يعد هذا مفيدًا جدًا لبدء المحرر وفتح نافذة جديدة بمحتوى المجلد الحالي ، باستخدامcode ..

code -nسيُنشئ نافذة جديدة.

الشيء المفيد الذي لا يُعرف دائمًا هو أن VS Code يمكن أن يُظهر بسرعة الفرق بين ملفين ، باستخدامcode --diff file1.js file2.js.

حل مشكلات وحدة المعالجة المركزية عالية الاستخدام

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

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

المزيد من دروس devtools: