Az ESLint beállítása az Atomban, hogy hozzájárulhasson a nyílt forráskódhoz

Ha olyan nyílt forráskódú projektekhez szeretne hozzájárulni, mint a freeCodeCamp, először be kell állítania a szöszökést.

A legtöbb projekt saját stílussal rendelkezik a JavaScript számára, és ezeket automatikusan végrehajtják olyan szöszös eszközök, mint az ESLint .

Állítsuk be az ESLint-et az Atom futtatásához, az egyik legnépszerűbb kódszerkesztőhöz.

Mielőtt nekilátnánk, íme egy gyors gondolkodás, amelyből néhány feltevést teszek:

  • Követted a Free Code Camp közreműködési irányelveit egészen a Setup Linting feliratáig.
  • Így telepítette a szükséges előfeltételeket (különösen a Node.js és az npm).
  • Legalább alapvető ismeretekkel rendelkezik a parancssor és a git használatáról .
  • Az Atomot használja szövegszerkesztőként (bár ennek a cikknek akkor is hasznosnak kell lennie, ha nem - csak ellenőriznie kell a szövegszerkesztő dokumentációját az ESLint-re vonatkozó utasításokért)

Mi a szöszölés?

"A szálkázás egy olyan program futtatásának folyamata, amely elemzi a kódot a lehetséges hibák miatt." - Oded on Stack Overflow

Az ESLint pedig a JavaScript kódra jellemző szöszmötlő eszköz . Az ESLint segítségével megkeresheti a JavaScript-be írt problémás kódot („hibákat”).

Egyébként az ESLint nevében szereplő „ES” az „ECMAScript” -ből származik, amely az alapvető JavaScript nyelv hivatalos neve.

Képzelje el, hogy az ESLint nagyanyja elmondja, hogyan kell élni az életét. Rámutat a hibáira, és azt mondja, hogy tisztítsa meg őket. Nagyit hallgatsz, mert a nagymama tudja.

Ezek a „hibák” objektívek lehetnek , ami azt jelenti, hogy azokat a kódok okozzák, amelyek nem felelnek meg mondjuk a JavaScript szintaxisának (vagy bármelyik programozási nyelvnek, amelyet szúnyogol). Ily módon azt mondhatja, hogy a linter szintaxis hibákat vesz fel.

„Objektív hibákat” mondok, mert ezek a hibák magának a JavaScriptnek a velejárói. Ha egy változó deklaráció végén pontosvesszőt hagy ki, az objektíven hiba a JavaScript írói szerint - még akkor is, ha ez nem akadályozza meg a program futtatását (lásd az automatikus pontosvessző beillesztését).

Vagy ezek a hibák szubjektívek lehetnek , ami azt jelenti , hogy Ön (nem a 39. technikai bizottság, az ECMAScript standard testülete) meghatározta azokat a szabályokat, amelyeket a kódjának be kell tartania. Ezeket a kódolási szabályokat általában egy JavaScript stílus útmutatóban foglalják össze , amely egy olyan dokumentum, amely egyfajta legjobb kódolási gyakorlatot deklarál. A Free Code Camp sok más szoftverprojekt között stílus útmutatókat használ.

Az Airbnb JavaScript stílusútmutatója az egyik legnépszerűbb a JavaScript fejlesztők számára, és a Free Code Camp stílusútmutatója ezen alapul.

A stílusismertető követése egy olyan „írási szabvány” kialakítása, amelyet a projekt fejlesztői követnek, hogy a kód tiszta, egyszerű és következetes legyen. Ez hasonló az AP Stylebook koncepciójáhozújságírók követik. Az egyetlen különbség az, hogy az AP Stylebook egy stílus útmutató az angol nyelvtanhoz, míg az Airbnb stílus útmutató a JavaScript-hez.

Miután tisztázta, hogyan kell írni a kódot a szoftverprojektjéhez (vagyis stílusstílust választott, vagy létrehozott egyet), készen áll az ESLint szöcskölési szabályainak beállítására.

Az ESLint működésének módja az, hogy elmondja, milyen szabályokról (azaz, ha átveszi a stílus útmutató szabályait, és átalakítja azokat szöcskös szabályokká ), amelyekről tudnia kell, és mire kell figyelnie, így az ESLint megérintheti a vállát, és tudatja Önnel amikor problémás kódot írsz.

Ha el akarja mondani az ESLint-et a szöcskölési szabályairól, konfigurálja azokat egy .eslintrcvagy eslintConfigvagy nevű konfigurációs fájlban package.json, amelyet az ESLint automatikusan keres és olvas. A fejlesztés során az ESLint figyelmeztetni fogja azokat a hibakódokat, amelyek nem tartják be ezeket a szabályokat, így módosításokat végezhet - kódolás közben. Ami olyan, mintha nagymama páros lenne veled.

Azon a helyen, ahol az ESLint ragyog, „ teljesen konfigurálhatónak tervezték, vagyis minden szabályt kikapcsolhat, és csak az alapszintaktikai ellenőrzéssel futtathatja, vagy keverheti és illesztheti a mellékelt szabályokat és az egyéni szabályokat, hogy az ESLint tökéletes legyen a projektjéhez ”. Más szavakkal, keverhet objektív és szubjektív szabályokat egyaránt.

Lehetőségei vannak, amikor a JavaScript szöszösítő eszközökről van szó, de ebben a cikkben az ESLintre koncentrálunk, mert a Free Code Camp a hozzájárulási irányelveiben meghatározza. És másutt széles körben használják.

Lehetősége van a JavaScript stílus útmutatóira is. Az Airbnb-t jó megismerni, mert az írás idején több mint 45 000 csillag van a GitHub-on, és egyre növekszik a használata.

A Linting beállítása a freeCodeCamp számára

Az ESLint telepítésének két módja van: globálisan és lokálisan. Arra fogunk összpontosítani, hogy lokálisan telepítsem , ami a helyi munkakönyvtár, azaz a Free Code Camp klónozott tárházát jelenti.

1: Nyissa meg a Free Code Camp klónját a szövegszerkesztőben (ez feltételezi, hogy valóban klónozta a Free Code Camp-et a számítógépére)

2: A Terminálban cd(könyvtár módosítása) a Free Code Camp könyvtárba

3: Írja npm install eslint --save-devbe a terminálba

4: Az Atom szövegszerkesztõjében lépjen a Beállítások > ;> Insta ll> & g t; és írja be a li nter-eslint szót a Keresési csomagok keresőmezőbe

Megjegyzés: Az Atom csomagokat a parancssorból is telepítheti a parancs használatával apm. Például lásd ezeket az utasításokat.

5: Telepítse a linter-eslint és a lintert .

6: A Free Code Camp könyvtárában zárjon be bármit 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.