كيفية إعداد VSCode لتحسين الإنتاجية

تطورت برامج تحرير الشفرات على مر السنين. قبل بضع سنوات ، لم يكن هناك رمز Visual Studio (رمز VS). ربما كنت تستخدم Sublime Text أو Atom أو Bracket ، إلخ. ولكن مع إصدار VS Code ، أصبح محرر الأكواد المفضل لمعظم المطورين.

لماذا كود VS؟

المطورين يحبون ذلك بسبب

  • إنه قابل للتخصيص
  • سهولة التصحيح
  • ايميت
  • ملحقات
  • بوابة التكامل
  • محطة متكاملة
  • التحسس
  • Theming والمزيد ...

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

طرفية

يمكنك إعداد الجهاز الطرفي الخاص بك لاستخدام iTerm2 و ZSh وأن يكون لديك إعداد طرفي VS Code لاستخدام ذلك.

بعد تكوين Zsh ، شغّل المحطة الطرفية المدمجة VS Code> New Terminaland قم بتشغيل الأمر

مصدر ~ / .zshrc

أو

. ~ / .zshrc

لتنفيذ محتوى ملف التكوين .zshrc في shell.

الخط

FiraCode تبدو باردة بسبب دعم الحروف المركبة. قم بتنزيل FiraCode وتثبيته ، ثم إضافته إلى ملف settings.json.

"editor.fontFamily": "Fira Code" ،
"editor.fontLigatures": صحيح ،

الانطلاق من سطر الأوامر

يبدو إطلاق VS Code من الجهاز رائعًا. للقيام بذلك ، اضغط على CMD + SHIFT + P ، اكتب shell command ، وحدد Install code command في المسار. بعد ذلك ، انتقل إلى أي مشروع من المحطة الطرفية واكتب الرمز. من الدليل لبدء المشروع باستخدام VS Code.

ترتيب

يتم وضع تكوينات رمز VS غير المحددة لمساحة العمل ضمن settings.json. يمكنك تكوين رمز VS ليناسب تفضيلاتك.

لتشغيل الإعدادات. اضغط على

CMD + ،

انسخ والصق الكود أدناه في ملف settings.json:

{
    "editor.multiCursorModifier": "ctrlCmd" ،
    "editor.formatOnPaste": صحيح ،
    "editor.wordWrap": "bounded"،
    "editor.trimAutoWhitespace": صحيح ،
    "editor.fontFamily": "Fira Code" ،
    "editor.fontLigatures": صحيح ،
    "editor.fontSize": 14 ،
    "editor.formatOnSave": صحيح ،
    "files.autoSave": "onFocusChange" ،
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    }،
    "eslint.autoFixOnSave": صحيح ،
    "eslint.validate": [
        "جافا سكريبت"،
        "javascriptreact"
    ]،
    "javascript.validate.enable": صحيح ،
    "git.enableSmartCommit": صحيح ،
    "files.trimTrailingWhitespace": true ،
    "editor.tabSize": 2 ،
    "gitlens.historyExplorer.enabled": صحيح ،
    "diffEditor.ignoreTrimWhitespace": false،
    "workbench.sideBar.location": "right" ،
    "explorer.confirmDelete": false ،
    "javascript.updateImportsOnFileMove.enabled": "دائمًا" ،
}

ملحقات

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

للوصول إلى هذه الملحقات ،

  • انتقل إلى عرض -> ملحقات
  • البحث عن ملحقات في السوق
  • انقر فوق تثبيت

1. استيراد السيارات

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

2. أضف jsdoc التعليقات

هذا يضيف كتلة التعليقات على الكود. لاستخدامها ، قم بتمييز السطر الأول من الوظيفة ، واضغط على CMD + SHIFT + P وحدد إضافة تعليقات وثيقة.

3. ESDoc MDN

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

// mdn [object]. [method]؛

4. المغلق نظرة خاطفة

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

5. GitLens

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

6. ESLint

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

لتثبيت ESLint محليًا ، قم بتشغيل

npm تثبيت eslint

أو على الصعيد العالمي باستخدام

npm install -g eslint

ستحتاج أيضًا إلى إنشاء ملف تكوين .eslintrc. إذا قمت بتثبيت ESLint محليًا ، فقم بتشغيل

./node_modules/.bin/eslint - init

أو

eslint -

للتثبيت العالمي.

7. المصحح لكروم

يتيح لك هذا تصحيح شفرة JavaScript الخاصة بك مباشرةً من متصفح Google Chrome

8. جوجل الخطوط

أصبحت إضافة خطوط Google أسهل مع هذا الامتداد. لم تعد بحاجة إلى البحث عن الخطوط في المتصفح. للوصول إلى قائمة الخطوط ، اضغط على CMD + SHIFT + P وابحث عن متابعة خطوط Google.

9. تودو تسليط الضوء

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

10. عامل الميناء

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

اضغط على CMD + SHIFT + P وابحث عن إضافة ملفات Docker إلى مساحة العمل.

11. كود التدقيق الإملائي

هذا مفيد في تحديد الأخطاء المطبعية داخل قاعدة البيانات.

12. تكلفة الاستيراد

تُظهر تكلفة الاستيراد تأثير الحزم المستوردة داخل الكود. يساعد في قياس اختناقات الأداء.

13. HTMLHint

يقوم هذا الملحق بالتحقق من صحة HTML الخاص بك مما يساعدك في كتابة التعليمات البرمجية المتوافقة مع المعايير.

14. الطاووس

يمنحك هذا الملحق القدرة على تغيير لون مساحة العمل الخاصة بك. إنه مثالي عندما يكون لديك مثيلات VS Code متعددة وتريد تحديد مثيل معين بسرعة.

بعد تثبيت Peacock ، انقر على أيقونة الإعدادات> الإعدادات ، واختر علامة تبويب إعدادات مساحة العمل ، وانقر على {} والصق الكود أدناه.

{
    "workbench.colorCustomizations": {
        "activityBar.background": "# e90b8d" ،
        "activityBar.foreground": "#fff" ،
        "activityBar.inactiveForeground": "# b5b5b5" ،
    }،
    "الطاووس. تتأثر المكونات": [
        "activityBar"
    ]
}

يمكنك أيضًا إضافة titleBar و statusBar إلى المتضررين وإضافة تخصيصات اللون لهم في قسم تخصيصات اللون.

لاستخدام أحد الألوان الافتراضية ، اضغط على CMD + SHIFT + P ، اكتب الطاووس وحدد المظهر المفضل لديك. هذا يتجاوز إعدادات اللون في ملف settings.json المحدد لمساحة العمل هذه.

15. أجمل

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

تحقق من الأشياء الرائعة التي يمكنك القيام بها باستخدام Visual Studio Code هنا.

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

أيضا ، تحقق من بلدي بلوق لمزيد من المقالات.