كيفية إعداد ES Lint لرمز Airbnb و Vue JS و VS

الشكل 1.0 - ES Lint ، مساعد التحرش المفيد

تحية الإنسان رمز زبال. اليوم ، سأريكم كيفية الحصول على ES Lint للعمل مع Vue JS. إذا كنت تستخدم Laravel إلى حد ما ، فمن المحتمل أن تكون بيئتك جاهزة للذهاب لهذه التعليمات. إذا كنت تستخدم vue-cli ، فقد تكون احتياجاتك مختلفة ، لكن لا يزال يتعين عليك رؤية بعض المعلومات اللذيذة التي تشبه الكتلة.

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

أولاً ، قم بتثبيت هذه الحزم

نظرًا لأننا نستخدم VS Code اليوم ، فسوف نفتتح فقط المحطة الطرفية المتكاملة. افتح ذلك.

اكتب الآن:

npm $ تثبيت - حفظ ديف بابل- eslint
تثبيت $ npm - حفظ ديف eslint
تثبيت npm $ - -save-dev eslint-config-airbnb-base
$ npm install - حفظ-ديف eslint-plugin-import
تثبيت npm $ - حفظ-ديف eslint-plugin-vue
// المؤيدة للنمط كفاءة
تثبيت npm $ - حفظ-ديف babel-eslint eslint
  • babel-eslint: هذا مطلوب من أجل parserOptions. إنه العمود الفقري المنطقي ل ES Lint للوقوف عليه. يتم استخدامه بشكل مختلف قليلاً عن React ، لذلك عليك الانتباه في هذه المقالة.
  • eslint: هذه هي الحزمة الرئيسية ES Lint.
  • eslint-config-airbnb-base: هذا هو ما يجمعنا على إعدادات رحيق Airbnb. خذ بعين الاعتبار أننا لا نستخدم eslint-config-airbnb. هذا من شأنه تثبيت الحزمة المصممة ليتم استخدامها مع React. إذا قمت بتثبيت ذلك ، فإن برنامج VS Code و ES Lint سيشعران بالامتنان حيال إضافات JSX
  • eslint-plugin-import: هذا مطلوب لقاعدة airbnb. اقرأ مستنداتهم لمزيد من المعلومات. بشكل أساسي ، يسمح لـ ES Lint بالتضايق من عبارات الاستيراد.
  • eslint-plugin-vue: هذا هو البرنامج المساعد الرحيق الذي يسمح لك بالفوز.
مهمل: eslint-plugin-html

تم إهمال eslint-plugin-html لصالح eslint-plugin-vue.

راجع: https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/68

ثانياً ، استخدم إعدادات التكوين هذه

الآن بعد أن قمنا بتثبيت هذا هراء ، يمكننا إنشاء ملف في الدليل الجذر.

  • إنشاء ./.eslintrc.json

بابل-eslint

هنا هو كيفية استخدام React babel-eslint:

"المحلل اللغوي": "babel-eslint"

إليك كيفية استخدام Vue:

"parserOptions": {
    "المحلل اللغوي": "babel-eslint"
}،
مزيد من المعلومات: اقرأ هنا https://github.com/vuejs/eslint-plugin-vue/issues/186

عبر Airbnb

هنا هو كيف React يستخدم Airbnb:

"يمتد": "airbnb"

إليك كيفية استخدام Vue لـ Airbnb:

"يمتد": [
    "عبر Airbnb القاعدة"،
    "البرنامج المساعد: النظرية / أوصى"
]،

أن المراسي في eslint-plugin-vue.

ركلة البداية

بعد تثبيت كل هذه القمامة ، أوصي عمومًا بالخطوات الثلاث التالية لإكمالها بشكل متزامن كوسيلة لإسقاط ES Lint في الترس:

لقد نسيت أن أذكر أنه عادةً ما يتم تثبيت ES Lint على مستوى العالم:

sudo npm install -g eslint - حفظ
  1. محتويات ملف Grab./.eslintrc.json إلى الحافظة ، قد يتذكر البعض ذلك بنقر الماوس الأيسر و CTRL + AC combo من Mortal Kombat.
  2. تنفيذ $ eslint - في المحطة المتكاملة.
  3. تتوافق مع متطلبات البرنامج النصي.

ملاحظة: قد تحتاج إلى إغلاق أحد أو جميع ملفات .vue المفتوحة حاليًا ، أو في بعض الظروف الحرجة لنظام التشغيل ، قد تحتاج إلى إعادة تشغيل VS Code.

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

تحرير: لقد نسيت أن هناك بالفعل خطوة 4 ، وهي لصق محتويات الحافظة هذه مرة أخرى في ملف .eslintrc.json لأنه يتم الكتابة فوقه عند تشغيل eslint - init. لا صفقة كبيرة ، فقط الصقه مرة أخرى على القمة.

الثالثة ، سرية إعدادات رمز VS

في VS Code الآن ، انتقل إلى ملف> تفضيلات> الإعدادات وأضف هذا إلى ملف إعدادات JSON للمستخدم:

"eslint.validate": [
    "جافا سكريبت"،
    "javascriptreact"
    {
        "اللغة": "vue" ،
        "التصحيح التلقائي": خطأ
    }
]،
ملاحظة: يمكنك تشغيل ميزة الإصلاح التلقائي إذا كنت مجنونًا.

انتظر

إذا تلقيت رسالة من VS Code التي تشير إلى أن "eslint.validate" هو إعداد تهيئة غير معروف ، فأنت بحاجة إلى تثبيت ملحق ES Lint الخاص بـ Dirk Baumer.

زيارة: https://marketplace.visualstudio.com/items؟itemName=dbaeumer.vscode-eslint

أثناء قيامنا بتنزيل الإضافات ، أوصي بشدة بهذه الإضافة هنا والتي تسمى eslint-disable-snippets:

باستخدامه ، يمكنك أن تكون عند أو أعلى من السطر الذي تريد تعطيله ، وتبدأ في كتابة "eslint-disable" وعادةً ما تبدأ اقتراحات الإكمال التلقائي في VS Code بعد الكتابة حتى "esl" فقط ، لذلك فهي rad. أنا شخصيا دائما أنسى بناء الجملة ، وبالتالي فإن الامتداد هو مساعد مرحب به على مدار الساعة.

رابعا ، ربما تثبيت Vetur Extension

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

Vetur التمديد بواسطة الصنوبر وو

زيارة: https://marketplace.visualstudio.com/items؟itemName=octref.vetur

اتبع هذه الخطوات البسيطة هنا:

  1. تثبيت هذا الشؤم
  2. اكتمال العملية

*** مستخدمي ويندوز ***

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

إذا كنت تقوم بتشغيل Windows ، فقم بذلك. إذا لم تقم بتثبيت Vetur حتى الآن ، فقم بحذف الخطوة 1 إلى 3:

  1. ملحقات Goto VS Code
  2. إلغاء تثبيت Vetur
  3. اضغط على زر تحديث
  4. أغلق كود VS
  5. انقر بزر الماوس الأيمن فوق رمز VS Code في شريط المهام
  6. حدد تشغيل كمسؤول
  7. ملحقات Goto VS Code
  8. تثبيت Vetur
  9. اضغط على زر تحديث

كل شيء يجب أن تعمل من أجلك الآن.

استنتاج

وأخيرا ، لقد انتهينا. أتمنى لك حظًا موفقًا في رحلات الترميز ، وأنا متحمس للمضايقات التي ستحصل عليها من ES Lint.

عناوين URL مفيدة

  • https://vuejs.github.io/vetur/setup.html
  • https://codeburst.io/tutorial-how-to-add-eslint-to-your-vue-js-project-ccfb84fab9
  • https://alligator.io/vuejs/vue-eslint-plugin/
  • https://github.com/vuejs/vetur/issues/660