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

Hvis du vil bidrage til open source-projekter som freeCodeCamp, skal du først oprette fnug.

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

Lad os oprette 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 antager et par antagelser:

  • Du har fulgt Free Code Camps retningslinjer for bidrag indtil 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 i det mindste en grundlæggende forståelse af at bruge kommandolinjen og git .
  • Du bruger Atom som teksteditor (selvom denne artikel skal være nyttig, selvom du ikke er det - du skal bare tjekke dokumentation til din teksteditor for at få instruktioner om ESLint)

Hvad er egentlig fnug?

" Linting er processen med at køre et program, der analyserer kode for potentielle fejl." - Oded på Stack Overflow

Og ESLint er en fnugfri værktøj specifikt til JavaScript-kode. Du bruger ESLint til at finde problematisk kode (“fejl”) skrevet i JavaScript.

Forresten kommer “ES” i ESLints navn fra “ECMAScript”, som er det officielle navn på det centrale JavaScript-sprog.

Forestil dig ESLint som din bedstemor, der fortæller dig, hvordan du skal leve dit liv. Hun påpeger dine fejl og beder dig rydde op. 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. Syntaksen for JavaScript (eller hvilket programmeringssprog du liner). På denne måde vil du sige, at linteren opfanger syntaksfejl.

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

Eller disse fejl kan være subjektive , hvilket betyder, at du (ikke Technical Committee 39, ECMAScript's standardorgan) har defineret et sæt regler, som din kode skal følge. Disse kodningsregler er almindeligt opsummeret i en JavaScript-stilvejledning , som er et dokument, der erklærer en slags kodning af bedste praksis. Gratis Code Camp blandt mange andre softwareprojekter bruger stilguider.

Airbnbs JavaScript-stilvejledning er en af ​​de mest populære for JavaScript-udviklere, og Free Code Camps stilvejledning er baseret på den.

Formålet med at følge en stilvejledning er at have en "skrivestandard", som udviklere af dit projekt følger for at holde koden ren, enkel og konsistent. Dette svarer til konceptet i AP Stylebookjournalister følger. Den eneste forskel er, at AP Stylebook er en stilguide til engelsk grammatik, mens Airbnbs stilguide er til JavaScript.

Når du har gjort det klart, hvordan koden skal skrives til din software-projekt (hvilket betyder, du har valgt en stil vejledning eller skabt en af dine egne), er du klar til at oprette din linting regler for ESLint.

Den måde, ESLint fungerer på, er at du fortæller det hvilke regler (dvs. du tager dine stilvejledningsregler og konverterer dem til fnugregler ) det skal vide om, og hvad det skal passe på, så ESLint kan banke dig på skulderen og fortælle dig når du skriver problematisk kode.

For at fortælle ESLint om dine linting-regler konfigurerer du dem i en konfigurationsfil kaldet .eslintrceller eslintConfigeller package.json, som ESLint vil søge efter og læse automatisk. Og mens du udvikler dig, vil ESLint advare dig om fejlkode, der ikke overholder disse regler, så du kan foretage ændringer - mens du koder. Hvilket er som at have bedstemorparprogram med sig.

Hvor ESLint skinner, er det " designet til at være helt konfigurerbart, hvilket betyder, at du kan slå alle regler fra og kun køre med grundlæggende syntaksvalidering eller blande og matche de medfølgende regler og dine brugerdefinerede regler for at gøre ESLint perfekt til dit projekt ." Med andre ord kan du blande og matche både objektive og subjektive regler.

Du har muligheder, når det kommer til JavaScript-linting-værktøjer, men i denne artikel fokuserer vi på ESLint, fordi Free Code Camp specificerer det i dets retningslinjer for bidrag. Og det er meget brugt andre steder.

Du har også muligheder, når det kommer til JavaScript-stilguider. Airbnbs er en god at blive fortrolig med, fordi den har over 45.000 stjerner på GitHub på tidspunktet for denne skrivning og vokser i brug.

Opsæt Linting til freeCodeCamp

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

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

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

3: Indtast npm install eslint --save-devterminal

4: Gå til Indstillinger > ;> Insta ll> & g t i din Atom-teksteditor . og skriv li nter-eslint i søgefeltet Søgepakker

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

5: Installer linter-eslint og linter .

6: I din Free Code Camp-mappe skal du lukke for enhver gt;.js files and and then re-open

And now the next time you write JavaScript you should see ESLint working!

Note: I’ve left out an important step: configuring ESLint, that is, the part where you customize ESLint and tell it about your linting rules. I did so because when you clone Free Code Camp’s repository, it already comes with ESLint configuration files, for example, see eslintrc and package.json. And so you don’t need to do any configuration of your own.

In the event you work on a project where you need to configure ESLint, I point you to the following links:

  • Configuring ESLint.
  • Get Started with ESLint v1.0
  • npm, eslint
  • Airbnb’s extensible shared ESLint config

To wrap up:

  1. Linting is the process of checking for problematic code.
  2. ESLint is one such tool that performs linting.
  3. ESLint can be a great learning tool because it forces you to write clean, consistent code and develop good coding habits.
  4. Many open source projects ask you to run ESLint.
  5. You should have ESLint set up in your text editor to contribute to Free Code Camp.
  6. If you’re not using Atom, check your text editor’s docs for how to install ESLint.
  7. Stay the course.

If you have questions, you can tweet me at @gilbertginsberg or find me at GilbertIndex.