Rubuta Dokokin ESLint na Al’ada: Kwaro da Aka Gina Don Dakata Daga Maimaitawa

Mun aika nau’i iri ɗaya na bug sau uku daban-daban a cikin buƙatun ja daban-daban guda uku sama da watanni huɗu, wani yana kirauseEffecttare da aikin async ya wuce kai tsaye azaman tasirin kiran dawowa, wanda React yayi watsi da shi ta hanyar da ba ta jefa kuskure ba, kawai ba ya aiki, kuma duk lokacin da ya ɗauki zaman ɓata lokaci don lura da tasirin kawai ba ya gudana. Bayan faruwar na uku na daina dogaro da sake duba lambar kama shi kuma na rubuta ƙa’idar ESLint ta al’ada maimakon.

Me yasa sake duba lambar ya ci gaba da ɓacewa

Kwaron yana da dabara na gani, anasynckeyword akan aikin da aka wuce zuwauseEffectya dubi cikakkiyar ma’ana a kallo, kuma babu ɗaya daga cikin masu bita guda uku a cikin waɗannan buƙatun ja guda uku, da kaina na haɗa da ɗayansu, wanda ya kama shi yayin bita duk da halaye na bita da kyau. Wannan shine ainihin nau’in kuskure wanda ya fi dacewa da kama shi da injina fiye da dogaro da hankalin ɗan adam.

useEffect(async () => {
  const data = await fetchData();
  setData(data);
}, []);
// React ignores the returned Promise entirely, silently
// no error, the effect body still runs, but any cleanup
// function you meant to return is never registered correctly

Farawa daga mai binciken AST na ESLint maimakon hasashe

Ban rubuta ƙa’idar ESLint ta al’ada ba a baya, kuma maimakon karantawa ta cikin takaddun kayan aikin sanyi, na yi amfani da kayan aikin gidan yanar gizo na ESLint AST don liƙa a cikin daidaitaccen tsarin lambar buggy kuma in ga daidai nau’ikan nau’ikan kumburi da kaddarorin da zan buƙaci bincika, wanda ya sanya ainihin tsarin rubutun ƙa’ida da sauri fiye da aiki daga takaddun shaida kaɗai.

Ka’idar kanta, da abin da daftarin farko ya samu kuskure

Sigar farko ta bincika ko hujja ta farko ga kowane kiran aiki shine aikin kibiya async, wanda daidai ya kama mai amfaniEffect bug amma kuma ya ba da alamar halalcin amfani da ayyukan async da aka wuce zuwa wasu ayyuka gaba ɗaya, kamar async callbacks ya wuce don gwada masu gudu, yana samar da tasirin karya a cikin fayilolin gwajin mu wanda ya sa dokar ta zama mai ban haushi maimakon amfani.

// first draft, too broad
CallExpression(node) {
  const firstArg = node.arguments[0];
  if (firstArg?.async) {
    context.report(node, 'Async function passed as callback');
  }
}

Ƙuntata ƙa’ida zuwa takamaiman sunaye na ayyuka waɗanda ke da mahimmanci

Na sake rubuta shi don bincika musamman ko sunan aikin da ake kirauseEffectkouseLayoutEffect, maimakon nuna alamar kowane async callback a ko’ina a cikin codebase, wanda ya kawar da abubuwan da suka dace gaba ɗaya yayin da har yanzu suna kama ainihin tsarin kwaro da muka damu.

CallExpression(node) {
  const callee = node.callee;
  const isEffectHook = callee.type === 'Identifier' &&
    ['useEffect', 'useLayoutEffect'].includes(callee.name);
  const firstArg = node.arguments[0];
  if (isEffectHook && firstArg?.async) {
    context.report({
      node: firstArg,
      message: 'useEffect callback cannot be async. Define an async function inside and call it.'
    });
  }
}

Gwada ƙa’idar akan ainihin kwari na tarihi, ba kawai misalan da aka yi ba

Maimakon rubuta shari’o’in gwaji na roba daga karce, na jawo ainihin bambance-bambancen daga duk abubuwan da suka faru guda uku da suka gabata kuma na yi amfani da waɗancan snippets na lambar daidai azaman kayan gwajin, yana mai tabbatar da doka ta kama kowane ɗayansu kafin a tura su, wanda ya ji kamar wata hanya mai gamsarwa ta gaske don rufe madauki akan kuskure mai maimaitawa.

Buga shi a ciki tare da adana shi a cikin ma’ajiyar mu

Da farko na ɗauki buga wannan azaman fakitin npm na tsaye, tunda na ɗauka wasu ƙungiyoyin wataƙila sun sami bug iri ɗaya, amma bincike mai sauri ya nuna mashahurin.eslint-plugin-react-hookskunshin ya riga ya sami irin wannan cak wanda ban sani ba. Na ƙare kawai ba da damar wannan ƙa’idar data kasance da kyau maimakon kiyaye kaina, wanda ya kasance mai ƙasƙantar da kai amma daidaitaccen sakamako, ƙa’idar al’adata ta kasance kyakkyawan aiki amma ba tare da wani kayan aiki mai kyau wanda kawai ban tsara shi ba tun farko.

Abin da a zahiri ya hana kwaro daga maimaituwa

Ba ainihin ƙa’idar al’adata ba ce a ƙarshe, yana koyan cewa gyara ya riga ya wanzu a cikin plugin ɗin da muka riga muka dogara amma ba mu cika aiki ba. Babban sakamako mai fa’ida na wannan duka ba shine ka’idar kanta ba, yana koyan yadda ake karanta ainihin ma’anar tsarin AST na ESLint da kyau don tabbatar da ko kayan aikin da ke akwai ya riga ya rufe matsala kafin ɗauka ina buƙatar gina sabon abu.