تكوين VS Code لتطوير Vue

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


يعد Visual Studio Code أحد أكثر برامج تحرير الأكواد استخدامًا في العالم حاليًا. لدى المحررين ، مثل العديد من منتجات البرامج ، دورة. بمجرد أن كان TextMate هو المفضل لدى المطورين ، فقد كان Sublime Text ، والآن أصبح VS Code.

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

أحد هذه المكونات الإضافية هو أداة رائعة يمكن أن تساعدنا مطوري Vue.js.

فيتور

تسمىفيتور، إنه يتمتع بشعبية كبيرة ، مع أكثر من 3 ملايين عملية تنزيل ، ويمكنك العثور عليهفي Visual Studio Marketplace.

Vetur marketplace page

تثبيت Vetur

سيؤدي النقر فوق الزر تثبيت إلى تشغيل لوحة التثبيت في رمز VS:

Install Vetur in VS Code

يمكنك أيضًا فتح الامتدادات في VS Code والبحث عن "vetur":

Search vetur in extensions

ماذا يوفر هذا الامتداد؟

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

يوفر Vetur تسليط الضوء على بناء الجملة لجميع ملفات التعليمات البرمجية المصدر Vue الخاصة بك.

بدون Vetur ، سيتم عرض ملف .vue بهذه الطريقة بواسطة VS Code:

Vue file without Vetur

مع تثبيت Vetur:

Vue file with Vetur

يمكن لـ VS Code التعرف على نوع الكود الموجود في ملف من امتداده.

باستخدام Single File Component ، يمكنك مزج أنواع مختلفة من التعليمات البرمجية داخل نفس الملف ، من CSS إلى JavaScript إلى HTML.

لا يمكن لـ VS Code افتراضيًا التعرف على هذا النوع من المواقف ، ويسمح Vetur بتوفير تمييز بناء الجملة لكل نوع من التعليمات البرمجية التي تستخدمها.

يتيح Vetur الدعم ، من بين أمور أخرى ، لـ

  • HTML
  • CSS
  • JavaScript
  • الصلصال
  • هامل
  • SCSS
  • PostCSS
  • ساس
  • قلم
  • تيبسكريبت

المقتطفات

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

يوفر Vetur VS Code القدرة على استخدام مقتطفاتك المفضلة في مكونات ملف واحد.

التحسس الذكي

تم تمكين IntelliSense أيضًا بواسطة Vetur ، لكل لغة مختلفة ، مع الإكمال التلقائي:

Autocomplete

سقالات

بالإضافة إلى تمكين المقتطفات المخصصة ، يوفر Vetur مجموعة المقتطفات الخاصة به. يقوم كل واحد بإنشاء علامة محددة (قالب أو نص أو نمط) بلغته الخاصة:

  • vue
  • template with html
  • template with pug
  • script with JavaScript
  • script with TypeScript
  • style with CSS
  • style with CSS (scoped)
  • style with scss
  • style with scss (scoped)
  • style with less
  • style with less (scoped)
  • style with sass
  • style with sass (scoped)
  • style with postcss
  • style with postcss (scoped)
  • style with stylus
  • style with stylus (scoped)

إذا كنت تكتبvue، ستحصل على حزمة بداية لمكون أحادي الملف:

<template>

</template>

<script> export default {

} </script>

<style>

</style>

الآخرون محددون ويقومون بإنشاء كتلة واحدة من التعليمات البرمجية.

ملاحظة: (محدد النطاق) يعني أنه ينطبق على المكون الحالي فقط

إيميت

إيميت، محرك اختصارات HTML / CSS الشهير ، مدعوم افتراضيًا. يمكنك كتابة أحد اختصارات Emmet والضغط علىtabسيقوم VS Code تلقائيًا بتوسيعه إلى مكافئ HTML:

Emmet support

الفحص والتحقق من الأخطاء

يتكامل Vetur معESLint، من خلالالبرنامج المساعد VS Code ESLint.

ESLint configuration

ESLint at work

تنسيق الكود

يوفر Vetur دعمًا تلقائيًا لتنسيق التعليمات البرمجية ، لتنسيق الملف بأكمله عند الحفظ (بالاشتراك مع ملف"editor.formatOnSave"إعداد رمز VS.

يمكنك اختيار تعطيل التنسيق التلقائي لبعض اللغات المحددة عن طريق تعيين ملفvetur.format.defaultFormatter.XXXXXإلىnoneفي إعدادات VS Code. لتغيير أحد هذه الإعدادات ، ما عليك سوى البدء في البحث عن السلسلة ، وتجاوز ما تريده في إعدادات المستخدم (اللوحة اليمنى).

تدعم معظم اللغات الاستخدامأجملللتنسيق التلقائي ، أداة أصبحت معيارًا صناعيًا.

يستخدم تكوين أجمل لتحديد تفضيلاتك.

تحميل مجانيكتيب Vue


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