prettier eslint

أجمل eslint

تنسيقات javaScript الخاصة بك باستخدام prettier تليها eslint --fix

المشكلة

ميزة fix من eslint رائعة جدًا ويمكنها تنسيق/إصلاح جزء كبير من التعليمات البرمجية الخاصة بك وفقًا لتكوين ESLINT الخاص بك. prettier هو التنسيق التلقائي الأكثر قوة. واحدة من الأشياء اللطيفة عن أجمل هو مدى الرأي. لسوء الحظ ، لم يتم الرأي بما فيه الكفاية و/أو بعض الآراء تختلف عن بلدي. لذلك بعد تنسيقات أجمل الكود ، أبدأ في الحصول على أخطاء في وضعها.

هذا الحل

هذا ينسيق الكود الخاص بك عبر prettier ، ثم يمرر نتيجة ذلك إلى eslint --fix . وبهذه الطريقة ، يمكنك الحصول على فوائد قدرات التنسيق المتفوقة من prettier ، ولكن أيضًا الاستفادة من إمكانيات التكوين الخاصة بـ eslint .

بالنسبة للملفات التي تحتوي على امتداد .css ، .less ، .scss ، أو .json هذا يعمل فقط prettier لأن eslint لا يمكن معالجة هذه.

تثبيت

يتم توزيع هذه الوحدة عبر NPM المغطاة بالعقدة ويجب تثبيتها كأحد devDependencies مشروعك:

 npm install --save-dev prettier-eslint

الاستخدام

مثال

 const format = require ( 'prettier-eslint' ) ;

// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;

const options = {
  text : sourceCode ,
  eslintConfig : {
    parserOptions : {
      ecmaVersion : 7
    } ,
    rules : {
      semi : [ 'error' , 'never' ]
    }
  } ,
  prettierOptions : {
    bracketSpacing : true
  } ,
  fallbackPrettierOptions : {
    singleQuote : false
  }
} ;

const formatted = await format ( options ) ;

// notice no semicolon in the formatted text
formatted ; // const { foo } = bar

خيارات

نص (سلسلة)

رمز المصدر لتنسيق.

FilePath (؟ سلسلة)

يمكن استخدام مسار الملف الذي يتم تنسيقه لتجاوز eslintConfig (سيتم استخدام ESLINT للعثور على التكوين ذي الصلة للملف).

eslintconfig (؟ كائن)

التكوين لاستخدامه للتنسيق مع ESLINT. يمكن تجاوزها مع filePath .

prettieroptions (؟ كائن)

خيارات المرور لتنسيق مع prettier . إذا لم يتم توفيرها ، فسيحاول prettier-eslint إنشاء الخيارات بناءً على eslintConfig (سواء تم توفيرها أو اشتقاقها عبر filePath ). يمكنك أيضًا توفير بعض الخيارات ويكون للخيارات المتبقية المستمدة عبر تكوين ESLINT الخاص بك. هذا مفيد لخيارات مثل parser .

ملاحظة: هذه الخيارات تتجاوز تكوين ESLINT. إذا كنت ترغب في استخدام خيارات الاحتياط فقط في حالة عدم استنتاج القاعدة من ESLINT ، راجع "ForckPretTierOptions" أدناه.

عاكسة عاكسة (كائن)

خيارات تمريرها للتنسيق مع prettier إذا لم يكن prettier-eslint قادرًا على إنشاء الخيارات بناءً على eslintConfig (سواء تم توفيرها أو اشتقاقها عبر filePath ). لن يتم استخدام هذه الخيارات إلا في حالة أنه لا يمكن العثور على قاعدة ESLINT المقابلة ولم يتم تعريف الخيار الجذر يدويًا في prettierOptions . إذا لم يتم إعطاء الاحتياطي ، فسيستخدم prettier-eslint فقط القيمة الافتراضية prettier في هذا السيناريو.

Loglevel (؟ enum: ['Trace' ، 'Debug' ، 'Info' ، 'Warn' ، 'Error' ، 'silent'])

prettier-eslint يفعل الكثير من التسجيل إذا كنت تريد ذلك. مرر هذا لتعيين عدد السجلات التي تريد رؤيتها. الافتراضي هو process.env.LOG_LEVEL || 'warn' .

eslintpath (؟ سلسلة)

بشكل افتراضي ، سيحاول prettier-eslint في العثور على وحدة eslint ( prettier ) ذات الصلة بناءً على filePath . إذا لم تتمكن من العثور على واحدة ، فسيستخدم الإصدار الذي تم تثبيته prettier-eslint محليًا. إذا كنت ترغب في تحديد مسار إلى وحدة eslint التي ترغب في prettier-eslint ، فيمكنك توفير المسار الكامل إليه مع خيار eslintPath .

Prettierpath (؟ سلسلة)

هذا هو في الأساس نفس eslintPath باستثناء الوحدة prettier .

Prettierlast (؟ منطقية)

بشكل افتراضي ، سيتم تشغيل prettier من prettier-eslint ، ثم eslint --fix . هذا أمر رائع إذا كنت ترغب في استخدام prettier ، ولكن تجاوز بعض الأنماط التي لا تحب استخدام eslint --fix .

النهج البديل هو استخدام أدوات مختلفة لمخاوف مختلفة. إذا قمت بتقديم prettierLast: true ، فسيتم تشغيل eslint --fix -أولاً ، ثم prettier . يتيح لك ذلك استخدام eslint للبحث عن الأخطاء و/أو الممارسات السيئة ، واستخدام prettier لفرض نمط الكود.

رميات

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

ملاحظة: لن يعرض format أي رسالة تتعلق بالقواعد المكسورة في prettier أو eslint .

التقاط رسائل ESLINT

 const { analyze } = require ( "prettier-eslint" ) ;

const text = 'var x = 0;' ;
const result = await analyze ( {
  text ,
  eslintConfig : {
    rules : { 'no-var' : 'error' }
  }
} )    
console . log ( result . messages ) ;

ينتج على وحدة التحكم

 [{
  ruleId: 'no-var',
  severity: 2,
  message: 'Unexpected var, use let or const instead.',
  line: 1,
  column: 1,
  nodeType: 'VariableDeclaration',
  messageId: 'unexpectedVar',
  endLine: 1,
  endColumn: 11
}]

يتطابق analyze التصدير الإضافي مع format باستثناء أنه يعيد كائنًا بسيطًا مع output الخصائص مع إعطاء السلسلة الدقيقة التي سيعودها format ، messages التي تعطي مجموعة من أوصاف الرسائل (مع الهيكل الموضح أعلاه) الذي تم إنتاجه بواسطة تحليل eslint للرمز. يمكنك استخدام analyze بدلاً من format إذا كنت ترغب في تنفيذ التنسيق ولكن أيضًا التقاط أي أخطاء قد تلاحظها eslint .

التفاصيل الفنية

رمز ➡ أجمل ➡ ESLINT -FIX ➡ الكود المنسق

استنتاج أجمل من خلال eslintconfig

يمكن توفير كل من eslintConfig و prettierOptions كوسيطة. إذا لم يتم توفير eslintConfig ، فسوف يبحث عنها prettier-eslint المستند إلى fileName (إذا لم يتم توفير fileName فإنه يستخدم process.cwd() ). بمجرد أن يجد prettier-eslint أن eslintConfig ، يتم استنتاج prettierOptions من eslintConfig . إذا تم بالفعل تقديم بعض من prettierOptions ، فستستنتج prettier-eslint الخيارات المتبقية فقط. يحدث هذا الاستدلال في src/utils.js .

من المهم أن نلاحظ حول هذا الاستدلال هو أنه قد لا يدعم تكوين ESLINT المحدد. لذلك سترغب في التحقق من src/utils.js لمعرفة كيفية القيام بالاستدلال لكل خيار (ما يتم الرجوع إلى القاعدة (القواعد) ، وما إلى ذلك) وتقديم طلب سحب إذا تم دعم التكوين الخاص بك.

الإعدادات الافتراضية إذا كان لديك جميع قواعد ESLINT ذات الصلة تعطيل (أو تعطيل ESLINT بالكامل عبر /* eslint-disable */ ثم سيعود خيارات أجمل إلى الافتراضات prettier :

 {
  printWidth : 80 ,
  tabWidth : 2 ,
  singleQuote : false ,
  trailingComma : 'none' ,
  bracketSpacing : true ,
  semi : true ,
  useTabs : false ,
  // prettier-eslint doesn't currently support
  // inferring these two (Pull Requests welcome):
  parser : 'babylon' ,
  bracketSameLine : false ,
} 

استكشاف الأخطاء وإصلاحها

قضايا تصحيح الأخطاء

هناك الكثير من قطع الأشجار المتوفرة مع prettier-eslint . عند تصحيح الأخطاء ، يمكنك استخدام أحد logLevel S للحصول على فكرة أفضل عما يحدث. إذا كنت تستخدم prettier-eslint-cli ، فيمكنك استخدام --log-level trace ، إذا كنت تستخدم المكون الإضافي Atom ، فيمكنك فتح أدوات المطور والإدخال: process.env.LOG_LEVEL = 'trace' في وحدة التحكم ، ثم قم بتشغيل التنسيق. سترى مجموعة من السجلات التي يجب أن تساعدك في تحديد ما إذا كانت المشكلة prettier أو eslint --fix ، أو كيف prettier-eslint تتخيل خيارات prettier ، أو أي عدد من الأشياء الأخرى. سيُطلب منك القيام بذلك قبل تقديم المشكلات ، لذا يرجى القيام بذلك؟

ملاحظة: عند القيام بذلك ، يوصى بتشغيل هذا فقط على ملف واحد لأن هناك الكثير من السجلات :)

eslint-disable-line

أثناء استخدام // eslint-disable-line ، قد تحصل في بعض الأحيان على أخطاء في التصنيف بعد معالجة الرمز بواسطة هذه الوحدة. ذلك لأن prettier يغير هذا:

 // prettier-ignore
if ( x ) { // eslint-disable-line
}

لهذا:

 if ( x ) {
  // eslint-disable-line
}

و eslint --fix لن يغيره مرة أخرى. يمكنك أن تلاحظ أن // eslint-disable-line قد انتقل إلى خط جديد. للتغلب على هذه المشكلة ، يمكنك استخدام //eslint-disable-next-line بدلاً من // eslint-disable-line مثل هذا:

 // eslint-disable-next-line
if ( x ) {
} 

إلهام

• prettier
• eslint

حلول أخرى

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

متعلق ب

• prettier-eslint-cli واجهة سطر الأوامر
• prettier-atom - ATOM Plugin (تحقق من مربع الاختيار "تكامل ESLINT" في الإعدادات)
• vs-code-prettier-eslint Studio Code Plugin
• eslint-plugin-prettier -Eslint Plugin. في حين أن أجمل eslint يستخدم eslint --fix لتغيير ناتج prettier ، فإن ESLINT-Plugin-Prettier يحافظ على الإخراج prettier كما هو ويدمجه مع سير عمل ESLINT العادي.
• prettier-eslint-webpack-plugin مكون الإضافات الجمال Eslint WebPack

المساهمين

شكراً لهؤلاء الناس (مفتاح الرموز التعبيرية):

كينت سي دودز ؟ ️	جيانديب سينغ ؟	igor pnev ؟	بنيامين تان ؟	إريك ماكورميك ️	سيمون ليديل	توم ماكيرني
باتريك Åkerstrand	لوشلان بون	دانيل تيرويل ؟ ؟	روبن سوء ؟	مايكل مكديرموت	آدم ستانكيتش	ستيفن جون سورنسن
براين دي بالما ؟	روب وايز	باتيك البازلاء ؟ ️	ثيج كورسلمان ؟ ️	إنريكي كاباليرو ؟	łukasz موروز ؟ ️	سيمون فريدلوند ؟ ؟ ؟ ؟ ؟ ؟ ️ ؟ ✅
أوليفر جوزيف آش ؟	مارك بالفريمان	أليكس تايلور ️	شيانينغ تشونغ ️	لويس ليو	حمزة حميدي ؟ ؟ ؟ ؟	راجيف رانجان سينغ
igor ؟	ريبكا سترة	كريس بوبي ؟	Jounqin ؟ ؟ ؟ ؟ ؟ ؟ ؟ ️ ؟	جوناثان ريم	غلين ويتني

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!

رخصة

معهد ماساتشوستس للتكنولوجيا