Sådan konfigureres ESLint i Atom, så du kan bidrage til Open Source

Dette handler ikke om det fnug, du får fra uld.

Hvis du vil bidrage til open source-projekter som Free Code Camp, skal du først konfigurere fôring.

De fleste projekter har deres egne stilstandarder for JavaScript, og disse håndhæves automatisk ved hjælp af fnugningsværktøjer som ESLint.

Lad os indstille ESLint til at køre i Atom, en af ​​de mest populære kodeditorer.

Før vi begynder, her er en hurtig heads-up, som jeg tager et par antagelser:

  • Du har fulgt Free Code Camps bidragsretningslinjer op til den del, der læser Setup Linting.
  • Og så har du installeret de nødvendige forudsætninger (især Node.js og npm).
  • Du har mindst en grundlæggende forståelse af at bruge kommandolinjen og git.
  • Du bruger Atom som en tekstredigerer (selvom denne artikel skal være nyttig, selvom du ikke er det - skal du bare tjekke din teksteditorers dokumentation for instruktioner vedrørende ESLint)

Hvad præcist er fnug?

"Fud er processen med at køre et program, der vil analysere kode for potentielle fejl." - Oded on Stack Overflow

Og ESLint er et fnurrende værktøj, der er specifikt for JavaScript-kode. Du bruger ESLint til at finde problematisk kode (“fejl”) skrevet i JavaScript.

For øvrig kommer "ES" i ESLints navn fra "ECMAScript", som er det officielle navn på det centrale JavaScript-sprog.

Forestil dig ESLint som din bedstemor fortæller dig, hvordan du kan leve dit liv. Hun påpeger dine fejl og fortæller dig at rydde op i dem. Du lytter til bedstemor, fordi bedstemor ved det.

Disse "fejl" kan være objektive, hvilket betyder, at de er forårsaget af kode, der ikke er i overensstemmelse med, f.eks., Syntaks af JavaScript (eller hvilket programmesprog du også udretter). På denne måde kan du sige, at linneren samler syntaksfejl.

Jeg siger "objektive fejl", fordi disse fejl er iboende i selve JavaScript. Hvis du udelader en semi-colon i slutningen af ​​en variabel erklæring, er det objektivt en fejl ifølge JavaScript-forfatterne - selvom det ikke forhindrer dit program i at køre (se automatisk indsættelse af semi-colon).

Eller disse fejl kan være subjektive, hvilket betyder, at du har (ikke teknisk udvalg 39, standardorganet i ECMAScript) defineret et sæt regler, som din kode skal følge. Disse kodningsregler opsummeres ofte i en JavaScript-stilguide, som er et dokument, der erklærer en slags kodning af bedste praksis. Free Code Camp blandt mange andre softwareprojekter bruger stilguider.

Airbnb's JavaScript-stilguide er en af ​​de mest populære for JavaScript-udviklere, og Free Code Camps stilguide er baseret på den.

Formålet med at følge en stilguide er at have en "skrivestandard", som udviklerne af dit projekt følger for at holde koden ren, enkel og konsistent. Dette ligner begrebet AP Stylebook journalister følger. Den eneste forskel er, at AP Stylebook er en stilguide til engelsk grammatik, mens Airbnb's stilguide er til JavaScript.

Når du har klargjort, hvordan kode skal skrives til dit softwareprojekt (hvilket betyder, at du valgte en stilguide eller oprettede en af ​​dine egne), er du klar til at konfigurere dine fnurringsregler til ESLint.

Den måde, ESLint fungerer på, er at du fortæller det, hvilke regler (dvs. du tager dine stilguideregler og konverterer dem til fnugeregler), den skal vide om, og hvad den skal se ud for, så ESLint kan trykke på dig på skulderen og fortælle dig når du skriver problematisk kode.

For at fortælle ESLint om dine foringsregler konfigurerer du dem i en konfigurationsfil kaldet.eslintrc eller eslintConfig eller package.json, som ESLint vil kigge efter og læse automatisk. Og når du udvikler dig, vil ESLint advare dig om en fejlkode, der ikke overholder disse regler, så du kan foretage revisioner - som du koder. Hvilket er som at have bedstemor par program med dig.

Hvor ESLint skinner, er det “designet til at være fuldt konfigurerbart, hvilket betyder, at du kan slukke for enhver regel og kun køre med grundlæggende syntaksvalidering, eller blande og matche de bundlede regler og dine tilpassede regler for at gøre ESLint perfekt til dit projekt.” I andre ord, du kan blande og matche både objektive og subjektive regler.

Du har muligheder for JavaScript-fnugningsværktøjer, men i denne artikel fokuserer vi på ESLint, fordi Free Code Camp specificerer det i sine retningslinjer for bidrag. Og det er meget brugt andre steder.

Du har også muligheder for JavaScript-stilguider. Airbnb's er en god en at blive fortrolig med, fordi den har over 45.000 stjerner på GitHub på dette tidspunkt, og den vokser i brug.

Opsætning Fodring til gratis kodecamp

Der er to måder at installere ESLint: globalt og lokalt. Vi vil fokusere på at installere det lokalt, hvilket betyder for din lokale arbejdsmappe, dvs. dit klonede lager i Free Code Camp.

1: Åbn din Free Code Camp-klon i din teksteditor (dette antager, at du faktisk har klonet Free Code Camp til din computer)

2: I Terminal, cd (skift mappe) til din Free Code Camp-bibliotek

3: Skriv npm installer eslint - gemme-dev i terminal

4: Gå til Præferencer >> Installer >> i din Atom-teksteditor, og skriv linter-lins i søgefeltet Søgepakker

Bemærk: Du kan også installere Atom-pakker fra kommandolinjen ved hjælp af kommandoen apm. Se disse instruktioner for et eksempel.

5: Installer linter-lint og lint.

6: Luk i alle dine .js-filer i din Free Code Camp-bibliotek, og åbn derefter derefter igen

Og nu næste gang du skriver JavaScript, skal du se ESLint arbejde!

Bemærk: Jeg har udeladt et vigtigt trin: konfiguration af ESLint, det vil sige den del, hvor du tilpasser ESLint og fortæller det om dine fnurringsregler. Det gjorde jeg, fordi når du kloner Free Code Camp's lager, kommer det allerede med ESLint-konfigurationsfiler, for eksempel se eslintrc og package.json. Og så behøver du ikke foretage nogen konfiguration af din egen.

I tilfælde af at du arbejder på et projekt, hvor du har brug for at konfigurere ESLint, peger jeg dig på følgende links:

  • Konfiguration af ESLint.
  • Kom i gang med ESLint v1.0
  • npm, eslint
  • Airbnb's udvidelige delte ESLint-konfiguration

Sådan pakkes op:

  1. Foring er processen med at kontrollere, om der er problematisk kode.
  2. ESLint er et sådant værktøj, der udfører fnug.
  3. ESLint kan være et godt læringsværktøj, fordi det tvinger dig til at skrive ren, konsekvent kode og udvikle gode kodningsvaner.
  4. Mange open source-projekter beder dig om at køre ESLint.
  5. Du skal have ESLint sat op i din teksteditor for at bidrage til Free Code Camp.
  6. Hvis du ikke bruger Atom, skal du kontrollere dokumenter i din teksteditor for, hvordan du installerer ESLint.
  7. Bliv løbet.

Hvis du har spørgsmål, kan du tweet mig på @gilbertginsberg eller finde mig på GilbertIndex.