eslint plugin import

Eslint-plugin-import

يعتزم هذا البرنامج المساعد دعم بناء جملة الاستيراد/التصدير ES2015+ (ES6+) ، ومنع المشكلات المتعلقة بإخزال مسارات الملفات وأسماء الاستيراد. كل الخير الذي يعتزم بناء جملة الوحدة النمطية ES2015+ الثابتة ، والتي تم وضع علامة عليها في المحرر.

إذا كنت تستخدم هذا مع Sublime : راجع القسم السفلي للحصول على معلومات مهمة.

قواعد

تمكين التكوينات في.
️ ضبط التكوينات للتحذير في.
تعطيل التكوينات في.
❗ تعيين في تكوين errors .
☑ تعيين في التكوين recommended .
⌨ تعيين في تكوين typescript .
؟ تعيين في تكوين warnings .
؟ يمكن تثبيته تلقائيًا بواسطة خيار --fix CLI.
يمكن تثبيتها يدويًا بواسطة اقتراحات المحرر.
تم إهماله.

تحذيرات مفيدة

اسم	وصف		️		؟
يصدّر	منع أي صادرات غير صالحة ، أي إعادة تصدير تحمل نفس الاسم.	❗ ☑
عدم الاستنزاف	لا سمح الأسماء المستوردة مع علامة الوثائق @deprecated .
حاصرات غير فارغة	لا سمح فارغة كتل الاستيراد.				؟
عدم وجود الاعتماد في وقت واحد	سمح استخدام الحزم الغريبة.
لا تصدير غير قابل للتطبيق	منع استخدام الصادرات القابلة للتغيير مع var أو let .
لا تسميها كقواف	سمح استخدام الاسم المصدر كمعرف للتصدير الافتراضي.		☑؟
لا تسميه كأعضاء	لا سمح استخدام الاسم المصدر كخاصية للتصدير الافتراضي.		☑؟
لا توجد غير مستخدمة	سمات الوحدات بدون صادرات ، أو تصدير دون مطابقة الاستيراد في وحدة أخرى.

أنظمة الوحدة النمطية

اسم	وصف		️		؟
لا amd	لا سمح AMD require define المكالمات.
لا شجاعة	require Clifbid Commonjs المكالمات والوحدة module.exports التصدير أو exports.* .
No-import-module-exports	لا سمح عبارات الاستيراد مع MODULE.				؟
NODEJS-modules	لا سمح node.js بنيت الوحدات النمطية.
لا لبس فيه	لا سمح هدف التحليل الغامضة ( script مقابل module ).

تحليل ثابت

اسم	وصف		️		؟
تقصير	تأكد من وجود تصدير افتراضي ، بالنظر إلى الاستيراد الافتراضي.	❗ ☑
فرض العقدة-بروتوكول الاستخدام	فرض إما باستخدام أو حذف node: البروتوكول عند استيراد وحدات Node.js.				؟
سمي	تأكد من أن الواردات المسماة تتوافق مع تصدير مسمى في الملف البعيد.	❗ ☑		⌨
مساحة الاسم	تأكد من أن مساحات الأسماء المستوردة تحتوي على خصائص غير مرغوب فيها لأنها تخرد.	❗ ☑
عدم وجود مسار	سمح استيراد الوحدات النمطية باستخدام المسارات المطلقة.				؟
بدون دورة	منع وحدة من استيراد وحدة مع مسار التبعية مرة أخرى إلى نفسه.
No-dynamic-require	لا سمح require() المكالمات مع التعبيرات.
لا توجد آلات للداخلية	لا سمح استيراد العدوى الفرعية للوحدات النمطية الأخرى.
حزم لا تربية	سمح استيراد الحزم من خلال المسارات النسبية.				؟
لا تربية الوالدين	سمح استيراد الوحدات النمطية من أدلة الوالدين.
مسار غير مقيد	فرض الملفات التي يمكن استيرادها في مجلد معين.
عدم الاستيراد	منع وحدة من استيراد نفسها.
بدون حل	تأكد من أن الواردات تشير إلى ملف/وحدة يمكن حلها.	❗ ☑
لا مهرجان القطاعات	لا سمح لقطاعات المسار غير الضرورية في الاستيراد وتتطلب عبارات.				؟
لا webpack-loader-syntax	سمح بناء جملة محمل WebPack في الواردات.

دليل النمط

اسم	وصف		️		؟
على غرار محدد ثابت	فرض أو حظر استخدام علامات النوع فقط للواردات المسماة.				؟
ديناميكي الاستيراد chunkname	فرض تعليقًا رائدًا مع WebPackChunkName للواردات الديناميكية.
صادرات	تأكد من ظهور جميع الصادرات بعد بيانات أخرى.
الامتدادات	ضمان الاستخدام المتسق لتمديد الملف داخل مسار الاستيراد.
أولاً	تأكد من ظهور جميع الواردات قبل البيانات الأخرى.				؟
المصديرات الجماعية	تفضل تجميع الصادرات المسماة معًا في إعلان تصدير واحد
الواردات الأولى	استبدل import/first .				؟
أقصى الاعتماد	فرض الحد الأقصى لعدد التبعيات التي يمكن أن تحتوي عليها الوحدة النمطية.
خط جديد بعد الاستيراد	فرض خط جديد بعد بيانات الاستيراد.				؟
لا ملموس إلى Default-Export	لا سمحت قيم مجهولة كصادرات افتراضية.
No-Default-Export	لا سمح الصادرات الافتراضية.
لا duplicates	لا سمح الاستيراد المتكرر للوحدة نفسها في أماكن متعددة.		☑؟		؟
لا تسميت	لا سمح اسم الصادرات الافتراضية.
لا تسمي التصدير	لا سمح اسم الصادرات.
No-Namespace	مساحة الاسم الممنوعة (المعروفة أيضًا باسم "Wildcard" * ).				؟
لا يوجد غير مخصص	لا سمح الواردات غير المعينة
طلب	فرض اتفاقية في ترتيب استيراد الوحدة النمطية.				؟
تفضل التصدير	تفضل التصدير الافتراضي إذا كانت الوحدة النمطية تصدر اسمًا واحدًا أو أسماء متعددة.

eslint-plugin-import للمؤسسة

متاح كجزء من اشتراك Tidelift.

يعمل مشرفي eslint-plugin-import وآلاف الحزم الأخرى مع TideLift لتقديم الدعم والصيانة التجارية لتبعيات المصادر المفتوحة التي تستخدمها لبناء تطبيقاتك. وفر الوقت ، وتقليل المخاطر ، وتحسين صحة الكود ، مع دفع المشرفين على التبعيات الدقيقة التي تستخدمها. يتعلم أكثر.

تثبيت

 # inside your project's working tree
npm install eslint-plugin-import --save-dev

Config - Legacy ( .eslintrc )

جميع القواعد متوقفة بشكل افتراضي. ومع ذلك ، يمكنك تمديد أحد التكوينات المسبقة ، أو تكوينها يدويًا في .eslintrc.(yml|json|js) .

• تمديد التكوين المسبق:

 {
  "extends" : [
     "eslint:recommended" ,
     "plugin:import/recommended" ,
  ] ,
}

• التكوين يدويًا:

 {
  "rules" : {
    "import/no-unresolved" : [ "error" , { "commonjs" : true , "amd" : true } ] ,
    "import/named" : "error" ,
    "import/namespace" : "error" ,
    "import/default" : "error" ,
    "import/export" : "error" ,
    // etc...
  } ,
} ,

التكوين - شقة ( eslint.config.js )

جميع القواعد متوقفة بشكل افتراضي. ومع ذلك ، يمكنك تكوينها يدويًا في eslint.config.(js|cjs|mjs) ، أو تمديد أحد التكوينات المسبقة:

 import importPlugin from 'eslint-plugin-import' ;
import js from '@eslint/js' ;

export default [
  js . configs . recommended ,
  importPlugin . flatConfigs . recommended ,
  {
    files : [ '**/*.{js,mjs,cjs}' ] ,
    languageOptions : {
      ecmaVersion : 'latest' ,
      sourceType : 'module' ,
    } ,
    rules : {
      'no-unused-vars' : 'off' ,
      'import/no-dynamic-require' : 'warn' ,
      'import/no-nodejs-modules' : 'warn' ,
    } ,
  } ,
] ; 

TypeScript

يمكنك استخدام المقتطف التالي أو تجميع التكوين الخاص بك باستخدام الإعدادات الحبيبية الموضحة أدناه.

تأكد من أنك قمت بتثبيت @typescript-eslint/parser و eslint-import-resolver-typescript والتي يتم استخدامها في التكوين التالي.

 {
  "extends" : [
    "eslint:recommended" ,
    "plugin:import/recommended" ,
// the following lines do the trick
    "plugin:import/typescript" ,
  ] ,
  "settings" : {
    "import/resolver" : {
      // You will also need to install and configure the TypeScript resolver
      // See also https://github.com/import-js/eslint-import-resolver-typescript#configuration
      "typescript" : true ,
      "node" : true ,
    } ,
  } ,
}

config - flat مع config() في typescript-eslint

إذا كنت تستخدم طريقة config من typescript-eslint ، فتأكد من تضمين flatConfig ضمن صفيف extends .

 import tseslint from 'typescript-eslint' ;
import importPlugin from 'eslint-plugin-import' ;
import js from '@eslint/js' ;

export default tseslint . config (
  js . configs . recommended ,
  // other configs...
  {
    files : [ '**/*.{ts,tsx}' ] ,
    extends : [ importPlugin . flatConfigs . recommended ] ,
    // other configs...
  }
) ; 

المحللين

من خلال ظهور حزم الوحدة النمطية والحالة الحالية للوحدات النمطية ومواصفات بناء الجملة ، لا يمكن دائمًا أن تتطلع import x from 'module' للعثور على الملف وراء module .

من خلال V0.10ish ، استخدم هذا البرنامج المساعد resolve مباشرة لـ STEMBACK RESOLE ، والذي يقوم بتنفيذ سلوك استيراد العقدة. هذا يعمل بشكل جيد في معظم الحالات.

ومع ذلك ، يتيح WebPack عددًا من الأشياء في سلاسل مصدر الاستيراد التي لا تقوم بها العقدة ، مثل اللوادر ( import 'file!./whatever' ) وعدد من مخططات الاسم المستعار ، مثل externals : تعيين معرف الوحدة النمطية إلى اسم عالمي في وقت التشغيل (مما يتيح تضمين بعض الوحدات بشكل تقليدي عبر علامات البروتوسيبات).

من مصلحة دعم كلاهما ، يقدم V0.11 محددات.

تم تنفيذ دقة العقدة وحزم الويب حاليًا ، لكن Resolvers هي مجرد حزم NPM ، لذلك يتم دعم حزم الطرف الثالث (وتشجيعها!).

يمكنك الرجوع إلى الحلول بعدة طرق (في ترتيب الأسبقية):

• كاسم تقليدي eslint-import-resolver ، مثل eslint-import-resolver-foo :

 // .eslintrc
{
 "settings" : {
   // uses 'eslint-import-resolver-foo':
   "import/resolver" : "foo" ,
 } ,
} 

 # .eslintrc.yml
settings :
  # uses 'eslint-import-resolver-foo':
  import/resolver : foo 

 // .eslintrc.js
module . exports = {
  settings : {
    'import/resolver' : {
      foo : { someConfig : value }
    }
  }
}

• مع اسم وحدة NPM كاملة ، مثل my-awesome-npm-module :

 // .eslintrc
{
  "settings" : {
    "import/resolver" : "my-awesome-npm-module" ,
  } ,
} 

 # .eslintrc.yml
settings :
  import/resolver : ' my-awesome-npm-module ' 

 // .eslintrc.js
module . exports = {
  settings : {
    'import/resolver' : {
      'my-awesome-npm-module' : { someConfig : value }
    }
  }
}

• مع مسار نظام الملفات إلى الحل ، المعرفة في هذا المثال كاسم computed property :

 // .eslintrc.js
module . exports = {
  settings : {
    'import/resolver' : {
      [ path . resolve ( '../../../my-resolver' ) ] : { someConfig : value }
    }
  }
}

سيتم حل المسارات النسبية نسبة إلى أقرب package.json المصدر. json أو دليل العمل الحالي للعملية إذا لم يتم العثور على package.json .

إذا كنت مثيراً للاهتمام في كتابة محلول ، راجع المواصفات لمزيد من التفاصيل.

إعدادات

يمكنك تعيين الإعدادات التالية في .eslintrc :

import/extensions

قائمة بملحقات الملفات التي سيتم تحليلها كوحدات وتفتيشها export .

هذا الإعدادات الافتراضية لـ ['.js'] ، إلا إذا كنت تستخدم التكوين المشترك react ، وفي هذه الحالة يتم تحديده على أنه ['.js', '.jsx'] . على الرغم من الافتراضي ، إذا كنت تستخدم TypeScript (بدون plugin:import/typescript الموضح أعلاه) ، يجب عليك تحديد الامتدادات الجديدة ( .ts ، وكذلك .tsx إذا كنت تستخدم React).

 "settings" : {
  "import/extensions" : [
    ".js" ,
    ".jsx"
  ]
}

إذا كنت بحاجة إلى المزيد من تعريفات التمديد الحبيبية ، فيمكنك استخدام:

 "settings" : {
  "import/resolver" : {
    "node" : {
      "extensions" : [
        ".js" ,
        ".jsx"
      ]
    }
  }
}

لاحظ أن هذا يختلف عن (ومن المحتمل أن يكون هناك مجموعة فرعية من) أي إعدادات امتدادات import/resolver ، والتي قد تشمل .json ، .coffee ، وما إلى ذلك والتي ستظل تعمل في القاعدة no-unresolved .

أيضا ، فإن أنماط import/ignore التالية سوف تفقد هذه القائمة.

import/ignore

لن تقوم قائمة بسلاسل regex ، إذا كانت مطابقة للمسار ، الإبلاغ عن وحدة المطابقة إذا لم يتم العثور على export . في الممارسة العملية ، هذا يعني أن قواعد أخرى غير no-unresolved لن تقوم بالإبلاغ عن أي import مع مسارات (نظام الملفات المطلق) المطابقة لهذا النمط.

no-unresolved لا يوجد لديه إعداد ignore .

 {
  "settings" : {
    "import/ignore" : [
      ".coffee$" , // fraught with parse errors
      ".(scss|less|css)$" , // can't parse unprocessed CSS modules, either
    ] ,
  } ,
}

import/core-modules

مجموعة من الوحدات الإضافية التي يجب اعتبارها وحدات "أساسية"-مواد التي ينبغي اعتبارها حلها ولكن ليس لها مسار على نظام الملفات. قد يحدد محللك بالفعل بعضًا من هذه (على سبيل المثال ، يعرف Resolver Node عن fs و path ) ، لذلك لا تحتاج إلى إعادة تعريفها.

على سبيل المثال ، يعرض الإلكترون وحدة electron :

 import 'electron'  // without extra config, will be flagged as unresolved!

هذا سيكون دون حل. لتجنب ذلك ، يمكنك توفير electron كوحدة أساسية:

 // .eslintrc
{
  "settings" : {
    "import/core-modules" : [ "electron" ] ,
  } ,
}

في حالة الإلكترون المحددة ، هناك تكوين مشترك يسمى electron يحدد هذا لك.

مساهمة المزيد من هذه التكوينات المشتركة للمنصات الأخرى مرحب بها!

import/external-module-folders

مجموعة من المجلدات. الوحدات التي تم حلها فقط من تلك المجلدات ستعتبر "خارجية". افتراضيًا - ["node_modules"] . من المنطقي إذا قمت بتكوين المسار أو مسار الويب الخاص بك للتعامل مع مساراتك الداخلية بشكل مختلف وترغب في النظر في وحدات من بعض المجلدات ، على سبيل المثال bower_components أو jspm_modules ، على أنها "خارجية".

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

إذا كنت تستخدم yarn PNP كمدير للحزمة ، فأضف مجلد .yarn وسيتم اعتبار جميع التبعيات المثبتة external ، بدلاً من internal .

كل عنصر في هذه الصفيف هو إما اسم المجلد ، أو مساره الفرعي ، أو مسار البادئة المطلق:

• ستطابق jspm_modules أي ملف أو مجلد يدعى jspm_modules أو يحتوي على أحد الوالدين المباشر أو غير المباشر المسمى jspm_modules ، EG /home/me/project/jspm_modules أو /home/me/project/jspm_modules/some-pkg/index.js .

• سوف تتطابق packages/core مع أي مسار يحتوي على هذين القطاعين ، على سبيل المثال /home/me/project/packages/core/src/utils.js .

• /home/me/project/packages لن يطابق سوى الملفات والأدلة داخل هذا الدليل ، والدليل نفسه.

يرجى ملاحظة أن الأسماء غير المكتملة غير مسموح بها هنا حتى لا تتطابق components إلى bower_components و packages/ui لن تتطابق مع packages/ui-utils (ولكنها ستطابق packages/ui/utils ).

import/parsers

خريطة من محلات إلى صفائف ملحق ملف. إذا تمت مطابقة امتداد الملف ، فسيتطلب محلل التبعية مفتاح الخريطة واستخدامها كحامل بدلاً من محلل ESLINT المكون. هذا مفيد إذا كنت متداخلًا مع TypeScript مباشرة باستخدام WebPack ، على سبيل المثال:

 // .eslintrc
{
  "settings" : {
    "import/parsers" : {
      "@typescript-eslint/parser" : [ ".ts" , ".tsx" ] ,
    } ,
  } ,
}

في هذه الحالة ، يجب تثبيت @typescript-eslint/parser وتتطلبها من موقع وحدة eslint قيد التشغيل (أي ، قم بتثبيته كأقران ESLINT).

يتم اختبار هذا حاليًا فقط باستخدام @typescript-eslint/parser (وسلفه ، typescript-eslint-parser ) ، ولكن يجب أن يعمل نظريًا مع أي محلل متوافق مع معتدل.

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

import/resolver

انظر المحددات.

import/cache

إعدادات لسلوك ذاكرة التخزين المؤقت. يتم استخدام المذكرة في مستويات مختلفة لتجنب كمية وفيرة من مكالمات fs.statSync /الوحدة النمطية المطلوبة للإبلاغ عن الأخطاء بشكل صحيح.

بالنسبة إلى وحدة التحكم eslint العادية ، يكون عمر ذاكرة التخزين المؤقت غير ذي صلة ، حيث يمكننا أن نفترض بشدة أن الملفات يجب ألا تتغير خلال عمر عملية Linter (وبالتالي ، ذاكرة التخزين المؤقت في الذاكرة)

بالنسبة للعمليات الطويلة الأمد ، مثل eslint_d أو eslint-loader ، من المهم أن يكون هناك بعض فكرة الصلابة.

إذا لم تستخدم أبدًا eslint_d أو eslint-loader ، فيمكنك ضبط حياة ذاكرة التخزين المؤقت على Infinity ويجب أن يكون كل شيء على ما يرام:

 // .eslintrc
{
  "settings" : {
    "import/cache" : {
      "lifetime" : "∞" , // or Infinity, in a JS config
    } ,
  } ,
}

خلاف ذلك ، سيتم إخلاء بعض عدد صحيح ، وسيتم إخلاء إدخالات ذاكرة التخزين المؤقت بعد أن انقضت الثواني العديدة:

 // .eslintrc
{
  "settings" : {
    "import/cache" : {
      "lifetime" : 5 , // 30 is the default
    } ,
  } ,
}

import/internal-regex

يجب التعامل مع regex للحزم على أنها داخلية. مفيد عند استخدام إعداد monorepo أو تطوير مجموعة من الحزم التي تعتمد على بعضها البعض.

بشكل افتراضي ، سيتم اعتبار أي حزمة مشار إليها من import/external-module-folders "خارجيًا" ، بما في ذلك الحزم في Monorepo مثل مساحة عمل الغزل أو بيئة Lerna. إذا كنت ترغب في وضع علامة على هذه الحزم على أنها "داخلية" ، فسيكون ذلك مفيدًا.

على سبيل المثال ، إذا كانت حزمك في monorepo كلها في @scope ، يمكنك تكوين import/internal-regex مثل هذا

 // .eslintrc
{
  "settings" : {
    "import/internal-regex" : "^@scope/" ,
  } ,
}

import/node-version

سلسلة تمثل إصدار Node.js الذي تستخدمه. سوف تعني قيمة falsy إصدار Node.js الذي تقوم بتشغيله مع ESLINT.

 // .eslintrc
{
  "settings" : {
    "import/node-version" : "22.3.4" ,
  } ,
} 

suglimelinter-eslint

قدمت SublimElinter-eslint تغييرًا لدعم ملفات .eslintignore التي غيرت طريقة تمرير مسارات الملف إلى ESLINT عند الارتباط أثناء التحرير. يرسل هذا التغيير مسارًا نسبيًا بدلاً من المسار المطلق للملف (كما يوفر ESLINT عادةً) ، مما قد يجعل من المستحيل على هذا البرنامج المساعد حل التبعيات على نظام الملفات.

لم يعد هذا الحل ضروريًا مع إصدار ESLINT 2.0 ، عندما يتم تحديث .eslintignore للعمل أكثر مثل .gitignore ، والتي يجب أن تدعم تجاهل المسارات المطلقة عبر- --stdin-filename .

في غضون ذلك ، راجع ROADHUMP/SUBLIMELINTER-ESLINT#58 لمزيد من التفاصيل والمناقشة ، ولكن قد تجد أنك تحتاج إلى إضافة تكوين SublimeLinter التالي إلى ملف المشروع السامي الخاص بك:

{
    "folders" :
    [
        {
            "path" : " code "
        }
    ],
    "SublimeLinter" :
    {
        "linters" :
        {
            "eslint" :
            {
                "chdir" : " ${project}/code "
            }
        }
    }
}

لاحظ أن ${project}/code يطابق code المقدم في folders[0].path .

الغرض من إعداد chdir ، في هذه الحالة ، هو تعيين دليل العمل الذي يتم من خلاله تنفيذ ESLINT ليكون هو نفسه الدليل الذي يقوم عليه sublimelinter-eslint بالمسار النسبي الذي يوفره.

راجع مستندات SublimeLinter على chdir لمزيد من المعلومات ، في حالة عدم عمل ذلك مع مشروعك.

إذا كنت لا تستخدم .eslintignore ، أو لم يكن لديك ملف مشروع سامي ، فيمكنك أيضًا القيام بما يلي عبر ملف .sublimelinterrc في بعض أدلة الأجداد الخاصة بك من الكود:

{
  "linters" : {
    "eslint" : {
      "args" : [ " --stdin-filename " , " @ " ]
    }
  }
}

لقد وجدت أيضًا أنني بحاجة إلى تعيين rc_search_limit على null ، والذي يزيل حد بحث التسلسل الهرمي عند البحث عن شجرة الدليل لـ .sublimelinterrc :

في إعدادات الحزمة / إعدادات المستخدم / المستخدم:

{
  "user" : {
    "rc_search_limit" : null
  }
}

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