Linting-værktøjer spiller en afgørende rolle i vores udviklingsproces, når vi bygger webapplikationer. Enhver udvikler skal vide, hvad en Linter er, hvordan man installerer og konfigurerer en, og hvordan man bruger dem effektivt, hvilket sikrer, at de bedste kodestandarder gælder for vores projekt.
Ved Imaginær skyVi havde leveret flere undefined apps til vores kunder, så vi skabte en open source undefined konfiguration - @imaginary -cloud/eslint-config-react skal bruges internt og deles med samfundet. Målet er at have en centraliseret konfiguration, som alle kan bruge, nem at installere og konfigurere ved hjælp af de bedste JS-kodestandarder i samfundet og linting på undefined kode uden besværet med at konfigurere en Linter.
Men hvorfor bruge Imaginary Cloud-konfiguration i stedet for andre tilgængelige? Fordi vi samlede de bedste og mest anvendte open source-konfigurationer i en centraliseret pakke, hvilket gør installationen og konfigurationsprocessen hurtig og smertefri. Den største fordel ved at bruge @imaginary -cloud/eslint-config-react over det velkendte undefined konfiguration er, at vi også bruger undefined config for deres bedste kodepraksis plus kodestilen til undefined at have en mere behagelig og læsbar kode.
I slutningen af denne artikel skal du være i stand til at vide, hvad Linting-værktøjer er, og hvordan du installerer/konfigurerer undefined og undefined til undefined applikationer med blot et par trin.
Linting er processen med at evaluere og fejlsøge kildekoden i baggrunden ved at analysere mod et sæt regler for programmatiske og stilistiske fejl. Dette gør det muligt for udvikleren at finde fejl, før koden køres. Regler håndhæver også bedste kodestandarder og praksis, bedre kodekvalitet, mere læsbar og lettere at vedligeholde.
Ifølge GitHub Octoverse undersøgelse, JavaScript er fortsat det mest anvendte sprog i de sidste fem år. Dette tillod JS økosystem at vokse og udvikle sig og give flere og bedre værktøjer til udvikleren.
For at sikre god praksis og standarder opstod flere JavaScript Static Analyzer Tools, såsom:
Med så mange forskellige værktøjer er det svære at vælge den bedste linter til vores projekt. Som udvikler føler jeg, at det vigtigste kendetegn ved ethvert værktøj er, hvor konfigurerbare og nemme at integrere de er. Så for ethvert JavaScript-projekt ville jeg vælge undefined og integrere det med undefined. Dette skulle give mig alt det gode ved et fnugværktøj, der er meget konfigurerbart med en kode formaterer.
Når du bygger apps, er det vigtigt at have en god opsætning af automatiserede og manuelle værktøjer, der sikrer de bedste standarder og kodekvalitet. Hvert projekt skal have et fnugværktøj til at opfylde disse behov. Begge værktøjer kan konfigureres, og de fungerer godt sammen, og hver har et forskelligt lintingansvar mellem programmerings- og stilistiske fejl, hvilket gør det nemt at fange fejl.
undefined er et af de mest anvendte fnugværktøjer, og der er en grund til det. Meget konfigurerbar, den har en enorm adoption fra samfundet med hundredvis af open source-konfigurationer og plugins. Det tillader konfiguration af flere muligheder som kodningsregler, miljøer, parserindstillinger, udvide konfigurationer og bruge plugins.
På den ene side undefined er ansvarlig for at kontrollere mod programmeringsfejl, på den anden side har vi undefined En meningsfuld kodeks formaterer i stand til at finde stilistiske fejl. Det leveres med nogle kodestilstandarder og er også let at konfigurere. Det er nemt at integrere med undefined og har Code Editor-udvidelser, der kan formatere koden, når du gemmer!
Ved Imaginær sky Vi udvikler React-projekter til vores frontend rige applikationer, så det blev vigtigt at automatisere udviklingsprocessen så meget som muligt med passende værktøjer på plads. Dette behov fører os til at opbygge en open source undefined konfiguration kaldet @imaginary -cloud/eslint-config-react til brug i vores projekter. De største fordele var en hurtig installation/konfiguration og de samme kodestandarder og stil i et andet projekt.
Konfiguration af et fnugværktøj er tidskrævende, især for første gang. Flere forskellige open source-konfigurationer og plugins kan bruges, og det kan være overvældende at vælge de nødvendige, plus den manuelle konfiguration af en linter kan være fejltilbøjelig.
Vi undersøgte og bundtede dem med de bedste kodepraksis, standarder, og kodestilarter. Så resultatet var at bruge to af de mest anvendte undefined konfigurationer:
Og da vi arbejder hårdt med React-applikationer, har vi nogle præferencer i kodestilarter, så vi tilføjede også disse regler til denne konfiguration, hvilket gør det nemt at skifte fra projekt til projekt og være i stand til at levere kode - alle standarder er de samme, da vi deler den samme konfiguration, ja!
Som enhver anden JavaScript-pakke kan disse installeres af undefined eller undefined. Installationen er ret enkel. Begge pakker, undefined og undefined, skal opføres som udviklingsafhængigheder i undefined fil. En måde at hurtigt tilføje dem til projektet er at køre kommandoen på terminalen
Dette vil installere og tilføje undefined og undefined som projektafhængigheder, og alt er indstillet. For en bedre udviklingsoplevelse er det muligt at installere en undefined udvidelse til din Code Editor, der gør det muligt at fremhæve kodefejl i editoren, mens du udvikler.
Der er flere måder at konfigurere undefined Som forklaret i den officielle dokumentation. Den mest almindelige er at oprette en undefined (YAML- og JS-filer kan også bruges!) med alle de konfigurationer, der ønskes til projektet. For at opnå dette mere effektivt kan flere forskellige open source-konfigurationer bruges som forklaret ovenfor.
For React-projekter skal vi bare installere @imaginary -cloud/eslint-config-react pakke og udvid vores undefined konfiguration. Da denne konfiguration også tilføjer de nødvendige afhængigheder til den fulde konfiguration, brugte vi den samme tilgang som undefined konfiguration.
For at installere konfigurationen skal du bare køre kommandoen i terminalen
undefined er en kommando bundtet med undefined på de nyeste versioner, der tillader undefined pakker, der skal udføres uden at have dem installeret på projektet. Den undefined pakken kører og ser på peer-afhængighederne af undefined og installer dem som udviklingsafhængigheder sammen med konfigurationen. Dette trin gemmes til projektet undefined arkivere alle de nødvendige afhængigheder automatisk.
Med ældre versioner af undefined (< v5.2) undefined er ikke tilgængelig, men det er muligt at installere konfigurationen ved at køre følgende script i terminalen
undefined
undefined
Efter installation undefined konfiguration, tilføj de næste to linjer til undefined arkivere
undefined
Alt er indstillet og klar til brug. Dette viser, hvor nemt det er at installere og konfigurere undefined og undefined til et React-projekt i kun to trin ved hjælp af @imaginary -cloud/eslint-config-react konfigurationspakke.
For mere avanceret konfiguration er det lettere at oprette en undefined arkiver og udvid undefined konfiguration. Fjern undefined fra undefined fil og tjek undefined dokumentation for flere muligheder.
undefined eksempelfil
undefined
Den undefined filen skal have følgende linje
At bruge det samme undefined Konfiguration fra @imaginary -cloud/eslint-config-react som en selvstændig undefined config installer @imaginary -cloud/prettier-config pakke
For at afslutte konfigurationen skal du sørge for, at undefined filen har undefined at bruge det rigtige undefined konfiguration
Den enkleste måde er at tilføje under script-objektet i undefined arkiver de næste to scripts:
Manuskriptet undefined vil køre linter i projektet og udelade filerne fra undefined fil. Hvis nogen bedste praksis, standarder eller kodestilarter ikke er opfyldt i vores kode, vises den faktiske fejl eller advarsel. Dette er ekstremt vigtigt at bruge i ethvert projekt, der har en undefined opsætning. Manuskriptet undefined er nyttigt til automatisk at rette enhver fejl, der er fundet, hvis linteren ved, hvordan man løser det. Når du tilføjer en linter-konfiguration til et eksisterende projekt, kan dette script hjælpe med at rette mange fejl og forbedre den samlede kodekvalitet uden nogen anstrengelse.
Vi følger den samme tilgang som ovenfor og tilføjer et script til at udføre vores undefined
Kører scriptet undefined formaterer kodestilen for alle JavaScript-filer. Synes godt om undefined, det har fantastiske Code Editors udvidelser, der muliggør undefined til at køre på filer, når de gemmes, formatere dem på farten uden behov for at køre scriptet manuelt!
Flere og flere rammer og biblioteker dukker op for at levere mere komplekse og dynamiske applikationer, så det er ekstremt vigtigt at have de rigtige statiske kodeanalysatorer på plads. Dette garanterer, at bedste kodepraksis, standarder og gode kodestilarter leveres. Dette forbedrer læsbarheden og vedligeholdeligheden, hvilket gør det lettere at udvikle nye funktioner i små mængder tid. At følge standarder er også vigtigt, fordi udviklere kan arbejde med en ukendt kodebase uden megen indsats.
Tid er alt i et miljø med hurtigt tempo, så det er vigtigt at have en god opsætning af værktøjer, så udviklerne kan være mere effektive og bruge mere tid på at udvikle nye funktioner end at lede efter fejl i koden.
Brug og drift af vores fnugværktøjer i vores undefined pipelines sammen med automatiserede tests og kodegennemgange i hvert nyt stykke kode er vigtigt. Dette er de grundlæggende værktøjer, som ethvert projekt skal have for at garantere, at den bedste løsning altid leveres. Alt i alt er dette de små og smarte værktøjer, der udnytter vores daglige udvikling!
Fandt du denne artikel nyttig? Du kan måske også lide disse!
Full-stack udvikler og JavaScript-elsker. Top notch front-end er min ting, hvor jeg kan lide at eksperimentere med nye ting. Kajakfisker, brygger og øldrikker!
People who read this post, also found these interesting:
.webp)
