Ինչպես է ESLint-ը լուծում պլագինները և համօգտագործվող կոնֆիգուրները

Իսկ ի՞նչ կապ ունի դա փաթեթների կառավարիչների և հասակակիցների կախվածության հետ:

Սկզբնապես հրապարակվել է https://zaicevas.com կայքում

TLDR.փլագինները որոնվում են վերջնական օգտվողի նախագծի համեմատ,մինչդեռ համօգտագործվող կոնֆիգուրացիաները որոնվում են կոնֆիգուրացիայի ֆայլի համեմատ, որտեղ նրանք հայտնվում են:

Եթե ​​դուք օգտագործել եք eslint-config-airbnb (ամենատարածված ESLint-ի համօգտագործվող կոնֆիգուրացիաներից մեկը), կարող եք մտածել, ինչու՞ պետք է տեղադրեք այսքան շատ գործընկերային կախվածություններ՝ eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks: Չե՞ք կարող eslint-config-airbnb բերել այդ կախվածությունները:

Որպես այլընտրանք, եթե երբևէ ստեղծել եք ESLint հավելված կամ համօգտագործվող կոնֆիգուր, դուք, ամենայն հավանականությամբ, բախվել եք ինչպես է ESLint-ը լուծում պլագինները և համօգտագործվող կազմաձևերը:

Սա այն է, ինչ ես կպատասխանեմ այս բլոգի գրառմանը: Մարդկանց մեծամասնության համար դա կարևոր չէ հասկանալ: Այնուամենայնիվ, այն չափազանց օգտակար է դառնում, երբ դուք կառուցում եք ձեր սեփական ESLint փլագինը կամ համօգտագործվող կոնֆիգուրը: Աա և դա նաև կարկանդակ է հետաքրքրասեր մտքերի համար 😏

Փլագիններ ընդդեմ համօգտագործվող կազմաձևերի

Նախևառաջ, ESLint-ն ունի պլագիններ և ունի համօգտագործվող կոնֆիգուրացիաներ: Սրանք երկու տարբեր բաներ են.

• Համօգտագործելի կազմաձևում — պահպանում է բազմակի օգտագործման կոնֆիգուրացիա (կարծեք այն որպես կանոնների հավաքածու): Օրինակ՝ eslint-config-airbnb
• Plugin — կարող է անել այն ամենը, ինչ անում է համօգտագործվող կազմաձևը + կարող է ներառել հատուկ կանոններ: Օրինակ՝ eslint-plugin-jest

Ավելի գործնական օրինակների համար https://prateeksurana.me/blog/difference-between-eslint-extends-and-plugins/-ը պարզ և թեթև ընթերցում է:

Նշում. ես կօգտագործեմ config և shareable config փոխադարձաբար:

Փլագիններն ու կոնֆիգուրները տարբեր կերպ են լուծվում

Զարմանալիորեն, երբ ESLint-ը որոնում է պլագիններ և կազմաձևեր, այն նայում է տարբեր ուղիների: Այն նկարագրված է ESLint փաստաթղթերում.

Հարաբերական ուղիները և համօգտագործվող կոնֆիգուրացիայի անունները extends հատկության մեջ լուծվում են կազմաձևման ֆայլի գտնվելու վայրից, որտեղ նրանք հայտնվում են:

Աղբյուր՝ https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files

Հիմնական կազմաձևման հավելումները (բեռնված extends կարգավորումով) հարաբերական են ստացված կազմաձևման ֆայլին:

Աղբյուր՝ https://eslint.org/docs/user-guide/configuring/plugins#configuring-plugins

Ստեղծված կազմաձևման ֆայլ նշանակում է սպառողական նախագծի կազմաձևման ֆայլ, ինչպիսին է your-project/.eslintrc.js

Այնուամենայնիվ, դա կարող է դեռ գաղտնի թվալ: Թույլ տվեք պարզեցնել դա ձեզ համար.

• Կարգավորել. եթե երկարացնեք eslint-config-airbnb, իսկ eslint-config-airbnb_________, ESLint-ը որոնում էyour-project/node_modules/eslint-config-airbnb/node_modules/eslint-config-prettier
• Փլագին — եթե երկարացնեք eslint-config-airbnb-ը և eslint-config-airbnbը երկարացնեք eslint-plugin-react, ESLint-ը որոնում է your-project/node_modules/eslint-plugin-react

Այլ կերպ ասած, ESLint-ը ցանկանում է, որ բոլոր համօգտագործվող կոնֆիգուրայի սպառողները տեղադրեն բոլոր հավելումները:

Ահա թե ինչու eslint-config-airbnb ներառում է պլագինները որպես գործընկերների կախվածություն:

ESLint փաստաթղթերում նաև նշված է.

Եթե ​​ձեր համօգտագործվող կազմաձևը կախված է փլագինից, դուք պետք է նաև նշեք այն որպես peerDependency (պլագինները կբեռնվեն վերջնական օգտագործողի նախագծի համեմատ, ուստի վերջնական օգտագործողը պետք է տեղադրի իրեն անհրաժեշտ պլագինները): Այնուամենայնիվ, եթե ձեր համօգտագործվող կազմաձևը կախված է երրորդ կողմի վերլուծիչից կամ մեկ այլ համօգտագործվող կազմաձևից, կարող եք նշված փաթեթները նշել որպես dependencies:

Աղբյուր՝ https://eslint.org/docs/developer-guide/shareable-configs#publishing-a-shareable-config

Ինքնուրույն ESLint հավելված/կոնֆիգուր

Եթե ​​ձեզ հետաքրքրում է, թե ինչու ESLint-ը չի կարող կսմթել այս վարքագիծը և թույլ տալ, որ ESLint պլագինները/կազմաձևերը լինեն ինքնուրույն (բերեք այլ պլագիններ որպես կախվածություն), ապա դուք միայնակ չեք:

Գոյություն ունի GitHub-ի խնդիր, որը թվագրվում է 2015 թվականից. Աջակցել փլագիններին որպես կախվածություն համօգտագործվող կազմաձևում: Կա նաև բավականին դրամա: Եվ նույնիսկ կա ESLint patch, որն օգնում է հասնել դրան: Թեև անձամբ ես կվարանեի օգտագործել այն, քանի որ այն պահանջում է, որ բոլոր սպառողական նախագծերը բացահայտորեն օգտագործեն այն կազմաձևման ֆայլերում:

ESLint թիմն արդեն աշխատում է Flat Config-ի ներդրման վրա, ինչը նշանակում է, որ ESLint-ը օգտատերերին կթողնի զանգահարել require()-ին և լուծել փլագինները/կոնֆիգուրացիաները:

Այնուամենայնիվ, ինքնամփոփ plugin/config արդեն հնարավոր է 😈

Հենց այստեղ են պատկերվում տարբերփաթեթների կառավարիչների նրբությունները:

Տեսեք, փաթեթների կառավարիչները node_modules-ի վարպետներն են: Եթե ​​փաթեթի կառավարիչը կարողանում է անցումային կախվածությունները (օրինակ՝ eslint-config-airbnb-ի կախվածությունները) դնել your-project/node_modules-ի մեջ, դրանք կարող են լուծվել ESLint-ի միջոցով:

Փաթեթի տարբեր կառավարիչներ node_modules-ի կառավարման տարբեր եղանակներ ունեն.

1. npm v3 և ավելի ուշ — հարթ node_modules ✅
2. yarn v1— բնակարան node_modules ✅
3. yarn v2 — Plug’n’Play ❌
4. pnpm — hoists ESLint plugins/configs ✅

Ինչպես տեսնում եք,yarn v2-ը տարօրինակն է: npm-ը և pnpm-ն արդեն դրել են ESLint անցումային կախվածությունները անմիջապես your-project/node_modules-ի մեջ:

Այլ կերպ ասած, եթե տեղադրեք eslint-config-airbnb-ը և այն բերի eslint-plugin-import-ը որպես կախվածություն, այն կտեղակայվի your-project/node_modules/eslint-plugin-import-ում, այլ ոչ թե your-project/node_modules/eslint-config-airbnb/node_modules/eslint-plugin-import-ում կամ այլ տեղ:

Այսպիսով, եթե ESLint փլագինը/կազմաձևը կարող է իրեն թույլ տալ ՉԻ աջակցել yarn-ին, ESLint-ի այլ պլագինները dependencies-ում տեղադրելը հեշտացնում է ինքնուրույն փլագին/կոնֆիգուրացիա ձեռք բերելը: Նշանակում է, որ սպառողական նախագծերի համար անհրաժեշտ չէ տեղադրել պլագիններ որպես գործընկերների կախվածություն:

Այնուամենայնիվ, պարզապես կրկնելու համար, դա չի աշխատի yarn v2-ի հետ, այնպես որ ես չեմ զարմանում, որ eslint-config-airbnb-ը չի ներառում հավելումները որպես dependencies:

Ամփոփում

Հուսով եմ, որ այս բլոգի գրառումն օգտակար է ձեզ համար: Ամփոփեմ.

• ESLint պլագինները և համօգտագործվող կազմաձևերը երկու տարբեր բաներ են
• ESLint-ը լուծում է պլագիններն ու կազմաձևերը այլ կերպ
• Փլագինները որոնվում են վերջնական օգտվողի նախագծի համեմատ (your-project/node_modules/eslint-plugin-foo)
• Կազմաձևերը որոնվում են կոնֆիգուրացիայի ֆայլի համեմատ, որտեղ նրանք հայտնվում են
• Քանի որ հավելումները որոնվում են վերջնական օգտագործողի նախագծի համեմատ, խորհուրդ է տրվում դրանք տեղադրել որպես peerDependencies ESLint կոնֆիգուրացիա/պլագինում, այսինքն՝ սպառողական նախագծերը պետք է տեղադրեն դրանք:
• Փլագինները և կազմաձևերը կարող են այլ պլագիններ բերել որպես dependencies, ի տարբերություն peerDependencies-ի: Սա համատեղելի է npm և pnpm✅-ի հետ, բայց ոչ yarn v2 ❌