Lintingverktyg spelar en avgörande roll i vår utvecklingsprocess när vi bygger webbapplikationer. Varje utvecklare bör veta vad en Linter är, hur man installerar och konfigurerar en och hur man använder dem effektivt, så att de bästa kodstandarderna gäller för vårt projekt.
Vid Imaginärt molnVi hade levererat flera Reagera appar för våra kunder, så vi skapade en öppen källkod ESLint konfigurera - @imaginary -moln/eslint-config-react att användas internt och delas med samhället. Målet är att ha en centraliserad konfiguration som alla kan använda, lätt att installera och konfigurera med de bästa JS-kodstandarderna i samhället och linting på jsx kod utan krångel med att konfigurera en Linter.
Men varför använda Imaginary Cloud-konfiguration istället för andra tillgängliga? Eftersom vi samlade de bästa och mest använda konfigurationerna med öppen källkod i ett centraliserat paket, vilket gör installationen och konfigurationsprocessen snabb och smärtfri. Den största fördelen med att använda @imaginary -moln/eslint-config-react över det välkända Airbnb konfiguration är att vi också använder Airbnb config för deras bästa kodpraxis plus kodstilen för Snyggare för att ha en trevligare och läsbar kod.
I slutet av den här artikeln bör du kunna veta vad Linting-verktyg är och hur du installerar/konfigurerar ESLint och Snyggare för Reagera applikationer med bara ett par steg.
Linting är processen att utvärdera och felsöka källkoden i bakgrunden genom att analysera mot en uppsättning regler för programmatiska och stilistiska fel. Detta gör att utvecklaren kan hitta fel innan koden körs. Regler upprätthåller också bästa kodstandarder och praxis, bättre kodkvalitet, mer läsbar och lättare att underhålla.
Enligt GitHub Octoverse-undersökning, JavaScript fortsätter att vara det mest använda språket under de senaste fem åren. Detta tillät JS ekosystem att växa och utvecklas genom att ge fler och bättre verktyg för utvecklaren.
För att säkerställa god praxis och standarder uppstod flera JavaScript Static Analyzer Tools som:
Med en sådan mängd verktyg är det svåra att välja den bästa lintern för vårt projekt. Som utvecklare känner jag att det viktigaste kännetecknet för alla verktyg är hur konfigurerbara och enkla att integrera de är. Så för alla JavaScript-projekt skulle jag välja ESLint och integrera den med Snyggare. Detta borde ge mig all godhet av ett luddverktyg som är mycket konfigurerbart med en kod formaterare.
När du bygger appar är det viktigt att ha en bra installation av automatiserade och manuella verktyg som säkerställer bästa standarder och kodkvalitet. Varje projekt måste ha ett luddverktyg för att uppfylla dessa behov. Båda verktygen är konfigurerbara och de fungerar bra tillsammans, var och en har olika lintingansvar mellan programmering och stilistiska fel, vilket gör det enkelt att fånga fel.
ESLint är ett av de mest använda luddverktygen och det finns en anledning till det. Mycket konfigurerbar, den har en enorm adoption från samhället med hundratals konfigurationer och plugins med öppen källkod. Det tillåter konfiguration av flera alternativ som kodningsregler, miljöer, parseralternativ, utöka konfigurationer och använda plugins.
Å ena sidan ESLint ansvarar för att kontrollera mot programmeringsfel, å andra sidan har vi Snyggare En meningsfull kod formaterare kan hitta stilistiska fel. Den levereras med vissa kodstilstandarder och är också lätt att konfigurera. Det är lätt att integrera med ESLint och har Code Editor-tillägg som kan formatera koden när du sparar!
Vid Imaginärt moln Vi utvecklar React-projekt för våra frontend-rika applikationer så det blev viktigt att automatisera utvecklingsprocessen så mycket som möjligt med rätt verktyg på plats. Detta behov leder oss till att bygga en öppen källkod ESLint konfiguration kallad @imaginary -moln/eslint-config-react att använda i våra projekt. De främsta fördelarna var en snabb installation/konfiguration och samma kodstandarder och stil i ett annat projekt.
Att konfigurera ett luddverktyg är tidskrävande, särskilt för första gången. Flera olika konfigurationer och plugins med öppen källkod kan användas och att välja de nödvändiga kan vara överväldigande plus den manuella konfigurationen av en linter kan vara felbenägen.
Vi undersökte och kombinerade de med de bästa kodmetoderna, standarderna och kodstilarna. Så resultatet var att använda två av de mest använda ESLint konfigurationer:
Snyggare verktyg och lägger till kodstilformatregler, detta tillämpas också på jsx kod från React-applikationer
Och eftersom vi arbetar hårt med React-applikationer har vi vissa preferenser i kodstilar så vi har också lagt till dessa regler i den här konfigurationen, vilket gör det enkelt att växla från projekt till projekt och kunna leverera kod - alla standarder är desamma eftersom vi delar samma konfiguration, ja!
Liksom alla andra JavaScript-paket kan dessa installeras av npm eller garn. Installationen är ganska enkel. Båda paketen, ESLint och Snyggare, måste listas som utvecklingsberoenden i paket.json fil. Ett sätt att snabbt lägga till dem i projektet är att köra kommandot på terminalen
Detta kommer att installera och lägga till ESLint och Snyggare som projektberoenden och allt är inställt. För en bättre utvecklingsupplevelse är det möjligt att installera en ESLint tillägg till din kodredigerare som gör det möjligt att markera kodfel i redigeraren medan du utvecklar.
Det finns flera sätt att konfigurera ESLint Som förklarats i den officiella dokumentation. Det vanligaste är att skapa en .eslintrc (YAML- och JS-filer kan också användas!) med alla konfigurationer som önskas för projektet. För att uppnå detta mer effektivt kan flera olika konfigurationer med öppen källkod användas som förklarats ovan.
För React-projekt behöver vi bara installera @imaginary -moln/eslint-config-react paketera och utöka vår ESLint konfiguration. Eftersom den här konfigurationen också lägger till de nödvändiga beroenden för hela konfigurationen använde vi samma tillvägagångssätt som Airbnb konfigurera.
För att installera konfigurationen kör bara kommandot i terminalen
npx är ett kommando som buntas med npm på de senaste versionerna som tillåter npm paket som ska köras utan att ha dem installerade på projektet. Den install-peerdeps paketet kommer att köras och titta på peer-beroenden för @imaginary -moln/eslint-config-react och installera dem som utvecklingsberoenden tillsammans med konfigurationen. Detta steg kommer att spara till projektet paket.json arkivera alla beroenden som behövs automatiskt.
Med äldre versioner av npm (< v5.2) npx är inte tillgängligt men det är möjligt att installera konfigurationen genom att köra följande skript i terminalen
Efter installation @imaginary -moln/eslint-config-react konfiguration, lägg till de två följande raderna till paket.json fil
Allt är inställt och klart att använda. Detta visar hur enkelt det är att installera och konfigurera ESLint och Snyggare för ett React-projekt i bara två steg med @imaginary -moln/eslint-config-react konfigurationspaket.
För mer avancerad konfiguration är det lättare att skapa en .eslintrc arkivera och utöka @imaginary -moln/eslint-config-react konfiguration. Ta bort ESLintConfig från paket.json arkivera och kontrollera ESLint dokumentation för fler alternativ.
.eslintrc exempelfil
Den paket.json filen måste ha följande rad
Att använda samma Snyggare Konfiguration från @imaginary -moln/eslint-config-react som en fristående Snyggare config installera @imaginary -moln/prettier-config paket
För att slutföra konfigurationen, se till att paket.json filen har ”snyggare”: "@imaginary -cloud/prettier-config” att använda rätt Snyggare konfiguration
Det enklaste sättet är att lägga till under skriptobjektet i paket.json arkivera de två följande skripten:
Skriptet npm run lint kommer att köra linter i projektet och utelämna filerna från .gitignore fil. Om några bästa praxis, standarder eller kodstilar inte uppfylls i vår kod visas det faktiska felet eller varningen. Detta är oerhört viktigt att använda i alla projekt som har en CZ/CD inställning. Skriptet npm kör lint:fix är användbart för att automatiskt fixa eventuella fel som hittats, om lintern vet hur man fixar det. När du lägger till en linterkonfiguration i ett befintligt projekt kan det här skriptet hjälpa till att åtgärda många fel och förbättra den övergripande kodkvaliteten utan ansträngning.
Vi kommer att följa samma tillvägagångssätt som ovan och lägga till ett skript för att köra vår Snyggare
Kör skriptet npm körformat kommer att formatera kodstilen för alla JavaScript-filer. Gilla ESLint, den har fantastiska Code Editor-tillägg som möjliggör Snyggare att köra på filer när de sparas, formatera dem i farten utan att behöva köra skriptet manuellt!
Fler och fler ramverk och bibliotek dyker upp för att leverera mer komplexa och dynamiska applikationer, så det är oerhört viktigt att ha rätt statiska kodanalysatorer på plats. Detta garanterar att bästa kodpraxis, standarder och bra kodstilar levereras. Detta förbättrar läsbarheten och underhållbarheten, vilket gör det lättare att utveckla nya funktioner på kort tid. Att följa standarder är också viktigt eftersom utvecklare kan arbeta med en okänd kodbas utan mycket ansträngning.
Tid är allt i en miljö med snabb takt, så det är viktigt att ha en bra uppsättning verktyg som gör att utvecklarna kan vara mer effektiva och spendera mer tid på att utveckla nya funktioner än att leta efter fel i koden.
Använda och köra våra luddverktyg i vår CZ/CD pipelines tillsammans med automatiserade tester och kodgranskningar i varje ny kod är viktigt. Dessa är de grundläggande verktygen som alla projekt ska ha för att garantera att den bästa lösningen alltid levereras. Sammantaget är det de små och smarta verktygen som utnyttjar vår vardagliga utveckling!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Full-stack utvecklare och JavaScript-älskare. Top notch front-end är min grej där jag gillar att experimentera med nya saker. Kajakfiskare, bryggare och öldrickare!
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
